Easy Tutorial
❮ Jeasyui Mb Splitbutton Jeasyui Datagrid Datagrid13 ❯

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

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.
❮ Jeasyui Mb Splitbutton Jeasyui Datagrid Datagrid13 ❯