EasyUItree.docx

EasyUItree.docx

《EasyUItree.docx》由会员分享，可在线阅读，更多相关《EasyUItree.docx（22页珍藏版）》请在冰点文库上搜索。

EasyUItree

树

重写默认方法$.fn.tree.defaults.

这棵树显示分层数据在一个树结构在一个web页面。

它提供了用户扩展、压缩、拖拽、编辑和异步加载的功能。

依赖

∙draggable

∙droppable

应用实例

树可以研究在

元素。

标记可以定义了叶和儿童。

节点将

• 元素在ul列表。

  以下显示的元素,这将用来制作树节点的嵌套在ul元素。

  [html]预览复制print?

  1.

  2.  

  3.

•   

  4.  

  5.Folder  

  6.  

  7.

    

  8.  

  9.

  •   

    10.  

    11.Sub Folder 1  

    12.  

    13.

      

    14.  

    15.

    •   

      16.  

      17.File 11  

      18.  

      19.

      

    20.  

    21.

    •   

      22.  

      23.File 12  

      24.  

      25.

      

    26.  

    27.

    •   

      28.  

      29.File 13  

      30.  

      31.

      

    32.  

    33.

      

    34.  

    35.

    

  36.  

  37.

  •   

    38.  

    39.File 2  

    40.  

    41.

    

  42.  

  43.

  •   

    44.  

    45.File 3  

    46.  

    47.

    

  48.  

  49.

    

  50.  

  51.

  

52.  

53.

•   

  54.  

  55.File21  

  56.  

  57.

  

58.  

59.

树还可以被定义在一个空的

元素和负载数据使用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