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;
    }