zoukankan      html  css  js  c++  java
  • Easyui _treegrid 动态加载子节点

    <table id="dg" class="easyui-treegrid" title="数据字典列表"
                   data-options="idField:'id',treeField: 'text',method: 'post',striped:true,toolbar:'#tb',pagination:false,rownumbers:true,singleSelect:true,url:'@Url.Action("LoadData","SystemSet")',onBeforeExpand:onbeforeExpand">
                <thead>
                    <tr>
                        <th data-options="field:'text',320">名称</th>
                        <th data-options="field:'id',220">编号</th>
                        <th data-options="field:'state',220">状态</th>
                        <th data-options="field:'value',220">值</th>
                        <th data-options="field:'操作',120,align:'center'" formatter="formatCount">操作</th>
                    </tr>
                </thead>
            </table>
        </div>
    
    1   function onbeforeExpand(row) {
    2             //动态设置展开查询的url
    3             var url = '/SystemSet/LoadData?id=' + row.id;
    4             $("#dg").treegrid("options").url = url;
    5             return true;
    6         }

    第二种:得到充分数据,按层次惰性加载节点,首先只加载顶层节点

    <table id="dg" class="easyui-treegrid" title="数据字典列表"
                   data-options="idField:'id',treeField: 'text',method: 'post',striped:true,toolbar:'#tb',pagination:false,rownumbers:true,singleSelect:true,url:'@Url.Action("LoadData","SystemSet")',loadFilter: myLoadFilter">
                <thead>
                    <tr>
                        <th data-options="field:'text',320">名称</th>
                        <th data-options="field:'id',220">编号</th>
                        <th data-options="field:'state',220">状态</th>
                        <th data-options="field:'value',220">值</th>
                        <th data-options="field:'操作',120,align:'center'" formatter="formatCount">操作</th>
                    </tr>
                </thead>
            </table>
        </div>

    为了放置加载子节点,我们需要为每个节点重命名 'children' 属性。 正如下面的代码所示,'children' 属性重命名为 'children1'。 当展开一个节点时,我们调用 'append' 方法来加载它的子节点数据。

    'loadFilter' 代码

     1 function myLoadFilter(data, parentId) {
     2         function setData() {
     3             var todo = [];
     4             for (var i = 0; i < data.length; i++) {
     5                todo.push(data[i]);
     6            }
     7           while (todo.length) {
     8                var node = todo.shift();
     9                 if (node.children) {
    10                     node.state = 'closed';
    11                     node.children1 = node.children;
    12                     node.children = undefined;
    13                    todo = todo.concat(node.children1);
    14                }
    15            }
    16        }
    17        setData(data);
    18         var tg = $(this);
    19       var opts = tg.treegrid('options');
    20      opts.onBeforeExpand = function (row) {
    21            if (row.children1) {
    22               tg.treegrid('append', {
    23                    parent: row[opts.idField],
    24                    data: row.children1
    25               });
    26               row.children1 = undefined;
    27               tg.treegrid('expand', row[opts.idField]);
    28          }
    29            return row.children1 == undefined;
    30       };
    31       return data;
    32     }
  • 相关阅读:
    python 文件读写操作(转抄)
    kubernetes之kubeadmin安装部署
    bash之字符串处理(核心重点)
    blocking and nonblocking
    文件格式转换
    解压.asar
    Cocos Creator Editor 编辑器扩展记录
    CocosCreator 警告:Please set node's active instead of rigidbody's enabled
    Unity 垂直翻转位图颜色数据
    CocosCreator 动态设置属性在Properties面板显示/隐藏
  • 原文地址:https://www.cnblogs.com/longshanshan/p/6062220.html
Copyright © 2011-2022 走看看