easy UI异步树的动态加载treegrid（实践记录）

最新推荐文章于 2023-05-13 08:36:00 发布
最新推荐文章于 2023-05-13 08:36:00 发布
阅读量2.4k 收藏 1
点赞数 1
分类专栏： JAVASCRIP 文章标签： javascript 异步 ui jsp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/VS0layer/article/details/53183488
版权

JSP 页面

<%@ include file="/WEB-INF/pages/include/taglibs-include.jsp"%>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<html>
<head>
<%@ include file="/WEB-INF/pages/decorators/main-head-include.jsp"%>
<title></title>
<script type="text/javascript">
</script>
</head>
<body>
    <%@ include file="/WEB-INF/pages/decorators/main-body-include.jsp"%>
    <div id="main">
        <div id="mainWrapper">
            <!-- here is the button area -->
            
            <div class="spacer">
                <hr />
            </div>
            <div class="searchResult">
                <table  id="menuTree" title="<spring:message code='ruralcreditunioninstUnit.title.summary.search.rslt'/>">
                    <thead>
                        <tr class="trStyle">
                            <th data-options="field:'id',width:fixWidth(0.2),halign:'center'"><spring:message code="ruralCreditUnionInstUnit.label.summary.grid.instName" /></th>
                            <th data-options="field:'text',width:fixWidth(0.1),halign:'center'"><spring:message code="ruralCreditUnionInstUnit.label.summary.grid.instCode" /></th>
                            <th data-options="field:'pid',width:fixWidth(0.1),halign:'center'"><spring:message code="ruralCreditUnionInstUnit.label.summary.grid.instType" /></th>
                            <th data-options="field:'state',width:fixWidth(0.1),halign:'center',align:'center'"><spring:message code="ruralCreditUnionInstUnit.label.summary.grid.agentSalesFlag"/></th>
                        </tr>
                    </thead>
                </table>
            </div>
            <div class="spacer">
                <hr />
            </div>
        </div>
    </div>
<%@ include file="/WEB-INF/pages/instmgr/ruralcreditunioninstunit/js-ruralCreditUnionInstUnit-include.jsp" %>
<%@ include file="/WEB-INF/pages/decorators/main-foot-include.jsp"%>
</body>

</html>


<script type="text/javascript">
if ($('#menuTree').length > 0) {

$('#menuTree').treegrid({
        url:"queryRuralCreditUnionInstUnitDataGrid1.do",
        onBeforeExpand:function(node,data){  
            if (node) {
                var url1 ="<c:url value='/operation/instmgr/queryRuralCreditUnionInstUnitDataGrid1.do'/>?pid=" + node.id;
                $('#menuTree').treegrid('options').url = url1;
            }
        },  
        idField:'id',   
        treeField:'id',   
        animate:true,
        lines:true,
        rownumbers:true,
        showHeader:true,
        height:'auto',
        width:'auto',
        autoRowHeight:true,
        autoRowWidth:true,
        fitColumns:true,
        loadMsg: '<spring:message code="pagination.label.loadMsg" />',
        onLoadSuccess: function(data){
            $('#menuTree').treegrid(

最低0.47元/天 解锁文章
歪德
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
easyui treegrid动态加载节点
wang_keng的博客
04-09 1万+
最近在做一个权限管理系统，需要有一个菜单的管理，菜单的数据结构是自关联无限极的一对多关系。在列表管理页面决定选择用easyui的treegrid插件。考虑到其无限层级关系，若要一次性拿出所有数据那需要在mysql中写函数跟存储过程，需要有临时表的存在，这样会相对降低效率，所以选择用动态异步加载的方式请求数据 首先来看一下效果图（第一次加载的结果页面）： 对于treegrid的使用我们可
easyui treegrid动态加载树形列表
wanghaichaonihao的专栏
07-27 4666
TreeGrid是一种DHTML控件，其完全使用JavaScript语言编写，用以在HTML页面上展示具有层次结构的数据项，其核心技术为多叉树。例如  $('#tt').treegrid({ nowrap: false,    rownumbers: true,    animate:true,    collapsible:true,    loadMsg:'
jQuery EasyUI 树形菜单 - 树形网格动态加载
unber的博客
05-13 261
动态加载树形网格有助于从服务器上加载部分的行数据，避免加载大型数据的长时间等待。本教程将向您展示如何创建带有动态加载特性的树形网格（TreeGrid）。创建树形网格（TreeGrid）
EasyUI的treegrid组件动态加载数据问题的解决办法
12-24
最近涉及到treegrid组件的查询，需要根据查询条件动态更新EasyUI的treegrid组件的动态加载查询结果
easyUI treeGrid 惰性加载，动态加载，无论有无子节点都显示展开图标
boao_fa的博客
12-05 4951
项目中需要实现主、子项目的展示，由于数据量比较大想设计成惰性加载，搞了半天才搞出来的，做个记录： 1、如果要在节点前显示展开、收起的图标，在节点中必须要有一个“children”属性，且必须是小写，大写的不识别，如果没有这个属性会默认为末级节点 2、“state”属性控制节点的展开、关闭默认状态 3、加载根节点的URL和展开根节点的URL默认是相同的，而且在展开节点的时候URL后面会自动跟一
Treegrid的动态加载实例代码
09-02
在动态加载的场景下，Treegrid可以从服务器获取数据并在用户滚动或展开节点时按需加载，从而提高页面性能和用户体验。 在提供的代码示例中，我们看到Treegrid的配置和使用方法。首先，通过jQuery的$(function() {})...
EASYUI TREEGRID异步加载数据实现方法
09-05
在EASYUI TreeGrid中，异步加载数据是一项重要的功能，允许用户在需要时动态获取数据，提高应用的性能和用户体验。 异步加载数据通常涉及到以下几个关键点： 1. **配置URL**：在TreeGrid的初始化参数中，`url`属性...
EASY-UI示例；EASY-UI示例
09-13
EASY-UI示例EASY-UI示例EASY-UI示例EASY-UI示例EASY-UI示例EASY-UI示例EASY-UI示例EASY-UI示例EASY-UI示例EASY-UI示例EASY-UI示例EASY-UI示例
easyUI treeGrid异步加载，前端+后台实现，包括增删改等具体功能
热门推荐
hwj3747的博客
08-02 1万+
说明前端使用的是easyUI 1.3.6+jq 后台使用的是springMVC 初始化调用后台getCourse方法，返回的json数据格式如下：{"total":3,"rows":[ {"id":1,"typeName":"All Tasks","description":"3/4/2010","sort":"3/20/2010"}, {"id":2,"typeName":"A
JqueryEasyUI Tree 动态加载，稍作修改就可以用了
12-22
JqueryEasyUI Tree 动态加载，稍作修改就可以用了，希望对有需要的人有帮助
数据结构之easyui-treegrid
04-15
NULL 博文链接：https://zhglhy.iteye.com/blog/1766581
Easyui-Datagrid实例-----动态加载数据生成Datagrid
chenqk_123的专栏
12-13 1614
上次说到tree的使用，点击tree节点的时候，新增tabs，今天顺便讲一下生成增加tabs的同时生成Datagrid。首先说一下我的想法，根据API提供的通过iframe加载新的页面或者一个url请求后台数据的实例。觉得应该可以加载新的页面，并在加载完成之后初始化页面定义的datagrid。想法很好，但是....................................... 先看看代码
easyui treegrid 封装（不用分页，用加载更多按钮）延迟加载加加载更多
多特店影的专栏
07-03 965
Js代码   /**   * @author wsf数据加载   */   ;   var intervalId = null;   (function (win,$){       $.myCache = {               dataCache : {},//数据缓存               domOperCache:{}//dom操作缓存    
【EasyUI】基本树形表格TreeGrid踩坑指南
習習君的博客
05-04 2932
最近做公司的一个ssh项目，web层用的是easyui和freemarker写的。最近做一个行政区划树形组件，遇到了许多坑，在此记录一下。其中包含：获取当前树组件层级、树组件的属性、树组件的事件和方法等等。
easy ui 中动态TreeGrid的使用
zhihaizhen的博客
01-09 3291
一、html部分 二、js部分 $(function() { //计算页面高度与宽度 类似EXT风格 var pageWidth = $("#main_nav").width(); var pageHeight = getPageHeight() - $("#js_navDiv").height() - $("#current_pageDiv").height() - 38;
（转）jQuery EasyUI Tree - TreeGrid动态加载子节点
agnsm00804的专栏
08-30 298
有时我们已经得到充分的分层树形网格（TreeGrid）的数据。 我们还想让树形网格（TreeGrid）按层次惰性加载节点。 首先，只加载顶层节点。 然后点击节点的展开图标来加载它的子节点。 本教程展示如何创建带有惰性加载特性的树形网格（TreeGrid）。 创建树形网格（TreeGrid） <table id="test" title="Folder Browser" c...
Easyui _treegrid 动态加载子节点
weixin_30550081的博客
11-14 326
<table id="dg" class="easyui-treegrid" title="数据字典列表" data-options="idField:'id',treeField: 'text',method: 'post',striped:true,toolbar:'#tb',pagination:false,rownumbers:true,singl...
jsp easyui treegrid 如果进行异步加载
最新发布
06-03
如果要在jsp easyui treegrid中进行异步加载，需要在treegrid的配置中设置url参数，该参数指向服务器端的数据源。同时，还需要在服务器端编写相应的代码，用于处理treegrid的数据请求，并返回相应的数据。 具体实现...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值