easyui Tree
component The property names in the component are case-sensitive.
It can be displayed in both div and ul in html.
The json data property name returned by the url request must be consistent with the property in the tree control.
Return data format [{node},{node }]
Tree control data formatting:
id: Node ID, important for loading remote data.
text: display node text (required)
method: request method
state: node state, 'open' or 'closed', default: 'open'. If 'closed', the node will not be expanded automatically.
iconCls: The displayed node icon CSS class ID.
checked: Indicates whether the node is selected.
attributes: Custom attributes to be added to the node.
children: A node array declares several nodes.
target: The target DOM object.
Event
onClick(node): Triggered when the user clicks a node
onDbClick(node): Triggered when the user double-clicks a node
onBeforeLoad(node, param): Triggered before requesting to load remote data, return false to cancel the loading operation
onLoadSuccess( node, data): trigger
onBeforeExpand(node) after the data is loaded successfully: trigger before the node is expanded, return false to cancel the expansion operation
onExpand(node): triggers when the node is expanded
onBeforeCollapse(node): triggers before the node is collapsed, return false to cancel the collapse operation
onCollapse(node): triggers onBeforeEdit(node) when the node is collapsed : triggers onAfterEdit
before editing the node
(node): triggers
onCancelEdit(node) after editing the node: triggers when the editing operation is canceled
Method
options(node): returns the tree control property
loadData(data): reads the tree control data
getNode(target): obtains the specified node object
getData(target): Get the specified node data, including its child nodes
reload(target): Reload the tree control data
getRoot(none): Get the root node, return the node object
getRoots(none): Get all the root nodes, return the node Array
getParent(target): get the parent node, 'target' parameter represents the DOM object of the node
getChildren(target): get all child nodes, 'target' parameter represents the DOM object of the node
getChecked(state): get all the selected nodes. Available values for 'state' are: 'checked', 'unchecked', 'indeterminate'.
If 'state'
getSelected(none): Get the selected node and return it, if not selected, return null
isLeaf(target): Determine whether the specified node is a leaf node, the target parameter is a node DOM object
find(id): Find the specified node and return the node Object
select(target): Select a node, the 'target' parameter indicates the DOM object of the node
check(target): Select the specified node
uncheck(target): Uncheck the specified node
collapse(target): Collapse a node, the 'target' parameter indicates Node's DOM object
expand(target): Expand a node, the 'target' parameter represents the node's DOM object. When the node is closed or has no child nodes,
the value of the node ID will be sent to the server to request the data of the child nodes
collapseAll(target): collapse all nodes
expandAll(target): expand all nodes
expandTo(target): open from the root node to the All nodes between the specified nodes
scrollTo(target): scroll to the specified node
append(param): append several child nodes to a parent node, the param parameter has 2 attributes parent: DOM object, the parent node of the child node to be appended, If
not specified, child nodes will be appended to the root node. data: array, node data.
toggle(target): The trigger to open or close the node, the target parameter is a node DOM object
insert(param): Insert a node before or after a specified node. The 'param' parameter contains the following properties: before: DOM object, insert before a node
after: DOM object, insert after a node. data: object, node data
remove(target): remove a node and its child nodes
pop(target): remove a node and its child nodes, this method is the same as the remove method, the difference is that it will return the removed Removed node data
onClick : function (node) {
console.log($('#box').tree('getNode', node.target));
}
$('#box').tree({
url:'tree.php',
lines:true
});
There is no need to fire an event to load data asynchronously when hitting a directory here. Because it has implemented this event internally.
component The property names in the component are case-sensitive.
It can be displayed in both div and ul in html.
The json data property name returned by the url request must be consistent with the property in the tree control.
Return data format [{node},{node }]
Tree control data formatting:
id: Node ID, important for loading remote data.
text: display node text (required)
method: request method
state: node state, 'open' or 'closed', default: 'open'. If 'closed', the node will not be expanded automatically.
iconCls: The displayed node icon CSS class ID.
checked: Indicates whether the node is selected.
attributes: Custom attributes to be added to the node.
children: A node array declares several nodes.
target: The target DOM object.
Event
onClick(node): Triggered when the user clicks a node
onDbClick(node): Triggered when the user double-clicks a node
onBeforeLoad(node, param): Triggered before requesting to load remote data, return false to cancel the loading operation
onLoadSuccess( node, data): trigger
onBeforeExpand(node) after the data is loaded successfully: trigger before the node is expanded, return false to cancel the expansion operation
onExpand(node): triggers when the node is expanded
onBeforeCollapse(node): triggers before the node is collapsed, return false to cancel the collapse operation
onCollapse(node): triggers onBeforeEdit(node) when the node is collapsed : triggers onAfterEdit
before editing the node
(node): triggers
onCancelEdit(node) after editing the node: triggers when the editing operation is canceled
Method
options(node): returns the tree control property
loadData(data): reads the tree control data
getNode(target): obtains the specified node object
getData(target): Get the specified node data, including its child nodes
reload(target): Reload the tree control data
getRoot(none): Get the root node, return the node object
getRoots(none): Get all the root nodes, return the node Array
getParent(target): get the parent node, 'target' parameter represents the DOM object of the node
getChildren(target): get all child nodes, 'target' parameter represents the DOM object of the node
getChecked(state): get all the selected nodes. Available values for 'state' are: 'checked', 'unchecked', 'indeterminate'.
If 'state'
getSelected(none): Get the selected node and return it, if not selected, return null
isLeaf(target): Determine whether the specified node is a leaf node, the target parameter is a node DOM object
find(id): Find the specified node and return the node Object
select(target): Select a node, the 'target' parameter indicates the DOM object of the node
check(target): Select the specified node
uncheck(target): Uncheck the specified node
collapse(target): Collapse a node, the 'target' parameter indicates Node's DOM object
expand(target): Expand a node, the 'target' parameter represents the node's DOM object. When the node is closed or has no child nodes,
the value of the node ID will be sent to the server to request the data of the child nodes
collapseAll(target): collapse all nodes
expandAll(target): expand all nodes
expandTo(target): open from the root node to the All nodes between the specified nodes
scrollTo(target): scroll to the specified node
append(param): append several child nodes to a parent node, the param parameter has 2 attributes parent: DOM object, the parent node of the child node to be appended, If
not specified, child nodes will be appended to the root node. data: array, node data.
toggle(target): The trigger to open or close the node, the target parameter is a node DOM object
insert(param): Insert a node before or after a specified node. The 'param' parameter contains the following properties: before: DOM object, insert before a node
after: DOM object, insert after a node. data: object, node data
remove(target): remove a node and its child nodes
pop(target): remove a node and its child nodes, this method is the same as the remove method, the difference is that it will return the removed Removed node data
onClick : function (node) {
console.log($('#box').tree('getNode', node.target));
}
$('#box').tree({
url:'tree.php',
lines:true
});
There is no need to fire an event to load data asynchronously when hitting a directory here. Because it has implemented this event internally.