easyUI 附加tree节点到tree
@author YHC
这个教程向你展示如何附加节点到tree,我们将创建一个食品tree包含水果和蔬菜节点,然后添加一些其他水果到已存在的水果节点.
创建 foods(食品) tree
首先,我们创建食品树,代码就像这样.
[html] view plaincopyprint?<div style="width:200px;height:auto;border:1px solid #ccc;">
<ul id="tt" class="easyui-tree" url="tree_data.json"></ul>
</div>
<div style="width:200px;height:auto;border:1px solid #ccc;">
<ul id="tt" class="easyui-tree" url="tree_data.json"></ul>
</div> 注意:tree组件 是定义在<ul>标记,树节点数据从URL"tree_data.json"加载.
得到父节点
然后我们通过点击节点选择fruit(食品节点),我们将添加一些其他的食品(fruit)数据,执行getSelected 方法得到处理节点.
[javascript]
var node = $('#tt').tree('getSelected');
var node = $('#tt').tree('getSelected'); getSelected 方法的返回结果是一个javascript对象它有一个id,text和target 属性,target 属性是一个DOM对象,引用选中节点,它的append 方法将使用附加子节点.
附加节点
[javascript]
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
});
}
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
});
} 当添加一些fruit(食品),你将看见:
正如你所看见的,使用easyui的tree 插件去附加节点不是那么的难.
作者：yhc13429826359
补充：web前端 , JavaScript ,
