jQuery EasyUI API 中文文档 - 表格树（Treegrid）

柔光的暖阳◎ 2022-03-21 02:36 378阅读 0赞

### **(学习留存，如有侵权，请告知，立刻删除！)** ###

### TreeGrid ###

由 $.fn.datagrid.defaults扩展而来。

default由$.fn.treegrid.defaults重载。

Treegrid用来在表格中显示层级数据。它基于datagrid,结合了treeview和editable grid。Treegrid可以自定义，异步展开行数据，在多列中展示层级数据。

![treegrid2.png][]

依赖控件

*  datagrid

用法

用HTML标记生成treegrid. 在大多数情况下，treegrid和datagrid 拥有相同的结构和格式；

**\[html\]** [view plain][][copy][view plain][print][view plain][?][view plain]

1.  <table id="tt" class="easyui-treegrid" style="width:600px;height:400px"    
2.          data-options="url:'get\_data.php',idField:'id',treeField:'name'">    
3.      <thead>    
4.          <tr>    
5.              <th data-options="field:'name',width:180">Task Name</th>    
6.              <th data-options="field:'persons',width:60,align:'right'">Persons</th>    
7.              <th data-options="field:'begin',width:80">Begin Date</th>    
8.              <th data-options="field:'end',width:80">End Date</th>    
9.          </tr>    
10.     </thead>    
11. </table>

用javascript生成treegrid

**\[html\]** [view plain][][copy][view plain][print][view plain][?][view plain]

1.  <table id="tt" style="width:600px;height:400px"></table>

**\[javascript\]** [view plain][][copy][view plain][print][view plain][?][view plain]

1.  $('\#tt').treegrid(\{    
2.      url:'get\_data.php',    
3.      idField:'id',    
4.      treeField:'name',    
5.      columns:\[\[    
6.          \{title:'Task Name',field:'name',width:180\},    
7.          \{field:'persons',title:'Persons',width:60,align:'right'\},    
8.          \{field:'begin',title:'Begin Date',width:80\},    
9.          \{field:'end',title:'End Date',width:80\}    
10.     \]\]    
11. \});

属性

属性扩展自datagrid, 下面是为treegrid新增的属性：

<table> 
 <tbody> 
  <tr> 
   <th>名称</th> 
   <th>类型</th> 
   <th>描述</th> 
   <th>缺省值</th> 
  </tr> 
  <tr> 
   <td>idField</td> 
   <td>string</td> 
   <td>树节点的key值。必需.</td> 
   <td>null</td> 
  </tr> 
  <tr> 
   <td>treeField</td> 
   <td>string</td> 
   <td>树节点值. 必需.</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> <p>定义怎样从远程服务器装载数据. return false 退出这个操作. 函数包括以下参数:<br> param: 传递给远程服务器的参数对象.<br> success(data): 查询数据成功后，会调用这个回调函数.<br> error(): 查询数据失败后，会调用这个回调函数.</p> </td> 
   <td>json loader</td> 
  </tr> 
  <tr> 
   <td>loadFilter</td> 
   <td>function(data,parentId)</td> 
   <td>返回过滤后的数据.</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

事件

事件扩展自datagrid, 下面是为treegrid新增的事件：

<table> 
 <tbody> 
  <tr> 
   <th>名称</th> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>onClickRow</td> 
   <td>row</td> 
   <td>用户点击节点时触发.</td> 
  </tr> 
  <tr> 
   <td>onDblClickRow</td> 
   <td>row</td> 
   <td>用户双击节点时触发.</td> 
  </tr> 
  <tr> 
   <td>onClickCell</td> 
   <td>field,row</td> 
   <td>用户点击单元格时触发.</td> 
  </tr> 
  <tr> 
   <td>onDblClickCell</td> 
   <td>field,row</td> 
   <td>用户双击单元格时触发.</td> 
  </tr> 
  <tr> 
   <td>onBeforeLoad</td> 
   <td>row, param</td> 
   <td>数据请求前触发, return false 删除请求动作.</td> 
  </tr> 
  <tr> 
   <td>onLoadSuccess</td> 
   <td>row, data</td> 
   <td>数据加载成功时触发.</td> 
  </tr> 
  <tr> 
   <td>onLoadError</td> 
   <td>arguments</td> 
   <td>数据加载失败时触发, 参数 arguments 与jQuery.ajax 的 'error' 函数相同 .</td> 
  </tr> 
  <tr> 
   <td>onBeforeExpand</td> 
   <td>row</td> 
   <td>节点展开前触发, return false 删除展开动作.</td> 
  </tr> 
  <tr> 
   <td>onExpand</td> 
   <td>row</td> 
   <td>节点展开后触发.</td> 
  </tr> 
  <tr> 
   <td>onBeforeCollapse</td> 
   <td>row</td> 
   <td>节点收敛前触发, return false 删除收敛动作.</td> 
  </tr> 
  <tr> 
   <td>onCollapse</td> 
   <td>row</td> 
   <td>节点收敛后触发.</td> 
  </tr> 
  <tr> 
   <td>onContextMenu</td> 
   <td>e, row</td> 
   <td>节点右击时触发.</td> 
  </tr> 
  <tr> 
   <td>onBeforeEdit</td> 
   <td>row</td> 
   <td>用户开始编辑节点时触发.</td> 
  </tr> 
  <tr> 
   <td>onAfterEdit</td> 
   <td>row,changes</td> 
   <td>用户完成编辑节点后触发.</td> 
  </tr> 
  <tr> 
   <td>onCancelEdit</td> 
   <td>row</td> 
   <td>用户放弃编辑节点时触发.</td> 
  </tr> 
 </tbody> 
</table>

方法

许多方法有"id"这个参数，这个参数指的是tree节点的value值

<table> 
 <tbody> 
  <tr> 
   <th>名称</th> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>options</td> 
   <td>none</td> 
   <td>返回treegrid的可选项.</td> 
  </tr> 
  <tr> 
   <td>resize</td> 
   <td>options</td> 
   <td>设置treegrid 的大小, 选项包括两个属性:<br> width: treegrid新的宽度.<br> height: treegrid新的高度.</td> 
  </tr> 
  <tr> 
   <td>fixRowHeight</td> 
   <td>id</td> 
   <td>固定指定的行高.</td> 
  </tr> 
  <tr> 
   <td>loadData</td> 
   <td>data</td> 
   <td>加载treegrid 数据.</td> 
  </tr> 
  <tr> 
   <td>reload</td> 
   <td>id</td> 
   <td>重新加载treegrid 数据. 如果传递了参数 'id', 加载指定的行, 否则加载所有的行. <p>Code example:</p> <p><strong>[html]</strong>&nbsp;<a href="https://www.cnblogs.com/dqsweet/archive/2013/04/11/4927735.html#" rel="nofollow">view plain</a><a href="https://www.cnblogs.com/dqsweet/archive/2013/04/11/4927735.html#" rel="nofollow">copy</a><a href="https://www.cnblogs.com/dqsweet/archive/2013/04/11/4927735.html#" rel="nofollow">print</a><a href="https://www.cnblogs.com/dqsweet/archive/2013/04/11/4927735.html#" rel="nofollow">?</a></p> 
    <ol> 
     <li>$('#tt').treegrid('reload',&nbsp;2);&nbsp;//&nbsp;重新加载&nbsp;value&nbsp;等于&nbsp;2&nbsp;的行&nbsp;&nbsp;&nbsp;&nbsp;</li> 
     <li>$('#tt').treegrid('reload');&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;重新加载所有的行&nbsp;&nbsp;</li> 
    </ol></td> 
  </tr> 
  <tr> 
   <td>reloadFooter</td> 
   <td>footer</td> 
   <td>重新加载 footer 数据.</td> 
  </tr> 
  <tr> 
   <td>getData</td> 
   <td>none</td> 
   <td>获取加载的数据.</td> 
  </tr> 
  <tr> 
   <td>getFooterRows</td> 
   <td>none</td> 
   <td>获取footer 数据.</td> 
  </tr> 
  <tr> 
   <td>getRoot</td> 
   <td>none</td> 
   <td>获取根节点, 返回node对象</td> 
  </tr> 
  <tr> 
   <td>getRoots</td> 
   <td>none</td> 
   <td>获取所有根节点, 返回node列表.</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>获取指定节点的level层级.</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> <p>附加节点到父节点. 参数'param'包括下列属性 :<br> parent: 父节点id, 如果没有指定, 附加为根节点.<br> data: 节点数据列表.</p> <p><br> Code example:</p> <p><strong>[html]</strong>&nbsp;<a href="https://www.cnblogs.com/dqsweet/archive/2013/04/11/4927735.html#" rel="nofollow">view plain</a><a href="https://www.cnblogs.com/dqsweet/archive/2013/04/11/4927735.html#" rel="nofollow">copy</a><a href="https://www.cnblogs.com/dqsweet/archive/2013/04/11/4927735.html#" rel="nofollow">print</a><a href="https://www.cnblogs.com/dqsweet/archive/2013/04/11/4927735.html#" rel="nofollow">?</a></p> 
    <ol> 
     <li>//&nbsp;append&nbsp;some&nbsp;nodes&nbsp;to&nbsp;the&nbsp;selected&nbsp;row&nbsp;&nbsp;&nbsp;&nbsp;</li> 
     <li>&nbsp;&nbsp;var&nbsp;node&nbsp;=&nbsp;$('#tt').treegrid('getSelected');&nbsp;&nbsp;&nbsp;&nbsp;</li> 
     <li>&nbsp;&nbsp;$('#tt').treegrid('append',{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li> 
     <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parent:&nbsp;node.id,&nbsp;&nbsp;//&nbsp;节点有一个‘id'值，通过&nbsp;'idField'属性指定&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li> 
     <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data:&nbsp;[{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li> 
     <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id:&nbsp;'073',&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li> 
     <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name:&nbsp;'name73'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li> 
     <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}]&nbsp;&nbsp;&nbsp;</li> 
     <li>&nbsp;});&nbsp;&nbsp;&nbsp;&nbsp;</li> 
    </ol></td> 
  </tr> 
  <tr> 
   <td>insert</td> 
   <td>param</td> 
   <td>插入新节点到指定的节点. 参数'param'包括下列属性 :<br> before: 插入节点之前的节点id.<br> after: 插入节点之后的节点id.<br> data: 新的节点数据. <p>Code example:</p> <p><strong>[html]</strong>&nbsp;<a href="https://www.cnblogs.com/dqsweet/archive/2013/04/11/4927735.html#" rel="nofollow">view plain</a><a href="https://www.cnblogs.com/dqsweet/archive/2013/04/11/4927735.html#" rel="nofollow">copy</a><a href="https://www.cnblogs.com/dqsweet/archive/2013/04/11/4927735.html#" rel="nofollow">print</a><a href="https://www.cnblogs.com/dqsweet/archive/2013/04/11/4927735.html#" rel="nofollow">?</a></p> 
    <ol> 
     <li>//&nbsp;insert&nbsp;a&nbsp;new&nbsp;node&nbsp;before&nbsp;the&nbsp;selected&nbsp;node&nbsp;&nbsp;&nbsp;&nbsp;</li> 
     <li>&nbsp;&nbsp;var&nbsp;node&nbsp;=&nbsp;$('#tt').treegrid('getSelected');&nbsp;&nbsp;&nbsp;&nbsp;</li> 
     <li>&nbsp;&nbsp;if&nbsp;(node){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li> 
     <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('#tt').treegrid('insert',&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li> 
     <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;before:&nbsp;node.id,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li> 
     <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data:&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li> 
     <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id:&nbsp;38,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li> 
     <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name:&nbsp;'name38'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li> 
     <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;</li> 
     <li>&nbsp;&nbsp;&nbsp;&nbsp;});&nbsp;&nbsp;&nbsp;&nbsp;</li> 
     <li>}&nbsp;&nbsp;&nbsp;&nbsp;</li> 
    </ol> 该功能在版本 1.3.1 之后可用.</td> 
  </tr> 
  <tr> 
   <td>remove</td> 
   <td>id</td> 
   <td>移除一个节点和它的子节点.</td> 
  </tr> 
  <tr> 
   <td>pop</td> 
   <td>id</td> 
   <td> <p>移除并返回一个节点和它的子节点.</p> <p>该功能在版本 1.3.1 之后可用.</p> </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>Code example:</p> <p><strong>[html]</strong>&nbsp;<a href="https://www.cnblogs.com/dqsweet/archive/2013/04/11/4927735.html#" rel="nofollow">view plain</a><a href="https://www.cnblogs.com/dqsweet/archive/2013/04/11/4927735.html#" rel="nofollow">copy</a><a href="https://www.cnblogs.com/dqsweet/archive/2013/04/11/4927735.html#" rel="nofollow">print</a><a href="https://www.cnblogs.com/dqsweet/archive/2013/04/11/4927735.html#" rel="nofollow">?</a></p> 
    <ol> 
     <li>&nbsp;&nbsp;$('#tt').treegrid('update',{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li> 
     <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id:&nbsp;2,&nbsp;&nbsp;&nbsp;&nbsp;</li> 
     <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;row:&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li> 
     <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name:&nbsp;'new&nbsp;name',&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li> 
     <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;iconCls:&nbsp;'icon-save'&nbsp;&nbsp;&nbsp;&nbsp;</li> 
     <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;</li> 
     <li>});&nbsp;&nbsp;&nbsp;&nbsp;</li> 
    </ol> 该功能在版本 1.3.1 之后可用.</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: 编辑器可以做的actions.<br> target: 目标编辑器的 jQuery 对象.<br> field: field的名称.<br> type: 编辑器的类型.</td> 
  </tr> 
  <tr> 
   <td>getEditor</td> 
   <td>param</td> 
   <td>获取指定的编辑器, param 包括两种属性:<br> id: 行节点id.<br> field: field 名称.</td> 
  </tr> 
 </tbody> 
</table>

[treegrid2.png]: /images/20220321/02f1f269302d48e79921b5bc3ff300d3.png
[view plain]: https://www.cnblogs.com/dqsweet/archive/2013/04/11/4927735.html#