jQuery EasyUI DataGrid and Tree Plugin - Treegrid Tree Grid
Extends from $.fn.datagrid.defaults. Overrides the default defaults with $.fn.treegrid.defaults.
The TreeGrid is used to display hierarchical data in a grid format. It is based on the DataGrid and combines the TreeView and an editable grid. The TreeGrid allows you to create customizable, asynchronously expandable rows, and display hierarchical data in multiple columns.
Dependencies
- datagrid
Usage
Create the TreeGrid in the 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 the 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
This property extends from the DataGrid. The following properties are added for the TreeGrid.
Name | Type | Description | Default Value |
---|---|---|---|
idField | string | Defines the key field that identifies the tree node. Required. | null |
treeField | string | Defines the field of the tree node. Required. | null |
animate | boolean | Defines whether to show animation effects when expanding or collapsing nodes. | false |
loader | function(param,success,error) | Defines how to load data from a remote server. Return false to cancel the action. The function has the following parameters: <br>param: The parameter object to be passed to the remote server. <br>success(data): The callback function to be called when data retrieval is successful. <br>error(): The callback function to be called when data retrieval fails. | json loader |
loadFilter | function(data,parentId) | Returns the filtered data to be displayed. |
Events
This event extends from the DataGrid. The following events are added for the TreeGrid.
Name | Parameters | Description |
---|---|---|
onClickRow | row | Triggered when a user clicks a node. |
onDblClickRow | row | Triggered when a user double-clicks a node. |
onClickCell | field,row | Triggered when a user clicks a cell. |
onDblClickCell | field,row | Triggered when a user double-clicks a cell. |
onBeforeLoad | row, param | Triggered before the data load request is sent, return false to cancel the load action. |
onLoadSuccess | row, data | Triggered when data is loaded successfully. |
onLoadError | arguments | Triggered when data loading fails, the arguments parameter is the same as jQuery.ajax's 'error' method. |
onBeforeExpand | row | Triggered before a node is expanded, return false to cancel the expand action. |
onExpand | row | Triggered when a node is expanded. |
onBeforeCollapse | row | Triggered before a node is collapsed, return false to cancel the collapse action. |
onCollapse | row | Triggered when a node is collapsed. |
onContextMenu | e, row | Triggered when a node is right-clicked. |
onBeforeEdit | row | Triggered when a user starts editing a node. |
onAfterEdit | row,changes | Triggered when a user finishes editing. |
onCancelEdit | row | Triggered when a user cancels editing a node. |
Methods
Many methods require a parameter named 'id', which indicates the value of the tree node.
Name | Parameter | Description |
---|---|---|
options | none | Returns the options of the TreeGrid. |
resize | options | Sets the size of the TreeGrid. The options parameter contains two properties: <br>width: The new width of the TreeGrid. <br>height: The new height of the TreeGrid. |
fixRowHeight | id | Fixes the height of the specified row. |
loadData | data | Loads the data of the TreeGrid. |
load | param | Loads and displays the first page. Available since version 1.3.4. <br>Example: // load and send some request parameters<br>$('#tg').treegrid('load', {<br> q: 'abc',<br> name: 'name1'<br>}); |
reload | id | Reloads the data of the TreeGrid. If the 'id' parameter is passed, it reloads the specified row of the tree, otherwise it reloads all rows of the tree. <br>Example: $('#tt').treegrid('reload', 2); // reload the row which value is equals to 2<br>$('#tt').treegrid('reload'); // reload all rows<br>$('#tt').treegrid('reload', {id:2, q:'abc'}); // reload the specified row with 'q' parameter passing to server |
reloadFooter | footer | Reloads the footer data. |
getData | none | Gets the loaded data. |
getFooterRows | none | Gets the footer data. |
getRoot | none | Gets the root node, returns the node object. |
getRoots | none | Gets the root nodes, returns an array of nodes. |
getParent | id | Gets the parent node. |
getChildren | id | Gets the child nodes. |
getSelected | none | Gets the selected node and returns it, returns null if no node is selected. |
getSelections | none | Gets all selected nodes. |
getLevel | id | Gets the level of the specified node. |
find | id | Finds the specified node and returns the node data. |
select | id | Selects the node. |
unselect | id | Unselects the node. |
selectAll | none | Selects all nodes. |
unselectAll | none | Unselects all nodes. |
collapse | id | Collapses the node. |
expand | id | Expands the node. |
collapseAll | id | Collapses all nodes. |
expandAll | id | Expands all nodes. |
expandTo | id | Expands from the root to a specified node. |
toggle | id | Toggles the expand/collapse state of the node. |
append | param | Appends some child nodes to a parent node. The 'param' parameter includes the following properties: <br>parent: The id of the parent node, if not assigned, appends as the root node. <br>data: Array, the data of the nodes. <br> <br>Example: // append some nodes to the selected row<br>var node = $('#tt').treegrid('getSelected');<br>$('#tt').treegrid('append',{<br> parent: node.id, // the node has a 'id' value that defined through 'idField' property<br> data: [{<br> id: '073',<br> name: 'name73'<br> }]<br>}); |
insert | param | Inserts a node before or after a specified node. The 'param' parameter includes the following properties: <br>before: The id value of the node before which to insert. <br>after: The id value of the node after which to insert. <br>data: The new node data. <br> <br>Example: // insert a new node before the selected node<br>var node = $('#tt').treegrid('getSelected');<br>if (node){<br> $('#tt').treegrid('insert', {<br> before: node.id,<br> data: {<br> id: 38,<br> name: 'name38'<br> }<br> });<br>}Available since version 1.3.1. |
remove | id | Removes the node and its child nodes. |
pop | id | Pops the node and returns the node data containing its child nodes after removal. Available since version 1.3.1. |
refresh | id | Refreshes the specified node. |
update | param | Update the specified node. The 'param' parameter includes the following attributes: <br>id: Represents the id of the node to be updated. <br>row: New row data. <br> <br>Code example: $('#tt').treegrid('update', {<br> id: 2,<br> row: {<br> name: 'new name',<br> iconCls: 'icon-save'<br> }<br>}); This method is available since version 1.3.1. |
beginEdit | id | Begin editing the node. |
endEdit | id | End editing the node. |
cancelEdit | id | Cancel editing the node. |
getEditors | id | Get the editors for the specified row. Each editor has the following attributes: <br>actions: Actions the editor can perform. <br>target: jQuery object of the target editor. <br>field: Field name. <br>type: Type of the editor. |
getEditor | param | Get the specified editor, the param parameter includes two attributes: <br>id: Id of the row node. <br>field: Field name. |