jQuery EasyUI DataGrid and Tree Plugins - Treegrid

Extends from $.fn.datagrid.defaults. Overrides defaults by using $.fn.treegrid.defaults.

The treegrid is used to display hierarchical data in a grid. It is based on the datagrid and combines tree view and editable grid. The treegrid allows you to create customizable, asynchronously expandable rows and display hierarchical data in multiple columns.

Dependencies

datagrid

Usage

Create a treegrid in HTML markup. In most cases, the treegrid follows the same structure and format as the datagrid.

<table id="tt" class="easyui-treegrid" style="width:600px;height:400px"
    data-options="url:'get_data.php',idField:'id',treeField:'name'">
    <thead>
        <tr>
            <th data-options="field:'name',width:180">Task Name</th>
            <th data-options="field:'persons',width:60,align:'right'">Persons</th>
            <th data-options="field:'begin',width:80">Begin Date</th>
            <th data-options="field:'end',width:80">End Date</th>
        </tr>
    </thead>
</table>

Create a treegrid using javascript.

<table id="tt" style="width:600px;height:400px"></table>
$('#tt').treegrid({
    url:'get_data.php',
    idField:'id',
    treeField:'name',
    columns:[[
        {title:'Task Name',field:'name',width:180},
        {field:'persons',title:'Persons',width:60,align:'right'},
        {field:'begin',title:'Begin Date',width:80},
        {field:'end',title:'End Date',width:80}
    ]]
});

Properties

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

Name	Type	Description	Default
idField	string	Defines the key field name to identify the tree node. Required.	null
treeField	string	Defines the field name of the tree node. Required.	null
animate	boolean	Defines if to show animation effect when node expand or collapse.	false
loader	function(param,success,error)	Defines how to load data from remote server. Return false to cancel this action. This function has the following parameters: param: the parameter object that will be sent to remote server. success(data): the callback function that is called when retrieve data successfully. error(): the callback function that is called when retrieve data fail.	json loader
loadFilter	function(data,parentId)	Returns the filtered data to display.

Events

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

Name	Parameters	Description
onClickRow	row	Fires when user clicks a node.
onDblClickRow	row	Fires when user double-clicks a node.
onClickCell	field, row	Fires when user clicks a cell.
onDblClickCell	field, row	Fires when user double-clicks a cell.
onBeforeLoad	row, param	Fires before a load request is made. Return false to cancel the load action.
onLoadSuccess	row, data	Fires when data loaded successfully.
onLoadError	arguments	Fires when data loaded fail. The arguments parameter is the same as the 'error' method of jQuery.ajax.
onBeforeExpand	row	Fires before node is expanded. Return false to cancel the expand action.
onExpand	row	Fires when node is expanded.
onBeforeCollapse	row	Fires before node is collapsed. Return false to cancel the collapse action.
onCollapse	row	Fires when node is collapsed.
onContextMenu	e, row	Fires when user right-clicks the node.
onBeforeEdit	row	Fires when user starts editing a node.
onAfterEdit	row, changes	Fires when user finishes editing.
onCancelEdit	row	Fires when user cancels editing a node.

Methods

Many methods need an 'id' parameter, which represents the value of the tree node.

Name	Parameter	Description
options	none	Return the options of the treegrid.
resize	options	Set the size of the treegrid. The options parameter contains two properties: width: the new width of the treegrid. height: the new height of the treegrid.
fixRowHeight	id	Fix the height of the specified row.
loadData	data	Load the treegrid data.
load	param	Load and show the first page. This method is available since version 1.3.4. Code example: // load and send some request parameters $('#tg').treegrid('load', { q: 'abc', name: 'name1' });
reload	id	Reload the treegrid data. If the 'id' parameter is passed, reload the specified row of the tree, otherwise reload all rows of the tree. Code example: $('#tt').treegrid('reload', 2); // reload the row which value is equals to 2 $('#tt').treegrid('reload'); // reload the all rows $('#tt').treegrid('reload', {id:2, q:'abc'}); // reload the specified row with 'q' parameter passing to server
reloadFooter	footer	Reload the footer data.
getData	none	Get the loaded data.
getFooterRows	none	Get the footer data.
getRoot	none	Get the root node, return the node object.
getRoots	none	Get the root nodes, return the 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 level of the specified node.
find	id	Find the specified 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 a specified node from the root.
toggle	id	Toggle the node's expanded/collapsed state.
append	param	Append some children nodes to a parent node. The 'param' parameter contains the following properties: parent: the id of the parent node, if not assigned, appended as root node. data: array, the nodes data. Code example: // append some nodes to the selected row var node = $('#tt').treegrid('getSelected'); $('#tt').treegrid('append',{ parent: node.id, // the node has a 'id' value that defined through 'idField' property data: [{ id: '073', name: 'name73' }] });
insert	param	Insert a node before or after the specified node. The 'param' parameter contains the following properties: before: the id value of the node to insert before. after: the id value of the node to insert after. data: the new node data. Code example: // insert a new node before the selected node var node = $('#tt').treegrid('getSelected'); if (node){ $('#tt').treegrid('insert', { before: node.id, data: { id: 38, name: 'name38' } }); } This method is available since version 1.3.1.
remove	id	Remove a node and its children nodes.
pop	id	Pop a node and return the node data containing its children nodes after removing it. This method is available since version 1.3.1.
refresh	id	Refresh the specified node.
update	param	Update the specified node. The 'param' parameter contains the following properties: id: the id of the node to be updated. row: the new row data. Code example: $('#tt').treegrid('update',{ id: 2, row: { name: 'new name', iconCls: 'icon-save' } }); This method is available since version 1.3.1.
beginEdit	id	Begin editing a node.
endEdit	id	End editing a node.
cancelEdit	id	Cancel editing a node.
getEditors	id	Get the editors of the specified row. Each editor has the following properties: actions: the actions that the editor can do. target: the jQuery object of the target editor. field: the field name. type: the type of the editor.
getEditor	param	Get the specified editor. The param parameter contains two properties: id: the id of the row node. field: the field name.