treeGrid 详细参数

短命女 2023-05-22 11:29 5阅读 0赞

# treeGrid 详细参数 #

## treeGrid 详细参数 ##

一、html页面  
<table id="tg" class="easyui-treegridprive-table"  
         data-options="iconCls: 'icon-ok',rownumbers: true,animate:true,collapsible:true,fitColumns: true,url:'treegrid\_data2.json',method: 'get',  
             idField:'id',treeField: 'name',loadFilter: pagerFilter,  
             pagination:true, pageSize: 2,  onClickRow: clickTest,pageList: \[2,5,10\]  
         ">  
      <thead>  
         <tr>  
            <thdata-options="field:'name',width:20">TaskName</th>  
            <thdata-options="field:'persons',width:20,align:'right'">Persons</th>  
            <thdata-options="field:'begin',width:20">BeginDate</th>  
            <thdata-options="field:'end',width:10">EndDate</th>  
            <thdata-options="field:'progress',width:20,formatter:formatProgress">Progress</th>  
            <thdata-options="field:'id',width:10,formatter:formatOptions">操作</th>  
         </tr>  
      </thead>  
   </table>  
二、参数说明

### 其特性扩展自 datagrid，下列是为 treegrid 增加的特性。  ###

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>类型</th> 
   <th>说明</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <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> 
 </tbody> 
</table>

其事件扩展自 datagrid，下列是为 treegrid 增加的事件

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>参数</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>onClickRow</td> 
   <td>row</td> 
   <td>当用户点击一个节点时触发</td> 
  </tr> 
  <tr> 
   <td>onDblClickRow</td> 
   <td>row</td> 
   <td>当用户双击一个节点时触发</td> 
  </tr> 
  <tr> 
   <td>onBeforeLoad</td> 
   <td>row, param</td> 
   <td>发出一个加载数据的请求前触发，返回 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>节点展开前触发，返回 false 就取消展开动作</td> 
  </tr> 
  <tr> 
   <td>onExpand</td> 
   <td>row</td> 
   <td>节点展开前触发</td> 
  </tr> 
  <tr> 
   <td>onBeforeCollapse</td> 
   <td>row</td> 
   <td>节点折叠前触发，返回 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>

**方法**

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>参数</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>options</td> 
   <td>none</td> 
   <td>返回 treegrid 的options</td> 
  </tr> 
  <tr> 
   <td>resize</td> 
   <td>options</td> 
   <td>设置 treegrid 的尺寸， options 参数包含两个特性：<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 的数据</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：DOM 对象，追加到的父节点，如果没有分配，则追加为根节点。<br> data：数组，节点们的数据</td> 
  </tr> 
  <tr> 
   <td>remove</td> 
   <td>id</td> 
   <td>移除节点和它的子节点们</td> 
  </tr> 
  <tr> 
   <td>refresh</td> 
   <td>id</td> 
   <td>刷新指定的节点</td> 
  </tr> 
  <tr> 
   <td>endEdit</td> 
   <td>id</td> 
   <td>结束编辑节点</td> 
  </tr> 
  <tr> 
   <td>beginEdit</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>options</td> 
   <td>获取指定的编辑器， options 参数包含两个特性：<br> id：行节点的 id。(注意：如不生效使用index：id，目前官网文档错误，虽然取id的值，但要用index属性)<br> field：字段名<br> 操作：var t = $('#tg');<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var ed = t.treegrid('getEditor',{index:editingIndex,field:"name"});<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var val=$(ed.target).val();</td> 
  </tr> 
 </tbody> 
</table>

三、部分js  
// 动态加载查询  
    functiontestm()\{  
      $.post('treegrid\_data3.json',\{id:123\},function(data)\{  
        $('\#tg').treegrid('loadData',data);  
      \},'json');  
    \}  
     
   //设置页面分页  
    functionpagerFilter(data)\{  
         //alert(data);  
          if($.isArray(data))\{   // is array   
              data = \{   
                  total: 5,//data.length,