一个树形菜单(Tree)可以从标记创建。easyui 树形菜单(Tree)也可以定义在
- 元素中。无序列表的
- 元素提供一个基础的树(Tree)结构。每一个
- 元素将产生一个树节点,子
- 元素将产生一个父树节点。
Html代码:
- 元素将产生一个父树节点。
<ul class="easyui-tree">
<li>
<span>Folder</span>
<ul>
<li>
<span>Sub Folder 1</span>
<ul>
<li><span>File 11</span></li>
<li><span>File 12</span></li>
<li><span>File 13</span></li>
</ul>
</li>
<li><span>File 2</span></li>
<li><span>File 3</span></li>
</ul>
</li>
<li><span>File21</span></li>
</ul>
2、添加节点、创建食品树
Html代码:
<div style="width:200px;height:auto;border:1px solid #ccc;">
<ul id="tt" class="easyui-tree" url="tree_data.json"></ul>
</div>
JS代码
然后我们通过点击父节点选择子节点,我们将添加一些其他的节点数据。执行 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"
}];
效果图