树形菜单添加节点

创建食品树

首先，我们创建食品树，代码如下：

<div style="width:200px;height:auto;border:1px solid #ccc;">		
<ul id="tt" class="easyui-tree" url="tree_data.json">
</ul>	
</div>

注意：树组件是定义在 <ul> 标记中，树节点数据从 URL "tree_data.json" 加载。

得到父节点

然后通过点击节点选择水果节点，将添加一些其他的水果数据。执行 getSelected 方法得到处理节点：

var node = $('#tt').tree('getSelected');

getSelected 方法的返回结果是一个 javascript 对象，它有一个 id、text、target 属性。target 属性是一个 DOM 对象，引用选中节点，它的 append 方法将用于附加子节点。

附加节点

var node = $('#tt').tree('getSelected');	
if (node){		
var nodes = [{			
"id":13,			
"text":"Raspberry"		
},{			
"id":14,			
"text":"Cantaloupe"		
}];		
$('#tt').tree('append', 
{			
parent:node.target,			
data:nodes		
});	
}

树形网格惰性加载节点

有时我们已经得到充分的分层树形网格的数据。 我们还想让树形网格按层次惰性加载节点。 首先，只加载顶层节点。 然后点击节点的展开图标来加载它的子节点。

创建树形网格

<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>  

为了放置加载子节点，我们需要为每个节点重命名 'children' 属性。 如下所示，'children' 属性重命名为 'children1'。 当展开一个节点时，我们调用 'append' 方法来加载它的子节点数据。

'loadFilter' 代码

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;  	
}