EasyUI-tree
树
重写默认方法$.fn.tree.defaults.
这棵树显示分层数据在一个树结构在一个web页面。它提供了用户扩展、压缩、拖拽、编辑和异步加载的功能。
依赖
?draggable
?droppable
应用实例
树可以研究在< ul >元素。标记可以定义了叶和儿童。节点将
[html]预览复制print?
1.
- EasyUI-tree">
4.
5.Folder
6.
7.
10.
11.Sub Folder 1
12.
13.
16.
17.File 11
18.
19.
22.
23.File 12
25.
28.
29.File 13
30.
31.
14.
15.
20.
21.
26.
27.
32.
33.
34.
35.
38.
39.File 2
40.
41.
44.
45.File 3
46.
47.
8.
9.
36.
37.
42.
43.
48.
49.
50.
51.
54.
55.File21
56.
57.
2.
3.
52.
53.
58.
59.
树还可以被定义在一个空的< ul >元素和负载数据使用javascript。[js]预览复制print?
1.
2.
3.$('#tt').tree({
4.url:'tree_data.json'
使用loadFilter处理json数据从https://www.360docs.net/doc/bf9573289.html,的web服务。
[js]预览复制print?
1.$('#tt').tree({
2.url: ...,
3.
4.loadFilter: function(data){
5.if (data.d){
6.return data.d;
7.} else {
8.return data;
9.}
10.}
11.});
树数据的格式
每个节点可以包含以下属性:
?id: 节点id,它是重要的来加载远程数据
?text: 节点文本来显示
?state: 节点状态,“open”或“closed”,默认是“open”。当设置为“closed”,节点有子节点,并将负载从远程站点
?checked: 显示选定的节点是否选中。
?attributes: 自定义属性可以被添加到一个节点
?children: 一个数组节点定义了一些子节点
一些例子:
[js]预览复制print?
1.[{
2."id":1,
3.
4."text":"Folder1",
5.
6."iconCls":"icon-save",
7.
8."children":[{
9."text":"File1",
10.
11."checked":true
12.},{
13."text":"Books",
14.
15."state":"open",
16.
17."attributes":{
18."url":"/demo/book/abc",
19.
20."price":100
21.},
22.
23."children":[{
24."text":"PhotoShop",
25.
26."checked":true
27.},{
28."id": 8,
29.
30."text":"Sub Bookds",
31.
32."state":"closed"
33.}]
34.}]
35.},{
36."text":"Languages",
37.
38."state":"closed",
39.
40."children":[{
41."text":"Java"
42.
43.},{
44.
45."text":"C#"
46.
47.}]
48.}]
树的异步
这棵树支持内置的异步加载模式,用户创建一个空的树,然后指定一个服务器端动态返回JSON数据用来填充树与异步和需求。这里是一个例子:
[html]预览复制print?
1.
这棵树是装有URL”get_data.php’。子节点加载依赖父节点状态。当扩展一个封闭的节点,如果节点没有子节点加载,它将发送节点id的值作为http请求参数命名为“id”到服务器上面定义通过URL检索的子节点。
看着从服务器返回的数据:
[js]预览复制print?
1.[{
2."id": 1,
3.
4."text": "Node 1",
5.
6."state": "closed",
7.
8."children": [{
9."id": 11,
10.
11."text": "Node 11"
12.},{
13."id": 12,
14.
15."text": "Node 12"
16.}]
17.},{
18."id": 2,
19.
20."text": "Node 2",
21.
22."state": "closed"
23.}]
节点1和节点2是封闭的,当扩展节点1,将直接显示它的子节点。当扩展节点2,它将发送值(2)服务器获取子节点。
这tutorialCreate异步Treeshows如何编写服务器代码返回树数据需求。
属性
事件
许多事件回调函数可以把“节点”参数,其中包含以下属性:
?id: 一个标识值绑定到该节点。
?text: 文本显示。
?iconCls: css类来显示图标。
?checked: 检查是否该节点。
?state: 节点状态,“open”或“closed”。
?attributes: 自定义属性绑定到该节点。
?target: 目标DOM对象。
方法