jquery easyui tree实现延迟

这例子是官方的demo。可帮助我们理解tree延迟加载的原理,其中涉及到树的基本遍历算法。

function myLoadFilter(data, parent){
			var state = $.data(this, ‘tree‘);
			
		    function setData(){
		    	var serno = 1;
		        var todo = [];
		        for(var i=0; i<data.length; i++){
		            todo.push(data[i]);
		        }
		        //深度优先遍历树节点
		        while(todo.length){
		            var node = todo.shift();
		            if (node.id == undefined){
		            	node.id = ‘_node_‘ + (serno++);
		            }
		            if (node.children){
		                node.state = ‘closed‘;
		               	//实现延迟加载的关键
		               	//将children先缓存再置空
		               	//第一次渲染时就渲染不到children节点了
		                node.children1 = node.children;
		                node.children = undefined;
		                todo = todo.concat(node.children1);
		            }
		        }
		        state.tdata = data;
		    }
		    function find(id){
		    	var data = state.tdata;
		    	var cc = [data];
		    	while(cc.length){
		    		var c = cc.shift();
		    		for(var i=0; i < c.length; i++) {
		    			var node = c[i];
		    			if (node.id == id){
		    				return node;
		    			} else if (node.children1){
		    				cc.push(node.children1);
		    			}
		    		}
		    	}
		    	return null;
		    }
		    
		    setData();
		    
		    var t = $(this);
		    var opts = t.tree(‘options‘);
		    //在展开节点前将children重置回清空前的属性
		    opts.onBeforeExpand = function(node){
	    		var n = find(node.id);
	    		//已经展开,返回
	    		if (n.children && n.children.length){return}
		    	if (n.children1){
		    		var filter = opts.loadFilter;
		    		opts.loadFilter = function(data){return data;};
		    		t.tree(‘append‘,{
		    			parent:node.target,
		    			data:n.children1
		    		});
		    		opts.loadFilter = filter;
		    		n.children = n.children1;
		    	}
		    };
			return data;
		}


郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。