JQuery easyui API Chinese documentation-Introduction to tree usage

Rewrite the defaults with $.fn.tree.defaults.

Depend on

Draggable
Droppable
Usage

The Tree can be defined in the <ul> element, and this tag can be defined as a leaf node and a child node. Here is an example:

Copy CodeThe code is as follows:
<ul id= "tt" >
<li>
<span>Folder</span>
<ul>
<li>
<span>sub Folder 1</span>
<ul>
<li>
<span><a href= "#" >file 11</a></span>
</li>
<li>
<span>file 12</span>
</li>
<li>
<span>file 13</span>
</li>
</ul>
</li>
<li>
<span>file 2</span>
</li>
<li>
<span>file 3</span>
</li>
</ul>
</li>
<li>
<span>File21</span>
</li>
</ul>

The Tree can also be defined in an empty <ul> element.
<ul id= "tt" ></ul>

Copy CodeThe code is as follows:
$ (' #tt '). Tree ({
URL: ' Tree_data.json '
});

Tree data format
Each node can contain the following attributes:
ID: The ID of the node, which is important for loading remote data.
Text: The node text that is displayed.
State: Node status, ' Open ' or ' closed ', default is ' open '. When set to ' closed ', this node has child nodes and will load them from the remote site.
Checked: Indicates whether the node is selected. Indicate whether the node is checked selected.
Attributes: A custom attribute appended to a node.
Children: A node array that defines some child nodes.
Example:

Copy CodeThe code is as follows:
[{
"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": "Sub bookds",
"State": "Closed"
}]
}]
},{
"Text": "Languages",
"State": "Closed",
"Children": [{
"Text": "Java"
},{
"Text": "C #"
}]
}]

Characteristics

Name	Type	Description	Default value
Url	String	Gets the URL of the remote data.	Null
Method	String	Gets the HTTP method for the data.	Post
Animate	Boolean	Defines whether the animation effect is displayed when the node expands to collapse.	False
CheckBox	Boolean	Defines whether a checkbox is displayed in front of each node.	False
Cascadecheck	Boolean	Defines whether to cascade the check.	True
Onlyleafcheck	Boolean	Defines whether a checkbox is displayed only before the leaf node.	False
Dnd	Boolean	Defines whether drag-and-drop is enabled.	False
Data	Array	The node data that is loaded.	Null

Event

Many of the event's callback functions require the ' node ' function, which contains the following features:

• ID: The identity value that is bound to the node.
• Text: the displayed word.
• Checked: Whether the node is selected.
• Attributes: A custom property bound to a node.
• Target: The DOM object of the destination.

Name	Parameters	Description
OnClick	Node	Triggered when a user taps a node, the node parameter contains the following attributes: ID: ID of the node Text: The literal of the node Checked: Whether the node is selected Attributes: Node Custom properties Target: The DOM object that was hit by the target
OnDblClick	Node	Triggered when a user double-clicks a node.
Onbeforeload	node, param	When a request to load data is fired, false returns to cancel the load action.
Onloadsuccess	node, data	triggered when the data load is successful.
Onloaderror	Arguments	triggered when the data load fails, the arguments parameter is the same as the ' error ' function of Jquery.ajax.
Onbeforeexpand	Node	Triggers before the node is expanded, and returns False to cancel the expand action.
Onexpand	Node	Triggered when the node is expanded.
Onbeforecollapse	Node	The node is triggered before collapsing and returns false to cancel the collapse action.
Oncollapse	Node	Triggered when a node is collapsed.
OnCheck	node, checked	Triggered when the user taps a checkbox.
Onbeforeselect	Node	The node is triggered before it is selected, and returns false to deselect the action.
OnSelect	Node	Triggered when the node is selected.
OnContextMenu	E, node	triggered when you right-click a node.
OnDrop	Target, source, point	Triggered when the node is being dragged and cast. Target:dom object, drag and drop the target node. Source: Origin node. Point: Represents a drag-and-drop operation, possibly the value: ' Append ', ' top ' or ' bottom '.
Onbeforeedit	Node	Triggered before the edit node.
Onafteredit	Node	Fires after the node is edited.
Oncanceledit	Node	Triggered when an edit action is canceled.

Method

Name	Parameters	Description
Options	None	Returns the options for the tree.
LoadData	Data	Loads the tree's data.
GetNode	Target	Gets the specified node object.
GetData	Target	Gets the specified node data, including its child nodes.
Reload	Target	Reloads the tree's data.
Getroot	None	Gets the root node that returns the Node object.
Getroots	None	Gets the root node and returns an array of nodes.
GetParent	Target	Gets the parent node, the target parameter, that refers to the node's DOM object.
GetChildren	Target	Gets the child node that the target parameter refers to as a DOM object of the node.
GetChecked	None	Gets all the selected nodes.
GetSelected	None	Gets the selected node and returns it, or null if no node is selected.
IsLeaf	Target	Defines the specified node as a leaf node, and the target parameter represents the node's DOM object.
Find	Id	Finds the specified node and returns the Node object.
Select	Target	Select a node, and the target parameter represents the DOM object for the node.
Check	Target	Sets the specified node to tick.
Uncheck	Target	Sets the specified node to not checked.
Collapse	Target	Collapses a node, and the target parameter represents the node's DOM object.
Expand	Target	Expands a node with the target parameter representing the node's DOM object.
CollapseAll	Target	Collapse all the nodes.
ExpandAll	Target	Expand all the nodes.
Expandto	Target	Expands from the root of the specified node.
Append	Param	Append some child nodes to a parent node, the param parameter has two properties: The Parent:dom object, appended to the parent node, is appended to the root node if there is no assignment. Data: arrays, nodes.
Toggle	Target	Toggles the expand/collapse state of the node, which represents the node's DOM object.
Insert	Param	Inserts a node in front or behind the specified node, and the Param parameter contains the following attributes: A Before:dom object that is inserted in front of the node. The After:dom object that is inserted behind the node. Data: The object, the node.
Remove	Target	Remove a node and its child nodes, the target parameter represents the DOM object of the node.
Pop	Target	pops up a node and its child nodes, this method is the same as remove, but returns the node data that was removed.
Update	Param	With the node specified by the heart, the Param parameter has the following characteristics: Target (DOM object, updated node), id, text, iconcls, checked, and so on.
Enablednd	None	Enables drag-and-drop functionality.
Disablednd	None	Disables drag-and-drop functionality.
BeginEdit	Nodeel	Begins the edit node.
EndEdit	Nodeel	Ends the edit node.
CancelEdit	Nodeel	Cancels the edit node.

JQuery easyui API Chinese documentation-Introduction to tree use