jQuery EasyUI Tree Menu - Tree Grid Lazy Load Node

jQuery EasyUI Tree Menu - Tree Grid Lazy Load Node

In this section, we'll cover the creation of the jQuery EasyUI tree grid (TreeGrid) lazy loading node.

Sometimes we've got enough data for layered tree grids. W e also want the tree grid to load nodes hierarchically, first, only the top nodes, and then click on the node's expand icon to load its child nodes.

The following example shows how to create a tree mesh with lazy loading characteristics.

Create a TreeGrid

	<table id="test" title="Folder Browser" class="easyui-treegrid" style="width:700px;height:300px" 			
               data-options=" 				
                   url: 'data/treegrid_data.json', 				
                   method: 'get', 				
                   rownumbers: true, 				
                   idField: 'id', 				
                   treeField: 'name', 				
                   loadFilter: myLoadFilter 			
               ">
		<thead>
			<tr>
				<th field="name" width="220">Name</th>
				<th field="size" width="100" align="right">Size</th>
				<th field="date" width="150">Modified Date</th>
			</tr>
		</thead>
	</table>

In order to place the loaded child nodes, we need to rename the 'children' property for each node. A s the following code shows, the 'children' property is renamed 'children1'. W hen we expand a node, we call the 'append' method to load its child node data.

'loadFilter' code

	function myLoadFilter(data,parentId){
		function setData(){
			var todo = [];
			for(var i=0; i<data.length; i++){ 				
                            todo.push(data[i]); 			
                        } 			
                        while(todo.length){ 				
                              var node = todo.shift(); 				
                              if (node.children){ 					
                                  node.state = 'closed'; 					
                                  node.children1 = node.children; 					
                                  node.children = undefined; 					
                                  todo = todo.concat(node.children1); 				
                              } 			
                        } 		
                } 		 		
                setData(data); 		
                var tg = $(this); 		
                var opts = tg.treegrid('options'); 		
                opts.onBeforeExpand = function(row){ 			
                    if (row.children1){ 				
                        tg.treegrid('append',{ 					
                           parent: row[opts.idField], 					
                           data: row.children1 				
                        }); 				
                        row.children1 = undefined; 				
                        tg.treegrid('expand', row[opts.idField]); 			
                    } 			
                    return row.children1 == undefined; 		
                }; 		
                return data; 	
         } 

Download the jQuery EasyUI instance

jeasyui-tree-treegrid5.zip