treegrid(树形表格) · easyUI

### TreeGrid（树形表格）扩展自$.fn.datagrid.defaults。使用$.fn.treegrid.defaults重写默认值对象。树形表格用于显示分层数据表格。它是基于数据表格、组合树控件和可编辑表格。树形表格允许用户创建可定制的、异步展开行和显示在多列上的分层数据。 ![](https://box.kancloud.cn/2015-12-18_5673868d3da90.png) #### #### 依赖关系 - [datagrid](#) #### #### 使用案例使用HTML标签创建树形表格。在大多数情况下，树形表格遵循数据表格的结构。 1. **<table** id="tt" class="easyui-treegrid" style="width:600px;height:400px" 1. data-options="url:'get_data.php',idField:'id',treeField:'name'"**>** 1. **<thead>** 1. **<tr>** 1. **<th** data-options="field:'name',width:180"**>**Task Name**</th>** 1. **<th** data-options="field:'persons',width:60,align:'right'"**>**Persons**</th>** 1. **<th** data-options="field:'begin',width:80"**>**Begin Date**</th>** 1. **<th** data-options="field:'end',width:80"**>**End Date**</th>** 1. **</tr>** 1. **</thead>** 1. **</table>** <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> 使用Javascript创建树形表格。 1. **<table** id="tt" style="width:600px;height:400px"**></table>** <table id="tt" style="width:600px;height:400px"></table> 1. $('#tt').treegrid({ 1. url:'get_data.php', 1. idField:'id', 1. treeField:'name', 1. columns:[[ 1. {title:'Task Name',field:'name',width:180}, 1. {field:'persons',title:'Persons',width:60,align:'right'}, 1. {field:'begin',title:'Begin Date',width:80}, 1. {field:'end',title:'End Date',width:80} 1. ]] 1. }); $('#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} ]] }); #### #### 属性树形表格扩展自[datagrid](#)(数据表格)，树形表格新增的属性如下： <table class="doc-table"><tbody><tr><th><strong>属性名</strong></th> <th><strong>属性值类型</strong></th> <th><strong>描述</strong></th> <th><strong>默认值</strong></th></tr><tr><td>idField</td> <td>string</td> <td>定义关键字段来标识树节点。<strong><font color="#ff0000">（必须的）</font></strong></td> <td>null</td></tr><tr><td>treeField</td> <td>string</td> <td>定义树节点字段。<strong><font color="#ff0000">（必须的）</font></strong></td> <td>null</td></tr><tr><td>animate</td> <td>boolean</td> <td>定义在节点展开或折叠的时候是否显示动画效果。</td> <td>false</td></tr><tr><td>loader</td> <td>function(param,success,error)</td> <td>定义以何种方式从远程服务器读取数据。返回false可以忽略该动作。该函数具有一下参数：<br/>param：传递到远程服务器的参数对象。<br/>success(data)：当检索数据成功的时候调用的回调函数。<br/>error()：当检索数据失败的时候调用的回调函数。</td> <td>json loader</td></tr><tr><td>loadFilter</td> <td>function(data,parentId)</td> <td>返回过滤后的数据进行展示。</td> <td/></tr></tbody></table> #### 事件树形表格的事件扩展自[datagrid](#)(数据表格)，树形表格新增的时间如下： | **事件名** | **事件参数** | **描述** | |-----|-----|-----| | onClickRow | row | 在用户点击节点的时候触发。 | | onDblClickRow | row | 在用户双击节点的时候触发。 | | onClickCell | field,row | 在用户点击单元格的时候触发。 | | onDblClickCell | field,row | 在用户双击单元格的时候触发。 | | onBeforeLoad | row, param | 在请求数据加载之前触发，返回false可以取消加载动作。 | | onLoadSuccess | row, data | 数据加载完成之后触发。 | | onLoadError | arguments | 数据加载失败的时候触发，参数和jQuery的$.ajax()函数的'error'回调函数一样。 | | onBeforeExpand | row | 在节点展开之前触发，返回false可以取消展开节点的动作。 | | onExpand | row | 在节点被展开的时候触发。 | | onBeforeCollapse | row | 在节点折叠之前触发，返回false可以取消折叠节点的动作。 | | onCollapse | row | 在节点被折叠的时候触发。 | | onContextMenu | e, row | 在右键点击节点的时候触发。 | | onBeforeEdit | row | 在用户开始编辑节点的时候触发。 | | onAfterEdit | row,changes | 在用户完成编辑的时候触发。 | | onCancelEdit | row | 在用户取消编辑节点的时候触发。 | #### 方法很多方法都使用'id'命名参数，而'id'参数代表树节点的值。 <table class="doc-table"><tbody><tr><th><strong>方法名</strong></th> <th><strong>方法参数</strong></th> <th><strong>描述</strong></th></tr><tr><td>options</td> <td>none</td> <td>返回树形表格的属性。</td></tr><tr><td>resize</td> <td>options</td> <td>设置树形表格大小，options包含2个属性：<br/>width：树形表格的新宽度。<br/>height：树形表格的新高度。</td></tr><tr><td>fixRowHeight</td> <td>id</td> <td>修正指定的行高。</td></tr><tr><td>load</td> <td>param</td> <td>读取并显示首页内容。<strong><font color="#ff0000">（该方法自1.3.4版开始可用）</font></strong> <br/><p>代码示例：</p><pre>// 读取并发送请求参数 $('#tg').treegrid('load', { q: 'abc', name: 'name1' });</pre></td></tr><tr><td>loadData</td> <td>data</td> <td>读取树形表格数据。</td></tr><tr><td>reload</td> <td>id</td> <td>重新加载树形表格数据。如果'id'属性有值，将重新载入指定树形行，否则重新载入所有行。 <p>代码示例：</p><pre>$('#tt').treegrid('reload', 2); // 重新载入值为2的行 $('#tt').treegrid('reload'); // 重新载入所有行</pre></td></tr><tr><td>reloadFooter</td> <td>footer</td> <td>重新载入页脚数据。</td></tr><tr><td>getData</td> <td>none</td> <td>获取载入数据。</td></tr><tr><td>getFooterRows</td> <td>none</td> <td>获取页脚数据。</td></tr><tr><td>getRoot</td> <td>none</td> <td>获取根节点，返回节点对象。</td></tr><tr><td>getRoots</td> <td>none</td> <td>获取所有根节点，返回节点数组。</td></tr><tr><td>getParent</td> <td>id</td> <td>获取父节点。</td></tr><tr><td>getChildren</td> <td>id</td> <td>获取子节点。</td></tr><tr><td>getSelected</td> <td>none</td> <td>获取选择的节点并返回它，如果没有节点被选中则返回null。</td></tr><tr><td>getSelections</td> <td>none</td> <td>获取所有选择的节点。</td></tr><tr><td>getLevel</td> <td>id</td> <td>获取指定节点等级。</td></tr><tr><td>find</td> <td>id</td> <td>查找指定节点并返回节点数据。</td></tr><tr><td>select</td> <td>id</td> <td>选择一个节点。</td></tr><tr><td>unselect</td> <td>id</td> <td>反选一个节点。</td></tr><tr><td>selectAll</td> <td>none</td> <td>选择所有节点。</td></tr><tr><td>unselectAll</td> <td>none</td> <td>反选所有节点。</td></tr><tr><td>collapse</td> <td>id</td> <td>折叠一个节点。</td></tr><tr><td>expand</td> <td>id</td> <td>展开一个节点。</td></tr><tr><td>collapseAll</td> <td>id</td> <td>折叠所有节点。</td></tr><tr><td>expandAll</td> <td>id</td> <td>展开所有节点。</td></tr><tr><td>expandTo</td> <td>id</td> <td>打开从根节点到指定节点之间的所有节点。</td></tr><tr><td>toggle</td> <td>id</td> <td>节点展开/折叠状态触发器。</td></tr><tr><td>append</td> <td>param</td> <td>追加节点到一个父节点，'param'参数包含如下属性：<br/>parent：父节点ID，如果未指定则追加到根节点。<br/>data：数组，节点数据。<br/>代码示例： <pre>// 追加若干节点到选中节点的后面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' }] }); </pre></td></tr><tr><td>insert</td> <td>param</td> <td>插入一个新节点到指定节点。'param'参数包含一下参数：<br/>before：插入指定节点ID值之前。<br/>after：插入指定节点ID值之后。<br/>data：新节点数据。 <p>代码示例：</p><pre>// 插入一个新节点到选择的节点之前 var node = $('#tt').treegrid('getSelected'); if (node){ $('#tt').treegrid('insert', { before: node.id, data: { id: 38, name: 'name38' } }); } </pre><strong><font color="#ff0000">（该方法自1.3.1版开始可用）</font></strong> </td></tr><tr><td>remove</td> <td>id</td> <td>移除一个节点和他的所有子节点。</td></tr><tr><td>pop</td> <td>id</td> <td>弹出并返回节点数据以及它的子节点之后删除。<strong><font color="#ff0000">（该方法自1.3.1版开始可用）</font></strong></td></tr><tr><td>refresh</td> <td>id</td> <td>刷新指定节点。</td></tr><tr><td>update</td> <td>param</td> <td>更新指定节点。'param'参数包含以下属性：<br/>id：要更新的节点的ID。<br/>row：新的行数据。 <p>代码示例：</p><pre>$('#tt').treegrid('update',{ id: 2, row: { name: '新名称', iconCls: 'icon-save' } });</pre><strong><font color="#ff0000">（该方法自1.3.1版开始可用）</font></strong></td></tr><tr><td>beginEdit</td> <td>id</td> <td>开始编辑一个节点。</td></tr><tr><td>endEdit</td> <td>id</td> <td>结束编辑一个节点。</td></tr><tr><td>cancelEdit</td> <td>id</td> <td>取消编辑一个节点。</td></tr><tr><td>getEditors</td> <td>id</td> <td>获取指定行编辑器。每个编辑器都包含以下属性：<br/>actions：编辑器执行的动作。<br/>target：目标编辑器的jQuery对象。<br/>field：字段名称。<br/>type：编辑器类型。</td></tr><tr><td>getEditor</td> <td>param</td> <td>获取指定编辑器，'param'参数包含2个属性：<br/>id：行节点ID。<br/>field：字段名称。</td></tr></tbody></table>