使easyui-tree显示到指定层次

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/shizheng163/article/details/73927616

前言

 最近工程中要求将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));
            }
        })
    };