Mikel
[转载]Documentation – jQuery EasyUI.
TreeGrid
Extend from $.fn.datagrid.defaults. Override defaults with $.fn.treegrid.defaults.
Dependencies
- datagrid
Usage
- <table id=“tt”></table>
- $(‘#tt’).treegrid({
- url:‘treegrid_data.json’,
- 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 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. |
