Easyui Tree JQuery

Tree Data Conversion

All nodes contain the following properties:

• ID: Node ID, which is important to load remote server data which is important to load remotely data
• Text: the displayed node literal
• State: Node status, ' Open ' or ' closed ', default is ' open '. When set to ' closed ', all child nodes of the node will be loaded from the remote server site
• Checked: Indicates whether the check node is selected.
• Attributes: Custom properties that can be added to a node
• Children: A node array that defines some child nodes

Some examples:

2. [{
4. "id": 1,
6. "Text": "Folder1",
8. "Iconcls": "Icon-save",
10. "Children": [{
12. "Text": "File1",
14. "Checked": True
16. },{
18. "Text": "Books",
20. "State": "Open",
22. "Attributes": {
24. "url": "/demo/book/abc",
26. "Price": 100
28. },
30. "Children": [{
32. "Text": "PhotoShop",
34. "Checked": True
36. },{
38. "id": 8,
40. "Text": "Sub bookds",
42. "State": "Closed"
44. }]
46. }]
48. },{
50. "Text": "Languages",
52. "State": "Closed",
54. "Children": [{
56. "Text": "Java"
58. },{
60. "Text": "C #"
62. }]
64. }]

Asynchronous Load Tree

The tree supports the built-in asynchronous load pattern, the user creates an empty tree, and then defines a remote server site that returns JSON data used to populate the tree to asynchronously meet the asynchronous load requirements. For example:

1. <ul class= "easyui-tree" data-options= "url: ' get_data.php '" ></ul>

The tree's load is via the URL ' get_data.php ' site. The loading of child nodes depends on the state of the parent node. When you expand a shutdown node, if the node does not have child nodes loaded, the node ID value is sent as an HTTP parameter, and the parameter is named ' ID ' to the remote server, Defined by the URL above. Retrieving child node data
Look at the data returned from the server.

2. [{
4. "id": 1,
6. "Text": "Node 1",
8. "State": "Closed",
10. "Children": [{
12. "id": 11,
14. "Text": "Node 11"
16. },{
18. "id": 12,
20. "Text": "Node 12"
22. }]
24. },{
26. "id": 2,
28. "Text": "Node 2",
30. "State": "Closed"
32. }]

Both node 1 and Node 2 are closed states and can display their child nodes directly, and when you expand Node 2 o'clock, send a value of 2 to the remote server to retrieve the child nodes
This tutorial creates an asynchronous tree Click me!!!, shows how to write server-side code to return tree data on demand.

First, the method

Name	Type	Description	Default
Url	String	A URL that retrieves data from a remote server.	Null
Method	String	The HTTP method type that retrieves the data.	Post
Animate	Boolean	Defines whether the effect is displayed when the node is expanded/collapsed.	False
CheckBox	Boolean	Defines whether the checkbox is displayed before all nodes.	False
Cascadecheck	Boolean	Defines whether to cascade the selection.	True
Onlyleafcheck	Boolean	Defines whether a checkbox is only displayed on the leaf node.	False
Lines	Boolean	Defines whether the tree line is displayed.	False
Dnd	Boolean	Defines whether drag and drop are enabled.	False
Data	Array	This node data will be loaded. $ (' #tt '). Tree ({data: [{text: ' Item1 ', State: ' Closed ', children: [{text: ' Item11 '},{text: ' Item12 '}]},{text: ' Item2 '}]} );	Null
Loader	function (Param,success,error)	Defines how data is loaded from a remote server. Returning false terminates this action. This function provides the following parameters: PARAM: This Parameter object is routed to the remote server. Success (data): The callback function after retrieving the data successfully. Error (): callback function called when retrieving data for an exception.	JSON loader
Loadfilter	function (data,parent)	Returns the displayed filtered data. The returned data is the standard tree format. This function provides the following parameters: Data: The original is loaded. A Parent:dom object that specifies the parent node.

II. Events

Many callback functions provide the ' node ' parameter, which contains the following properties:

• ID: The identity value that is bound to the node.
• Text: Displays the literal.
• ICONCLS: Displays the icon's CSS style.
• Checked: Whether the node is selected.
• State: Node status, ' Open ' or ' closed '.
• Attributes: A custom property bound to a node.
• Target: Destination DOM object.

Name	Parameters	Description
OnClick	Node	Triggered when the user clicks on a node. Example code: $ (' #tt '). Tree ({onclick:function (node) {alert (node.text); Alert node Text property when Clicked}});
OnDblClick	Node	Triggered when the user double-clicks a node.
Onbeforeload	node, param	When a request loads data in front of the trigger, returns false to cancel the load action.
Onloadsuccess	node, data	Triggered when the data is loaded successfully.
Onloaderror	Arguments	When the data load fails to trigger, the arguments parameter is the same as Ajax JQuery's ' error '.
Onbeforeexpand	Node	Triggers before the node expands, returns False to cancel the expand action.
Onexpand	Node	Triggered when the node is expanded.
Onbeforecollapse	Node	Triggers before the node collapses, and returns false to cancel the collapse action.
Oncollapse	Node	Triggered when a node is collapsed.
OnCheck	node, checked	Triggered when the user clicks a checkbox.
Onbeforeselect	Node	The node is selected before triggering and returns false to deselect the action.
OnSelect	Node	Triggered when the node is selected.
OnContextMenu	E, node	When the right click on the node is triggered, the code example: Right-click on the node and display the context menu $ (' #tt '). Tree ({oncontextmenu:function (E, node) {e.preventdefault ();//Select node $ (' #tt '). Tree (' select '). , node.target);//Display context menu $ (' #mm '). Menu (' show ', {left:e.pagex,top:e.pagey});}); /context menu is defined as follows: <div id= "mm" class= "Easyui-menu" style= "width:120px;" ><div onclick= "append ()" data-options= "Iconcls: ' Icon-add '" >append</div><div onclick= "remove ()" data-options= "Iconcls: ' Icon-remove '" >Remove</div></div>
OnDrop	Target, source, point	Triggered when the node is placed. The Target:dom object, which is the target to be placed. Source: Origin node. Point: Indicates the drop operation, the available values are: ' Append ', ' top ' or ' bottom '.
Onbeforeedit	Node	Fires before the node is edited.
Onafteredit	Node	Fires after the node is edited.
Oncanceledit	Node	Triggers when the edit action is canceled.

Third, the method

Name	Parameter	Description
Options	None	Return to the options of tree.
LoadData	Data	Load the tree data.
GetNode	Target	Gets the specific node object.
GetData	Target	Gets the specific node data that contains its child nodes.
Reload	Target	Reload the tree data.
Getroot	None	Get root node, return node object
Getroots	None	Gets the root node and returns an array of nodes.
GetParent	Target	Gets the parent node, the target parameter, indicating the node DOM object.
GetChildren	Target	Gets the child node, and the target parameter indicates the node DOM object.
GetChecked	None	Get all selected nodes.
GetSelected	None	Gets the selection node and returns it if no node is selected will return null.
IsLeaf	Target	Resolves whether a particular node is a leaf node, and the target parameter indicates the node DOM object.
Find	Id	Find specific nodes and return node objects, code example: Find a node and then return it var node = $ (' #tt '). Tree (' Find ', ' n '), $ (' #tt '). Tree (' select ', Node.target);
Select	Target	Select a node and the target parameter indicates the node DOM object.
Check	Target	Sets the specific node selected.
Uncheck	Target	Sets a specific node to uncheck.
Collapse	Target	Collapses a node, the target parameter indicates the node DOM object.
Expand	Target	Expands a node, the target parameter indicates the node DOM object, and when the state of the node is closed and no child nodes, the node ID value (named ' ID ') is sent to the server to request the child node data.
CollapseAll	Target	Collapses all nodes.
ExpandAll	Target	Expand all nodes.
Expandto	Target	Expands from the root node to the specified node.
Append	Param	Attach some child nodes to the parent node. The param parameter has two properties: The Parent:dom object, added to the parent node, is appended to the root node if there is no assignment. Data:array, the nodes data. Code Example: Add some nodes to the selected node var selected = $ (' #tt '). Tree (' getselected '), $ (' #tt '). Tree (' append ', {parent:selected.target,data: [{ Id:23,text: ' Node23 '},{text: ' Node24 ', State: ' Closed ', children: [{text: ' node241 '},{text: ' node242 '}]}]);
Toggle	Target	Toggles the state of the expanded/collapsed node, and the target parameter indicates the node DOM object.
Insert	Param	Insert a node before or after a specific node. ' The param ' parameter contains the following properties: A Before:dom object that is inserted before the node. The After:dom object, after which the node is inserted. Data:object, node data. The following code shows how to insert a new node before selecting a node: var node = $ (' #tt '). Tree (' getselected '), if (node) {$ (' #tt '). Tree (' Insert ', {before:node.target,data: {id:21,text: ') Node text '}});
Remove	Target	Removes a node and its child nodes, and the target parameter indicates the node DOM object.
Pop	Target	Removes a node and its child nodes, which is similar to remove, but it returns the node data that was removed.
Update	Param	Updates a specific node. The ' param ' parameter contains the following properties: Target (DOM object, updated node), id,text,iconcls,checked, and so on. Example code: Updates the selected node text var node = $ (' #tt '). Tree (' getselected '), if (node) {$ (' #tt '). Tree (' Update ', {target:node.target,text: ' New Text '});
Enablednd	None	Enable the drag and drop features.
Disablednd	None	Disables the drag and drop functions.
BeginEdit	Target	Start editing a node.
EndEdit	Target	Ends the editing of a node.
CancelEdit	Target	Cancels the editing of a node.

Easyui Tree JQuery