easyui tree loadFilter的使用

Posted 2020-06-17

 

---

实例化。这里增加了三个属性，可以指定idFiled，textFiled和parentField。所以这里的simpleData可以不严格转换成tree的数据格式。

$(function(){
	$(‘#tt3‘).tree({
		checkbox: true,
		url: ‘tree_data_simp.php‘,
		parentField:"pid",
		textFiled:"name",
		idFiled:"key"
	});
});

---

tree_data_simp.php 的json数据类型。是一个扁平结构数据集。

[
    {
        "key": 1,
        "name": "Folder1",
        "iconCls": "icon-ok"
    },
    {
        "key": 2,
		"pid": 1,
        "name": "File1",
        "checked": true
    },
    {
        "key": 3,
		"pid": 1,
        "name": "Folder2",
        "state": "open"
    },
    {
        "key": 4,
        "pid": 3,
        "name": "File3",
        "attributes": {
            "p1": "value1",
            "p2": "value2"
        },
        "checked": true,
        "iconCls": "icon-reload"
    },
    {
        "key": 8,
        "pid": 3,
        "name": "Async Folder"
    },
    {
        "key": 9,
        "name": "language",
        "state": "closed"
    },
    {
        "key": "j1",
        "pid": 9,
        "name": "Java"
    },
    {
        "key": "j2",
        "pid": 9,
        "name": "C#"
    }
]

---

自定义loadFilter的实现

$.fn.tree.defaults.loadFilter = function (data, parent) {
	var opt = $(this).data().tree.options;
	var idFiled,
	textFiled,
	parentField;
	if (opt.parentField) {
		idFiled = opt.idFiled || ‘id‘;
		textFiled = opt.textFiled || ‘text‘;
		parentField = opt.parentField;
		
		var i,
		l,
		treeData = [],
		tmpMap = [];
		
		for (i = 0, l = data.length; i < l; i++) {
			tmpMap[data[i][idFiled]] = data[i];
		}
		
		for (i = 0, l = data.length; i < l; i++) {
			if (tmpMap[data[i][parentField]] && data[i][idFiled] != data[i][parentField]) {
				if (!tmpMap[data[i][parentField]][‘children‘])
					tmpMap[data[i][parentField]][‘children‘] = [];
				data[i][‘text‘] = data[i][textFiled];
				tmpMap[data[i][parentField]][‘children‘].push(data[i]);
			} else {
				data[i][‘text‘] = data[i][textFiled];
				treeData.push(data[i]);
			}
		}
		return treeData;
	}
	return data;
};

 

延伸使用，对于easyui的数据节点，想要根据层级显示不同的icon

function getLevel(node, level){
        var children = node.children;
        if(level == 0)
            node.iconCls = "icon-add";
        else if( level == 1)
            node.iconCls = "icon-remove";
        else if ( level == 2) 
            node.iconCls = "icon-save";
        if(children)    
        for( var i = 0; i < children.length; i++){
                getLevel(children[i], level+1);
        }
    }

<ul class="easyui-tree" data-options="url:‘tree.do.json‘, method:‘get‘, animate:true, lines:true, checkbox:true, loadFilter:function (data, parent){
    for( var i = 0; i < data.length; i++){
            getLevel(data[i], 0);
    }
    return data;

}"></ul>