使easyui-tree顯示到指定層次
阿新 • • 發佈:2019-01-02
前言
最近工程中要求將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日更新
解決方案
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));
}
})
};