.net easyui Tree Tree

Original: https: //www.cnblogs.com/hantianwei/archive/2012/03/19/2407118.html

Tree Tree

With $ .fn.tree.defaults rewrite defaults.

rely

draggable
droppable

usage

Tree can be defined in a <ul> element where this flag can be defined as leaf nodes and sub-nodes. Here is an example:

1. <ul id="tt">

2. <li>

3. Folder

4. <ul>

5. <li>

6. Sub Folder 1

7. <ul>

8. <li>

9. <a href="#">File 11</a>

10. </li>

11. <li>

12. File 12

13. </li>

14. <li>

15. File 13

16. </li>

17. </ul>

18. </li>

19. <li>

20. File 2

21. </li>

22. <li>

23. File 3

24. </li>

25. </ul>

26. </li>

27. <li>

28. File21

29. </li>

30. </ul>

Tree can also define an empty <ul> element inside.

1. <ul id="tt"></ul>

1. $('#tt').tree({

2. url:'tree_data.json'

3. });

Tree data format ( Tree Data the format )

Each node can contain the following features:

id: node id, it is important to load remote data.
text: text display of nodes.
state: node status, 'open' or 'closed', the default is 'open'. When set to 'closed', this node has children, and load them from a remote site.
checked: indicating whether the node is selected. Indicate whether the node is checked selected.
attributes: a node to a custom attribute added.
children: defines the node array child nodes.

Example:

1. [{

2. "id":1,

3. "text":"Folder1",

4. "iconCls":"icon-save",

5. "children":[{

6. "text":"File1",

7. "checked":true

8. },{

9. "text":"Books",

10. "state":"open",

11. "attributes":{

12. "url":"/demo/book/abc",

13. "price":100

14. },

15. "children":[{

16. "text":"PhotoShop",

17. "checked":true

18. },{

19. "id": 8,

20. "text":"Sub Bookds",

21. "state":"closed"

22. }]

23. }]

24. },{

25. "text":"Languages",

26. "state":"closed",

27. "children":[{

28. "text":"Java"

29. },{

30. "text":"C#"

31. }]

32. }]

characteristic

name	Types of	Explanation	Defaults
url	string	Remote data acquisition URL.	null
method	string	Http method to obtain the data.	post
animate	boolean	When a node is expanded collapsed define whether to display animation.	false
checkbox	boolean	Define whether checkbox in front of each node.	false
cascadeCheck	boolean	Check whether the definition cascade.	true
onlyLeafCheck	boolean	Whether defined only display checkbox in front of a leaf node.	false
dnd	boolean	Defines whether to enable dragging and dropping.	false
data	array	Loaded node data.	null

event

Many events require a callback function 'node' function, which includes the following features:

id: identity bound to the value of the node.
text: text display.
checked: whether the node is selected.
attributes: bound to a custom attribute node.
target: DOM objects targets.

name	parameter	Explanation
onClick	node	Fires when the user clicks on a node, node parameter contains the following features: the above mentioned id: the above mentioned id node text: text node checked: whether the node is selected attributes: node custom property target: the target was clicked DOM object
onDblClick	node	Fires when the user double-clicks a node.
onBeforeLoad	node, param	When the request for loading data before a trigger, returns false to cancel the load operation.
onLoadSuccess	node, data	Fires when the data is loaded successfully.
onLoadError	arguments	When the trigger data loading fails, arguments as parameters jQuery.ajax the 'error' function. .
onBeforeExpand	node	Expand node before the trigger, return false to cancel the action unfold.
onExpand	node	Triggered when the node is expanded.
onBeforeCollapse	node	Node before folding trigger, return false to cancel the folding action.
onCollapse	node	When a node is triggered collapsed.
onCheck	node, checked	Fires when the user clicks on the checkbox.
onBeforeSelect	node	Node is selected before the trigger, return false to cancel the selected action.
onSelect	node	Fires when a node is selected.
OnContextMenu	e, node	Fires when right-clicking a node.
onDrop	target, source, point	Fires when a node is dragged cast. target: DOM objects, drag and drop the target node. source: the source node. point: represents drag operation, the value may be: 'append', 'top' or 'bottom'.
onBeforeEdit	node	Edit node triggers ago.
onAfterEdit	node	Edit node triggers later.
onCancelEdit	node	Fires when cancel action editing.

method

name	parameter	Explanation
options	none	Return the options tree.
loadData	data	Loading data tree.
getNode	target	Gets node object specified.
getData	target	Acquiring data of the specified node, including its child nodes.
reload	target	Reload the data tree.
getRoot	none	Gets the root node, return node object.
getRoots	none	Get the root node, return node array.
getParent	target	Get parent node, target node parameter refers DOM object.
getChildren	target	Getting child nodes, target nodes DOM object parameter refers.
getChecked	none	Get all selected nodes.
getSelected	none	Get the selected node and return it, if the node is not selected, it returns null.
isLeaf	target	The definition of the specified node to the leaf node, target parameter indicates the DOM object node.
find	id	Find the specified node and returns this node object.
select	target	Select a node, target parameter represents the DOM object nodes.
check	target	The specified node to check.
uncheck	target	The specified node is not set as checked.
collapse	target	Folding a node, target parameter indicates the DOM object node.
expand	target	Expand a node, target parameter represents the DOM object nodes.
collapseAll	target	All nodes are folded.
expandAll	target	Expand all nodes are.
expandTo	target	Expand specified from the root node.
append	param	追加一些子节点们到一个父节点， param 参数有两个特性： parent：DOM 对象，追加到的父节点，如果没有分配，则追加为根节点。 data：数组，节点们的数据。
toggle	target	切换节点的展开/折叠状态， target 参数表示节点的 DOM 对象。
insert	param	在指定节点的前边或后边插入一个节点， param 参数包含下列特性： before：DOM 对象，前边插入的节点。 after：DOM 对象，后边插入的节点。 data：对象，节点数据。
remove	target	移除一个节点和它的子节点们， target 参数表示节点的 DOM 对象。
pop	target	弹出一个节点和它的子节点们，此方法和 remove 一样，但是返回了移除的节点数据。
update	param	跟心指定的节点， param 参数有下列特性： target（DOM 对象，被更新的节点）、id、text、iconCls、checked、等等。
enableDnd	none	启用拖放功能。
disableDnd	none	禁用拖放功能。
beginEdit	nodeEl	开始编辑节点。
endEdit	nodeEl	结束编辑节点。
cancelEdit	nodeEl	取消编辑节点。

.net easyui Tree Tree

Tree Tree

Guess you like