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     }
原文地址:https://www.cnblogs.com/longshanshan/p/6062220.html