首页 > 程序开发 > web前端 > JavaScript >

easyUI 附加tree节点到tree

2012-08-13

@author YHC这个教程向你展示如何附加节点到tree,我们将创建一个食品tree包含水果和蔬菜节点,然后添加一些其他水果到已存在的水果节点.创建 foods(食品) tree首先,我们创建食品树,代码就像这样.[html] view ...

@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 = $(&#39;#tt&#39;).tree(&#39;getSelected&#39;);

var node = $(&#39;#tt&#39;).tree(&#39;getSelected&#39;); getSelected 方法的返回结果是一个javascript对象它有一个id,text和target 属性,target 属性是一个DOM对象,引用选中节点,它的append 方法将使用附加子节点.


附加节点
[javascript]
var node = $(&#39;#tt&#39;).tree(&#39;getSelected&#39;);
if (node){
var nodes = [{
"id":13,
"text":"Raspberry"
},{
"id":14,
"text":"Cantaloupe"
}];
$(&#39;#tt&#39;).tree(&#39;append&#39;, {
parent:node.target,
data:nodes
});
}

var node = $(&#39;#tt&#39;).tree(&#39;getSelected&#39;);
if (node){
var nodes = [{
"id":13,
"text":"Raspberry"
},{
"id":14,
"text":"Cantaloupe"
}];
$(&#39;#tt&#39;).tree(&#39;append&#39;, {
parent:node.target,
data:nodes
});
} 当添加一些fruit(食品),你将看见:

\


正如你所看见的,使用easyui的tree 插件去附加节点不是那么的难.

作者:yhc13429826359



相关文章
最新文章
热点推荐