JQuery Easyui API Chinese Document-Tree use introduction _jquery

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





Depend on





Draggable


Droppable


Usage





The tree can be defined in the <ul> element, which can be defined as leaf nodes and child nodes. Here is an example:

Copy Code code 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>

Tree can also be defined in an empty &lt;ul&gt; element.


&lt;ul id= "tt" &gt;&lt;/ul&gt;

Copy Code code as follows:

$ (' #tt '). Tree ({
URL: ' Tree_data.json '
});

The 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 they are loaded from the remote site.


Checked: Indicates whether the node is selected. Indicate whether the node is checked selected.


Attributes: The custom attribute appended to a node.


Children: A node array that defines a number of child nodes.


Example:

Copy Code code 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

null

name	type	description	default
url	string	get Remote Data URL .
method	string	get data http method .	post
animate	boolean	definition when node expands fold Whether animation effects are displayed when stacked.	false
checkbox	boolean	define whether in each section Point Front show checkbox 。	false
cascadecheck	boolean	define cascading checks 。	true
onlyleafcheck	boolean	definition is only in leaf section Point before show checkbox 。	false
dnd	boolean	define whether drag and drop is enabled 。 /span>	false
Data	Array	The node data that is loaded.	Null

Event

The callback function for many events requires the ' node ' function, which contains the following attributes:

• ID: The identity value that is bound to the node.
• Text: The text that is displayed.
• Checked: Whether the node is selected.
• Attributes: A custom attribute bound to a node.
• target : Target DOM object. /span>

Name	Parameters	Description
OnClick	Node	Triggered when a user clicks on a node, NodeParameters contain the following attributes: Id: node'sId text : node text Checked : node is selected Attributes : node custom attributes Target : target dom object
ondblclick	node	touch when a user double-clicks on a node Of /span>
onbeforeload	node, param	when loading data The request is issued before the trigger, return False cancels the load action. /span>
Onloadsuccess	node, data	Triggered when data is loaded successfully.
Onloaderror	Arguments	triggers when data loading fails, arguments parameters and jquery.ajax ' error ' function.
onbeforeexpand	node	node triggered before it is expanded, returns Span lang= "en-us" Arial, ' Sans-serif '; MSO-FAREAST-LANGUAGE:ZH-CN; mso-font-kerning:0pt; mso-fareast-font-family: Arial "> False cancels the expand action. /span>
onexpand	node	triggered when node expands. /span>
onbeforecollapse	node	node triggers before folding, returns Span lang= "en-us" Arial, ' Sans-serif '; MSO-FAREAST-LANGUAGE:ZH-CN; mso-font-kerning:0pt; mso-fareast-font-family: Arial "> False cancels the collapse action. /span>
oncollapse	node	triggered when the node is collapsed. /span>
oncheck	node, checked	when user Click checkbox when triggered.
onbeforeselect	node	node triggered before it is selected, returns cancels the selection action. /span>
onselect	node	triggered when node is selected. /span>
OnContextMenu	E, node	triggered when right click on the node.
OnDrop	Target, source, point	Triggered when a node is dragged and cast. Target: object that is dragged and dropped by the target node. Source : the source node. Point : Indicates a drag-and-drop operation, possibly with a value of: Span lang= "en-us" > ' append ' , ' top ' or ' bottom ' .
onbeforeedit	node	edit node before triggering. /span>
onafteredit	node	edit node triggered.
Oncanceledit	Node	triggered when the edit action is canceled.

Method

name	parameters	description
options	none	back to options .
loaddata	data	load tree data. /span>
getnode	target	get specified Node object 。 /span>
getdata	target	get specified node data , including its child nodes. /span>
reload	target	reload the tree's data. /span>
getroot	none	get root node, return node to Like.
getroots	none	get root node, return node Array. /span>
getparent	target	get parent node, target parameter refers to the node's DOM object.
getchildren	target	get child nodes, target parameter refers to the node's DOM object.
getchecked	none	get all selected nodes. /span>
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 DOM object of the node .
find	id	Locate the specified node and return this node Object.
select	target	Select a node, target parameter indicates node's DOM object.
check	target	set the specified node to tick Choose. /span>
uncheck	target	set the specified node to not Check. /span>
collapse	target	collapse a node, target parameter indicates node's DOM object.
expand	target	expand a node, target parameter indicates node's DOM object.
collapseall	target	collapse all nodes. /span>
expandall	target	expand all nodes.
Expandto	Target	Expands from the root of the specified node.
Append	Param	appends some children to a parent node, param parameter has two characteristics: Parent : dom object, the parent node to append to, or the root node if not allocated. data : Array, node data. /o:p>
Toggle	Target	Toggles the expand /collapse state of a node , and the target parameter represents the DOM object of the node .
Insert	Param	Inserts a node at the front or back of the specified node. Param The parameter contains the following attributes: before : dom object, the node inserted before it. After : object, and the node that is inserted behind it. Data : Object, node data. o:p>
Remove	Target	removes a node and its children, target parameter represents dom object.
Pop	Target	pops up a node and its child nodes, this method is the same as remove , but the removed node data is returned.
Update	Param	With the node specified in the heart,ParamThe parameters have the following characteristics: Target ( dom object, the node being updated), id , text , iconcls , checked Wait a minute.
enablednd	none	Enable drag-and-drop functionality. /span>
disablednd	none	Disable drag-and-drop functionality. /span>
beginedit	nodeel	start editing node. /span>
endedit	nodeel	end Edit node. /span>
canceledit	nodeel	cancel Edit node. /span>