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',width:320">名称</th>
                    <th data-options="field:'id',width:220">编号</th>
                    <th data-options="field:'state',width:220">状态</th>
                    <th data-options="field:'value',width:220">值</th>
                    <th data-options="field:'操作',width:120,align:'center'" formatter="formatCount">操作</th>
                </tr>
            </thead>
        </table>
    </div>

 

  function onbeforeExpand(row) {
            //动态设置展开查询的url
            var url = '/SystemSet/LoadData?id=' + row.id;
            $("#dg").treegrid("options").url = url;
            return true;
        }

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

<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',width:320">名称</th>
                    <th data-options="field:'id',width:220">编号</th>
                    <th data-options="field:'state',width:220">状态</th>
                    <th data-options="field:'value',width:220">值</th>
                    <th data-options="field:'操作',width:120,align:'center'" formatter="formatCount">操作</th>
                </tr>
            </thead>
        </table>
    </div>

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

'loadFilter' 代码

function myLoadFilter(data, parentId) {
        function setData() {
            var todo = [];
            for (var i = 0; i < data.length; i++) {
               todo.push(data[i]);
           }
          while (todo.length) {
               var node = todo.shift();
                if (node.children) {
                    node.state = 'closed';
                    node.children1 = node.children;
                    node.children = undefined;
                   todo = todo.concat(node.children1);
               }
           }
       }
       setData(data);
        var tg = $(this);
      var opts = tg.treegrid('options');
     opts.onBeforeExpand = function (row) {
           if (row.children1) {
              tg.treegrid('append', {
                   parent: row[opts.idField],
                   data: row.children1
              });
              row.children1 = undefined;
              tg.treegrid('expand', row[opts.idField]);
         }
           return row.children1 == undefined;
      };
      return data;
    }