EasyUItree.docx
《EasyUItree.docx》由会员分享，可在线阅读，更多相关《EasyUItree.docx（22页珍藏版）》请在冰点文库上搜索。
EasyUItree
树
重写默认方法$.fn.tree.defaults.
这棵树显示分层数据在一个树结构在一个web页面。
它提供了用户扩展、压缩、拖拽、编辑和异步加载的功能。
依赖
∙draggable
∙droppable
应用实例
树可以研究在
Folder
File21
树还可以被定义在一个空的
元素和负载数据使用javascript。[js]预览复制print?
1.
2.
3.$（'#tt'）.tree（{
4.url:
'tree_data.json'
5.}）;
$（'#tt'）.tree（{
url:
'tree_data.json'
}）;
使用loadFilter处理json数据从ASP.NET的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.}）;
$（'#tt'）.tree（{
url:
...,
loadFilter:
function（data）{
if（data.d）{
returndata.d;
}else{
returndata;
}
}
}）;
树数据的格式
每个节点可以包含以下属性:
∙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.}]
[{
"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":
"SubBookds",
"state":
"closed"
}]
}]
},{
"text":
"Languages",
"state":
"closed",
"children":
[{
"text":
"Java"
},{
"text":
"C#"
}]
}]
树的异步
这棵树支持内置的异步加载模式,用户创建一个空的树,然后指定一个服务器端动态返回JSON数据用来填充树与异步和需求。
这里是一个例子:
[html]预览复制print?
1.'get_data.php'">
'get_data.php'">
这棵树是装有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.}]
[{
"id":
1,
"text":
"Node1",
"state":
"closed",
"children":
[{
"id":
11,
"text":
"Node11"
},{
"id":
12,
"text":
"Node12"
}]
},{
"id":
2,
"text":
"Node2",
"state":
"closed"
}]
节点1和节点2是封闭的,当扩展节点1,将直接显示它的子节点。
当扩展节点2,它将发送值
（2）服务器获取子节点。
这tutorialCreate异步Treeshows如何编写服务器代码返回树数据需求。
属性
名称
类型
说明
默认
url
string
一个URL检索远程数据。
null
method
string
http方法检索数据。
post
animate
boolean
定义是否显示动画效果当节点展开或折叠。
false
checkbox
boolean
定义是否显示复选框每个节点之前。
false
cascadeCheck
boolean
定义是否级联检查。
true
onlyLeafCheck
boolean
定义是否显示复选框只有在叶节点。
false
lines
boolean
定义是否显示树线。
false
dnd
boolean
定义是否启用拖拽。
false
data
array
节点数据加载。
$（'#tt'）.tree（{
data:
[{
text:
'Item1',
state:
'closed',
children:
[{
text:
'Item11'
},{
text:
'Item12'
}]
},{
text:
'Item2'
}]
}）;
null
loader
function（param,success,error）
定义了如何加载数据从远程服务器。
可以放弃这次行动返回false。
这个函数接受以下参数:
param:
参数对象传递给远程服务器。
success（data）:
这个回调函数会调用这些当检索数据成功。
error（）:
这个回调函数会调用这些当未能检索数据。
jsonloader
loadFilter
function（data,parent）
返回过滤数据显示。
返回的数据是在标准的树格式。
这个函数接受以下参数:
data:
原始数据加载。
parent:
DOM对象,显示父节点。
事件
许多事件回调函数可以把“节点”参数,其中包含以下属性:
∙id:
一个标识值绑定到该节点。
∙text:
文本显示。
∙iconCls:
css类来显示图标。
∙checked:
检查是否该节点。
∙state:
节点状态,“open”或“closed”。
∙attributes:
自定义属性绑定到该节点。
∙target:
目标DOM对象。
名称
参数
说明
onClick
node
当用户点击一个节点。
代码示例:
$（'#tt'）.tree（{
onClick:
function（node）{
alert（node.text）;//alertnodetextpropertywhenclicked
}
}）;
onDblClick
node
当用户双击一个节点。
onBeforeLoad
node,param
前一个请求加载数据,返回false取消这种加载作用。
onLoadSuccess
node,data
当数据加载成功时触发。
onLoadError
arguments
当数据加载失败,参数的参数是一样的“错误”功能的JQueryajax。
onBeforeExpand
node
节点扩展之前,返回false取消这个扩大行动。
onExpand
node
当节点展开时触发事件。
onBeforeCollapse
node
在节点收缩,返回false取消这个收缩行为。
onCollapse
node
当节点收缩时触发事件。
onBeforeCheck
node,checked
在用户单击复选框,返回false取消此检查行动。
这个事件可以从版本1.3.1。
onCheck
node,checked
当用户单击复选框。
onBeforeSelect
node
在节点被选中时,返回false取消这个选择行动。
onSelect
node
当节点被选中。
onContextMenu
e,node
当节点是正确的点击。
代码示例:
//rightclicknodeandthendisplaythecontextmenu
$（'#tt'）.tree（{
onContextMenu:
function（e,node）{
e.preventDefault（）;//selectthenode
$（'#tt'）.tree（'select',node.target）;//displaycontextmenu
$（'#mm'）.menu（'show',{
left:
e.pageX,
top:
e.pageY
}）;
}
}）;
//thecontextmenuisdefinedasbelow:
'icon-add'">Append
升级会员 