前言

 最近工程中要求將easyui-tree的樹形結構顯示到指定層次，再網上搜索了一下發現沒有現成的程式碼，稍微做了一下研究，現在貼出來供大家參考。

要求

返回的樹形結構中有一個屬性表示當前節點的層次，我這裡是 type

程式碼

var expendFunction = function (treeNodes) {
        //var treeNodes = $('#tt').tree('getRoots');
        $(treeNodes).each(function () {
            var data = $('#tt').tree('getData', this.target);
            if (data.type < 2) {
                $('#tt').tree('expand', this.target);
                expendFunction($('#tt').tree('getChildren', this.target));
            }
        })
    };
 

tt是樹形結構的Id. 呼叫：

$('#tt').tree({
    url: url,
    queryParams: filter,
    onLoadSuccess: function (node, data) {
        if (data) {
            $('#tt').tree('collapseAll');
            var Roots = $('#tt').tree('getRoots');
            expendFunction(Roots);
        } 
    }
});

2017年7月12日更新

近日裡調程式發現需要展開的節點只有十多個，但是Js程式碼卡頓確有2秒以後，除錯後發現easyui-tree 預設的getChildren方法得到的子節點非下級節點，而是包括是子孫級節點,子孫級節點近萬條，所以導致等待時間太長。

解決方案

   easyui-tree沒有提供只得到下級節點的方法，所以參用了增加擴充套件方法

//擴充套件Easyui-tree 獲取一級子節點
$.extend($.fn.tree.methods, {
    getLeafChildren: function (jq, params) {
        var nodes = [];
        $(params).next().children().children("div.tree-node").each(function () {
            nodes.push($(jq[0]).tree('getNode', this));
        });
        return nodes;
    }
});
 

注：此方法來自網際網路。

程式碼

var expendFunction = function (treeNodes) {
        //var treeNodes = $('#tt').tree('getRoots');
        $(treeNodes).each(function () {
            var data = $('#tt').tree('getData', this.target);
            if (data.type < 2) {
                $('#tt').tree('expand', this.target);
                expendFunction($('#tt').tree('getLeafChildren', this.target));
            }
        })
    };