jQuery EasyUI API 中文文档 - Tree树使用介绍

2024-05-06 14:23:08

字体：大中小

来源：转载

供稿：网友

用 $.fn.tree.defaults 重写了 defaults。

依赖

draggable
droppable
用法

Tree 能在 <ul> 元素里定义，此标记可以定义为叶节点和子节点。下面是一个示例：

代码如下:
<ul id="tt">
<li>
Folder
<ul>
<li>
Sub Folder 1
<ul>
<li>
<a href="#">File 11</a>
</li>
<li>
File 12
</li>
<li>
File 13
</li>
</ul>
</li>
<li>
File 2
</li>
<li>
File 3
</li>
</ul>
</li>
<li>
File21
</li>
</ul>

Tree 也可以在一个空的 <ul> 元素里定义。
<ul id="tt"></ul>
代码如下:
$('#tt').tree({
url:'tree_data.json'
});

树数据的格式（Tree data format）
每个节点可以包含下列特性：
id：节点的 id，它对于加载远程数据很重要。
text：显示的节点文字。
state：节点状态， 'open' 或 'closed'，默认是 'open'。当设为 'closed' 时，此节点有子节点，并且将从远程站点加载它们。
checked：指示节点是否被选中。 Indicate whether the node is checked selected.
attributes：给一个节点追加的自定义属性。
children：定义了一些子节点的节点数组。
示例：
代码如下:
[{
"id":1,
"text":"Folder1",
"iconCls":"icon-save",
"children":[{
"text":"File1",
"checked":true
},{
"text":"Books",
"state":"open",
"attributes":{
"url":"/demo/book/abc",
"price":100
},
"children":[{
"text":"PhotoShop",
"checked":true
},{
"id": 8,
"text":"Sub Bookds",
"state":"closed"
}]
}]
},{
"text":"Languages",
"state":"closed",
"children":[{
"text":"Java"
},{
"text":"C#"
}]
}]

特性

名称

类型

上一篇：关于js datetime的那点事

下一篇：JS重要知识点小结