easyui treegrid

TreeGrid

Extend from $.fn.datagrid.defaults. Override defaults with $.fn.treegrid.defaults.

Dependencies

• datagrid

Usage

1. <table id="tt"></table>  

1. $('#tt').treegrid({  
2.     url:'treegrid_data.json',  
3.     treeField:'name',  
4.     columns:[[  
5.         {title:'Task Name',field:'name',width:180},  
6.         {field:'persons',title:'Persons',width:60,align:'right'},  
7.         {field:'begin',title:'Begin Date',width:80},  
8.         {field:'end',title:'End Date',width:80}  
9.     ]]  
10. });  

Properties

The properties extend from datagrid, below is the added properties for treegrid.

Name	Type	Description	Default
treeField	string	Defines the tree node field.	null
animate	boolean	Defines if to show animation effect when node expand or collapse.	false

Events

The events extend from datagrid, below is the added events for treegrid.

Name	Parameters	Description
onClickRow	row	Fires when user click a node.
onDblClickRow	row	Fires when user dblclick a node.
onBeforeLoad	row, param	Fires before a request is made to load data, return false to cancel this load action.
onLoadSuccess	row, 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	row	Fires before node is expanded, return false to cancel this expand action.
onExpand	row	Fires when node is expanded.
onBeforeCollapse	row	Fires before node is collapsed, return false to cancel this collapse action.
onCollapse	row	Fires when node is collapsed.
onContextMenu	e, row	Fires when node is right clicked.
onBeforeEdit	row	Fires when user start editing a node.
onAfterEdit	row,changes	Fires when user finish editing.
onCancelEdit	row	Fires when user cancel editing a node.

Methods

Name	Parameter	Description
options	none	Return the options of treegrid.
resize	options	Set treegrid size, the options contains two properties: width: the new width of treegrid. height: the new height of treegrid.
fixRowHeight	id	fix the specified row height.
loadData	data	Load the treegrid data.
reload	id	Reload treegrid data.
reloadFooter	footer	Reload footer data.
getData	none	Get the loaded data.
getFooterRows	none	Get the footer data.
getRoot	none	Get the root node, return node object
getRoots	none	Get the root nodes, return node array.
getParent	id	Get the parent node.
getChildren	id	Get the children nodes.
getSelected	none	Get the selected node and return it, if no node selected return null.
getSelections	none	Get all selected nodes.
getLevel	id	Get the specified node level.
find	id	Find the specifed node and return the node data.
select	id	Select a node.
unselect	id	Unselect a node.
selectAll	none	Select all nodes.
unselectAll	none	Unselect all nodes.
collapse	id	Collapse a node.
expand	id	Expand a node.
collapseAll	id	Collapse all nodes.
expandAll	id	Expand all nodes.
expandTo	id	Expand from root to specified node.
toggle	id	Toggles expanded/collapsed state of the node.
append	param	Append nodes to a parent node. The 'param' parameter contains following properties: parent: DOM object, the parent node to append to, if not assigned, append as root nodes. data: array, the nodes data.
remove	id	Remove a node and it's children nodes.
refresh	id	Refresh the specified node.
beginEdit	id	Begin editing a node.
endEdit	id	End editing a node.
cancelEdit	id	Cancel editing a node.
getEditors	id	Get the specified row editors. Each editor has the following properties: actions: the actions that the editor can do. target: the target editor jQuery object. field: the field name. type: the editor type.
getEditor	options	Get the specified editor, the options contains two properties: id: the row node id. field: the field name.