easyUI Tree树动态刷新子节点

系统管理员 2023-06-21 03:52 9阅读 0赞

$("#tree").tree({
        url: 'xxx', // 默认是post请求
        checkbox: false,
        animate: true,
        lines: true,
        loadFilter: function(rows){ 
            // 返回要显示的过滤数据。返回数据时以标准树格式返回的。也就是说把一个数组转换成树的json数组                                            格式返回
        	return convert(rows);
        },
        onSelect: function (node) {
            $('#tree').tree("reload", node.target);
        }
    });
    
        function convert(rows){
        	function exists(rows, parentId){
        		for(var i=0; i<rows.length; i++){
        			if (rows[i].id == parentId) return true;
        		}
        		return false;
        	}
        	
        	var nodes = [];
        	for(var i=0; i<rows.length; i++){
        		var row = rows[i];
        		if (!exists(rows, row.parentId)){
        			nodes.push({
        				id:row.id,
        				text:row.terminalName,
        				iconCls:row.icon,
        				parentId:row.parentId,
        				parentName:row.parentName,
        				state:"closed",
                        xxx:row.xxx,  // 字段随你加 
        			});
        		}
        	}
        	
        	var toDo = [];
        	for(var i=0; i<nodes.length; i++){
        		toDo.push(nodes[i]);
        	}
        	while(toDo.length){
        		var node = toDo.shift();
        		for(var i=0; i<rows.length; i++){
        			var row = rows[i];
        			if (row.parentId == node.id){
        				var child = {
                                id:row.id,
        				        text:row.terminalName,
        				        iconCls:row.icon,
        				        parentId:row.parentId,
        				        parentName:row.parentName,
        				        state:"closed",
                                xxx:row.xxx,  // 字段随你加 
        				};
        				if (node.children){
        					node.children.push(child);
        				} else {
        					node.children = [child];
        				}
        				toDo.push(child);
        			}
        		}
        	}
        	return nodes;
        }

id：绑定到节点的标识值。

text：要显示的文本。

iconCls：用来显示图标的 css class。

checked：节点是否被选中。

state：节点状态，'open' 或 'closed'。

attributes：绑定到节点的自定义属性。

标准树数据格式如下所示,Node 1和Node 2结点默认关闭,点击Node 1直接展开显示children的结点,点击Node 2时,如果是异步加载,因为没有children,所以会把结点id值作为参数传递到后台,查询结果依旧以如下格式返回,或者返回\[ \]

[{
        "id": 1,
        "text": "Node 1",
        "state": "closed",
        "children": [{
    		"id": 11,
    		"text": "Node 11"
        },{
    		"id": 12,
    		"text": "Node 12"
        }]
    },{
        "id": 2,
        "text": "Node 2",
        "state": "closed"
    }]