Override defaults with $.fn.tree.defaults.
Tree can be definded in <ul> element. The markup can defines leaf and children, below is an example:
Tree can also be defined in an empty <ul> element:
Use loadFilter to process the json data from ASP.NET web services.
Every node can contains following properties:
Some example:
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. |
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. |
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. |