Web Demo Mobile Demo Angular Demo Vue Demo React Demo

Lazy Load Tree Nodes

Get full hierarchical tree data but lazy load nodes level by level.

    源代码
    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8">
    	<title>Lazy Load Tree Nodes - jQuery EasyUI Demo</title>
    	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    	<link rel="stylesheet" type="text/css" href="../demo.css">
    	<script type="text/javascript" src="../../jquery.min.js"></script>
    	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
    </head>
    <body>
    	<h2>Lazy Load Tree Nodes</h2>
    	<p>Get full hierarchical tree data but lazy load nodes level by level.</p>
    	<div style="margin:20px 0;"></div>
    	<div class="easyui-panel" style="padding:5px">
    		<ul class="easyui-tree" data-options="url:'tree_data1.json',method:'get',loadFilter:myLoadFilter"></ul>
    	</div>
    	<script>
    		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';
    		                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');
    		    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;
    		}
    	</script>
    </body>
    </html>