前言

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

转载地址：http://qehji.baihongyu.com/

你可能感兴趣的文章