Mikel
[转载]treegrid – Documentation – jQuery EasyUI.
TreeGrid
$(‘#material’).treegrid({
nowrap: false,
rownumbers: true,
animate:true,
collapsible:true,
loadMsg:’数据加载中请稍后……’,
url:'<c:url value=”/jxc/sysinfo/loadMaterialTree.jsps”/>’,
idField:’matCode’,
treeField:’matCode’,
frozenColumns:[[
{title:’料号’,field:’matCode’,width:180}
]],
columns:[[
{field:’matType’,title:’产品类型’,width:120},
{field:’matShow’,title:’产品名称’,width:120},
{field:’matStandard’,title:’产品规格’,width:120},
{field:’matProperties’,title:’产品属性’,width:120}
]],
onBeforeLoad:function(row,param){
// 此处就是异步加载地所在
if (row){
$(this).treegrid(‘options’).url = ‘<c:url value=”/jxc/sysinfo/loadMaterialTree.jsps”/>?matParentId=’+row.matId;
} else {
$(this).treegrid(‘options’).url = ‘<c:url value=”/jxc/sysinfo/loadMaterialTree.jsps?matName=”/>’;
}
},
onClickRow:function(){
/**
** 如果是新建或者修改，以及删除，则清除查询form表单数据
**/
$(‘#materialSearch’).form(‘clear’);
}
});
<table id=”material”></table>
以及树的异步添加、删除、刷新等
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. |
