Tree

Override defaults with $.fn.tree.defaults.

Dependencies

Usage

Tree can be definded in <ul> element. The markup can defines leaf and children, below is an example:

  1. <ul id="tt">  
  2.     <li>  
  3.         <span>Folder</span>  
  4.         <ul>  
  5.             <li>  
  6.                 <span>Sub Folder 1</span>  
  7.                 <ul>  
  8.                     <li>  
  9.                         <span><a href="#">File 11</a></span>  
  10.                     </li>  
  11.                     <li>  
  12.                         <span>File 12</span>  
  13.                     </li>  
  14.                     <li>  
  15.                         <span>File 13</span>  
  16.                     </li>  
  17.                 </ul>  
  18.             </li>  
  19.             <li>  
  20.                 <span>File 2</span>  
  21.             </li>  
  22.             <li>  
  23.                 <span>File 3</span>  
  24.             </li>  
  25.         </ul>  
  26.     </li>  
  27.     <li>  
  28.         <span>File21</span>  
  29.     </li>  
  30. </ul>  

Tree can also be defined in an empty <ul> element:

  1. <ul id="tt"></ul>  
  1. $('#tt').tree({  
  2.     url:'tree_data.json'  
  3. });  

Use loadFilter to process the json data from ASP.NET web services.

  1. $('#tt').tree({  
  2.     url: ...,  
  3.     loadFilter: function(data){  
  4.         if (data.d){  
  5.             return data.d;  
  6.         } else {  
  7.             return data;  
  8.         }  
  9.     }  
  10. });  

Tree data format

Every node can contains following properties:

Some 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. }]  

Properties

Name Type Description Default
url string a URL to retrieve remote data. null
method string The http method to retrieve data. post
animate boolean Defines if to show animation effect when node expand or collapse. false
checkbox boolean Defines if to show the checkbox before every node. false
cascadeCheck boolean Defines if to cascade check. true
onlyLeafCheck boolean Defines if to show the checkbox only before leaf node. false
lines boolean Defines if to show tree lines. false
dnd boolean Defines if to enable drag and drop. false
data array The node data to be loaded. null
loader function(param,success,error) Defines how to load data from remote server. Return false can abort this action. This function takes the following parameters:
param: the parameter object to pass to remote server.
success(data): the callback function that will be called when retrieve data successfully.
error(): the callback function that will be called when failed to retrieve data.
json loader
loadFilter function(data,parent) Return the filtered data to display. The returned data is in standard tree format. This function takes the following parameters:
data: the original data to be loaded.
parent: DOM object, indicate the parent node.

Events

Many events callback function can take the 'node' parameter, which contains following properties:

Name Parameters Description
onClick node Fires when user click a node. Code example:
$('#tt').tree({
	onClick: function(node){
		alert(node.text);  // alert node text property when clicked
	}
});
onDblClick node Fires when user dblclick a node.
onBeforeLoad node, param Fires before a request is made to load data, return false to cancel this load action.
onLoadSuccess node, data Fires when data loaded successfully.
onLoadError arguments Fires when data loaded fail, the arguments parameter is same as the 'error' function of jQuery.ajax.
onBeforeExpand node Fires before node is expanded, return false to cancel this expand action.
onExpand node Fires when node is expanded.
onBeforeCollapse node Fires before node is collapsed, return false to cancel this collapse action.
onCollapse node Fires when node is collapsed.
onCheck node, checked Fires when users click the checkbox.
onBeforeSelect node Fires before node is selected, return false to cancel this select action.
onSelect node Fires when node is selected.
onContextMenu e, node Fires when node is right clicked. Code example:
// right click node and then display the context menu
$('#tt').tree({
	onContextMenu: function(e, node){
		e.preventDefault();
		// select the node
		$('#tt').tree('select', node.target);
		// display context menu
		$('#mm').menu('show', {
			left: e.pageX,
			top: e.pageY
		});
	}
});

// the context menu is defined as below:
<div id="mm" class="easyui-menu" style="width:120px;">
	<div onclick="append()" iconCls="icon-add">Append</div>
	<div onclick="remove()" iconCls="icon-remove">Remove</div>
</div>
onDrop target, source, point Fires when a node is dropped.
target: DOM object, The node being targeted for the drop.
source: the source node.
point: indicate the drop operation, posible values are: 'append','top' or 'bottom'.
onBeforeEdit node Fires before edit node.
onAfterEdit node Fires after edit node.
onCancelEdit node Fires when cancel the editing action.

Methods

Name Parameter Description
options none Return the options of tree.
loadData data Load the tree data.
getNode target get the specified node object.
getData target get the specified node data, including its children.
reload target Reload tree data.
getRoot none Get the root node, return node object
getRoots none Get the root nodes, return node array.
getParent target Get the parent node, the target parameter indicate the node DOM object.
getChildren target Get the children nodes, the target parameter indicate the node DOM object.
getChecked none Get all checked nodes.
getSelected none Get the selected node and return it, if no node selected return null.
isLeaf target Determine the specified node is leaf, the target parameter indicate the node DOM object.
find id Find the specifed node and return the node object. Code example:
// find a node and then select it
var node = $('#tt').tree('find', 12);
$('#tt').tree('select', node.target);
select target Select a node, the target parameter indicate the node DOM object.
check target Set the specified node to checked.
uncheck target Set the specified node to unchecked.
collapse target Collapse a node, the target parameter indicate the node DOM object.
expand target Expand a node, the target parameter indicate the node DOM object. When node is closed and has no child nodes, the node id value(named as 'id' parameter) will be sent to server to request child nodes data.
collapseAll target Collapse all nodes.
expandAll target Expand all nodes.
expandTo target Expand from root to specified node.
append param Append some children nodes to a parent node. param parameter has two properties:
parent: DOM object, the parent node to append to, if not assigned, append as root nodes.
data: array, the nodes data. Code example:
// append 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 expanded/collapsed state of the node, the target parameter indicate the node DOM object.
insert param Insert a node to before or after specified node. the 'param' parameter contains following properties:
before: DOM object, the node to insert before.
after: DOM object, the node to insert after.
data: object, the node data.
remove target Remove a node and it's children nodes, the target parameter indicate the node DOM object.
pop target Pop a node and it's children nodes, the method is same as remove but return the removed node data.
update param Update the specified node. param has following properties:
target(DOM object, the node to be updated),id,text,iconCls,checked,etc.
enableDnd none Enable drag and drop feature.
disableDnd none Disable drag and drop feature.
beginEdit target Begin editing a node.
endEdit target End editing a node.
cancelEdit target Cancel editing a node.