treeGrid 的使用（ EasyUI ）

桃扇骨 2021-11-14 10:58 379阅读 0赞

# treeGrid 的使用经历 #

第一次用有点方。还是一样先上代码

<table id="bom" class="easyui-treegrid" title="" style="width: auto; height: auto;" 
    		
    			data-options="
    				iconCls: 'icon-ok',
    				rownumbers: true,
    				animate: true,
    				collapsible: false,
    				fitColumns: true,
    				url: '${ctx }/bom/getBom.do',
    				method: 'get',
    				idField: 'id',
    				treeField: 'level'
    			">
    		<thead>
    			<tr>
    				<th data-options="field:'level'" width="100">级别</th>
    				<th data-options="field:'productNo'" width="80">生产订单号</th>
    				<th data-options="field:'number'" width="150">物料代码</th>
    				<th data-options="field:'name'" width="100">物料名称</th>
    				<th data-options="field:'model'" width="500">规格型号</th>
    				<th data-options="field:'unit'" width="50" align="center">单位</th>
    				<th data-options="field:'dosage'" width="50" align="center">用量</th>
    				<th data-options="field:'loss'" width="50" align="center">损耗</th>
    			</tr>
    		</thead>
    	</table>

这是我在做个项目的时候写的，看不懂就对了，继续~~实体类~~

package com.alone.model;
    
    import java.util.List;
    
    public class OrderBomAttach {
    
        private String level;
        private String pruductNo;
        private String number;
        private String name;
        private String model;
        private String unit;
        private Double dosage;
        private Double loss;
        private List<OrderBomAttach> children;
    
      
    }

省略了一些get、set方法，我这后台返回的是一个类似json数据的List集合。

// 切换数据库
            CustomerContextHolder.setCustomerType("mssqlDataSource");
            // 获取订单信息
            List<Bom> orderBoms = orderBomService.getBomAttached(billNo, number, name);
            // 二维数组转树形
            List<Bom> nodeList = new ArrayList<Bom>();
            for (Bom ob : orderBoms) {
                boolean mark = false;
                for (OrderBomAttach ob2 : orderBoms) {
                    if (ob.get_parentId() != null && ob.get_parentId().equals(ob2.getId())) {
                        mark = true;
                        if (ob2.getChildren() == null) {
                            ob2.setChildren(new ArrayList<Bom>());
                            ob2.getChildren().add(ob);
                            break;
                        }
                    }
                }
                if (!mark) {
                    nodeList.add(ob);
                }
            }
            CustomerContextHolder.clearCustomerType();
            return nodeList;

这里，我是参照了网友的代码进行设计的，这个方法可以实现树形的效果，拼接成类似以下的json格式

[{
    	"id":1,
    	"name":"C",
    	"size":"",
    	"date":"02/19/2010",
    	"children":[{
    		"id":2,
    		"name":"Program Files",
    		"size":"120 MB",
    		"date":"03/20/2010",
    		"children":[{
    			"id":21,
    			"name":"Java",
    			"size":"",
    			"date":"01/13/2010",
    			"state":"closed",
    			"children":[{
    				"id":211,
    				"name":"java.exe",
    				"size":"142 KB",
    				"date":"01/13/2010"
    			},{
    				"id":212,
    				"name":"jawt.dll",
    				"size":"5 KB",
    				"date":"01/13/2010"
    			}]
    		},{
    			"id":22,
    			"name":"MySQL",
    			"size":"",
    			"date":"01/13/2010",
    			"state":"closed",
    			"children":[{
    				"id":221,
    				"name":"my.ini",
    				"size":"10 KB",
    				"date":"02/26/2009"
    			},{
    				"id":222,
    				"name":"my-huge.ini",
    				"size":"5 KB",
    				"date":"02/26/2009"
    			},{
    				"id":223,
    				"name":"my-large.ini",
    				"size":"5 KB",
    				"date":"02/26/2009"
    			}]
    		}]
    	}]
    }]

对我来说比较好理解，就是在实体类中放一个children，类型为List<Bom>（就是该实体类的List集合），然后去进行拼接。

EasyUI其实官方就有提供另一种比较简单的实现方法，直接用id、和\_parentId，前端就能自动识别排列树形结构。类似这个：

{"total":7,"rows":[
    	{"id":1,"name":"All Tasks","begin":"3/4/2010","end":"3/20/2010","progress":60,"iconCls":"icon-ok"},
    	{"id":2,"name":"Designing","begin":"3/4/2010","end":"3/10/2010","progress":100,"_parentId":1,"state":"closed"},
    	{"id":21,"name":"Database","persons":2,"begin":"3/4/2010","end":"3/6/2010","progress":100,"_parentId":2},
    	{"id":22,"name":"UML","persons":1,"begin":"3/7/2010","end":"3/8/2010","progress":100,"_parentId":2},
    	{"id":23,"name":"Export Document","persons":1,"begin":"3/9/2010","end":"3/10/2010","progress":100,"_parentId":2},
    	{"id":3,"name":"Coding","persons":2,"begin":"3/11/2010","end":"3/18/2010","progress":80},
    	{"id":4,"name":"Testing","persons":1,"begin":"3/19/2010","end":"3/20/2010","progress":20}
    ],"footer":[
    	{"name":"Total Persons:","persons":7,"iconCls":"icon-sum"}
    ]}

**需要注意的是，【rows】这个东西一定要加，否则识别无效**，将设好id和\_parentId的List集合放入Map里返回即可。

// 切换数据库
            CustomerContextHolder.setCustomerType("mssqlDataSource");
            // 获取订单信息
            List<OrderBomAttach> orderBoms = orderBomService.getBomAttached(billNo, fnumber, fname, fsupplier, flevel);
            CustomerContextHolder.clearCustomerType();
            Map<String, Object> map = new HashMap<String, Object>();
            map.put("rows", orderBoms);
            return map;

total和footer看个人需求，效果图如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fsb25lX2luXw_size_16_color_FFFFFF_t_70][]

总结：两种方法各有所长，运用还是要看实际情况来进行选择。我在项目里用的是第一种，因为逻辑较多（需要根据条件去操作数据），用第一种可以省去很多处理数据的麻烦事。

**记录一：**Treegrid查询功能的实现。

开始使用EasyUI的TreeGrid的loadData 加载url的方式不能实现查询功能，查看了网友的代码，于是利用异步AJAX查询了一下数据返回后，赋值给变量，然后利用TreeGrid的loadData加载这个json格式的返回结果实现了对TreeGrid的查询功能，代码如下：

**记录二：feozenColumns的使用**

分两种情况，（1）在HTML中

<thead frozen="true">  
            <tr>  
                <th field="itemid" width="80">Item ID</th>  
                <th field="productid" width="80">Product ID</th>  
            </tr>  
        </thead>

（2）在js中

frozenColumns: [ [/*
    	此处省略n列
    	*/ {
    		width: '80',
    		title: '分级层次',
    		field: 'level',
    		formatter: function (value) {
    			return addTitle(value);
    		}
    	},{
    		width : '100',
    		title : '订单号',
    		field : 'billNo',
    		formatter : function(value){
    			return addTitle(value);
    		}
    	}]],

现在是不是一脸懵逼啊，带着诸多疑问，参考EasyUI给的API和小案例去理解就会恍然大悟啦！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fsb25lX2luXw_size_16_color_FFFFFF_t_70 1][]

# 官方API资料： #

**属性**

树形表格扩展自datagrid(数据表格)，树形表格新增的属性如下：

<table> 
 <tbody> 
  <tr> 
   <th style="border-color:#eeeeee;text-align:left;vertical-align:top;"><strong>属性名</strong></th> 
   <th style="border-color:#eeeeee;text-align:left;vertical-align:top;"><strong>属性值类型</strong></th> 
   <th style="border-color:#eeeeee;text-align:left;vertical-align:top;"><strong>描述</strong></th> 
   <th style="border-color:#eeeeee;text-align:left;vertical-align:top;"><strong>默认值</strong></th> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">idField</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">string</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">定义关键字段来标识树节点。<strong><span style="color:#ff0000;">（必须的）</span></strong></td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">null</td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">treeField</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">string</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">定义树节点字段。<strong><span style="color:#ff0000;">（必须的）</span></strong></td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">null</td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">animate</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">boolean</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">定义在节点展开或折叠的时候是否显示动画效果。</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">false</td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">checkbox</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">boolean,function</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;"> <p style="margin-left:0px;">定义在每一个节点前显示复选框，也可以指定一个函数来动态指定是否显示复选框，但函数返回true的时候则显示，否则不显示。<strong><span style="color:#ff0000;">（该属性自1.4.5版开始可用）</span></strong></p> <p style="margin-left:0px;">代码示例：</p> <pre style="margin-left:0px;"><code>$('#tg').treegrid({
	checkbox: function(row){
		var names = ['Java','eclipse.exe','eclipse.ini'];
		if ($.inArray(row.name, names)&gt;=0){
			return true;
		}
	}
})
</code></pre> </td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">false</td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">cascadeCheck</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">boolean</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">定义是否级联检查。<strong><span style="color:#ff0000;">（该属性自1.4.5版开始可用）</span></strong></td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">true</td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">onlyLeafCheck</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">boolean</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">定义是否仅在叶子节点前显示复选框。<strong><span style="color:#ff0000;">（该属性自1.4.5版开始可用）</span></strong></td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">false</td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">lines</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">boolean</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">定义是否显示treegrid行。<strong><span style="color:#ff0000;">（该属性自1.4.5版开始可用）</span></strong></td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">false</td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">loader</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">function(param,success,error)</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">定义以何种方式从远程服务器读取数据。返回false可以忽略该动作。该函数具有一下参数：<br> param：传递到远程服务器的参数对象。<br> success(data)：当检索数据成功的时候调用的回调函数。<br> error()：当检索数据失败的时候调用的回调函数。</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">json loader</td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">loadFilter</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">function(data,parentId)</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">返回过滤后的数据进行展示。</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

**事件**

树形表格的事件扩展自datagrid(数据表格)，树形表格新增的时间如下：

<table> 
 <tbody> 
  <tr> 
   <th style="border-color:#eeeeee;text-align:left;vertical-align:top;"><strong>事件名</strong></th> 
   <th style="border-color:#eeeeee;text-align:left;vertical-align:top;"><strong>事件参数</strong></th> 
   <th style="border-color:#eeeeee;text-align:left;vertical-align:top;"><strong>描述</strong></th> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">onClickRow</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">row</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">在用户点击节点的时候触发。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">onDblClickRow</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">row</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">在用户双击节点的时候触发。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">onClickCell</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">field,row</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">在用户点击单元格的时候触发。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">onDblClickCell</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">field,row</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">在用户双击单元格的时候触发。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">onBeforeLoad</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">row, param</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">在请求数据加载之前触发，返回false可以取消加载动作。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">onLoadSuccess</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">row, data</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">数据加载完成之后触发。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">onLoadError</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">arguments</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">数据加载失败的时候触发，参数和jQuery的$.ajax()函数的'error'回调函数一样。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">onBeforeSelect</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">row</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">在用户选择一行之前触发，返回false则取消该动作。<strong><span style="color:#ff0000;">（该事件自1.4版开始可用）</span></strong></td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">onSelect</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">row</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">在用户选择的时候触发，返回false则取消该动作。<span style="color:#ff0000;"><strong>（该</strong><strong>事件</strong><strong>自1.4版开始可用）</strong></span></td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">onBeforeUnselect</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">row</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">在用户取消选择一行之前触发，返回false则取消该动作。<span style="color:#ff0000;"><strong>（该</strong><strong>事件</strong><strong>自1.4版开始可用）</strong></span></td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">onUnselect</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">row</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">在用户取消选择的时候触发，返回false则取消该动作。<span style="color:#ff0000;"><strong>（该</strong><strong>事件</strong><strong>自1.4版开始可用）</strong></span></td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">onBeforeCheckNode</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">row,checked</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">在用户选中一行节点之前触发，返回false则取消该动作。<span style="color:#ff0000;"><strong>（该</strong><strong>事件</strong><strong>自1.4.5版开始可用）</strong></span></td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">onCheckNode</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">row,checked</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">在用户选中一行节点的时候触发，返回false则取消该动作。<span style="color:#ff0000;"><strong>（该</strong><strong>事件</strong><strong>自1.4.5版开始可用）</strong></span></td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">onBeforeExpand</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">row</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">在节点展开之前触发，返回false可以取消展开节点的动作。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">onExpand</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">row</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">在节点被展开的时候触发。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">onBeforeCollapse</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">row</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">在节点折叠之前触发，返回false可以取消折叠节点的动作。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">onCollapse</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">row</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">在节点被折叠的时候触发。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">onContextMenu</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">e, row</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">在右键点击节点的时候触发。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">onBeforeEdit</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">row</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">在用户开始编辑节点的时候触发。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">onAfterEdit</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">row,changes</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">在用户完成编辑的时候触发。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">onCancelEdit</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">row</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">在用户取消编辑节点的时候触发。</td> 
  </tr> 
 </tbody> 
</table>

**方法**

很多方法都使用'id'命名参数，而'id'参数代表树节点的值。

<table> 
 <tbody> 
  <tr> 
   <th style="border-color:#eeeeee;text-align:left;vertical-align:top;"><strong>方法名</strong></th> 
   <th style="border-color:#eeeeee;text-align:left;vertical-align:top;"><strong>方法参数</strong></th> 
   <th style="border-color:#eeeeee;text-align:left;vertical-align:top;"><strong>描述</strong></th> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">options</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">none</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">返回树形表格的属性。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">resize</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">options</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">设置树形表格大小，options包含2个属性：<br> width：树形表格的新宽度。<br> height：树形表格的新高度。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">fixRowHeight</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">id</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">修正指定的行高。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">load</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">param</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">读取并显示首页内容。<strong><span style="color:#ff0000;">（该方法自1.3.4版开始可用）</span></strong>&nbsp; <p style="margin-left:0px;">代码示例：</p> <pre style="margin-left:0px;"><code>// 读取并发送请求参数
$('#tg').treegrid('load', {
	q: 'abc',
	name: 'name1'
});</code></pre> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">loadData</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">data</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">读取树形表格数据。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">reload</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">id</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">重新加载树形表格数据。如果'id'属性有值，将重新载入指定树形行，否则重新载入所有行。 <p style="margin-left:0px;">代码示例：</p> <pre style="margin-left:0px;"><code>$('#tt').treegrid('reload', 2);	// 重新载入值为2的行
$('#tt').treegrid('reload');	// 重新载入所有行</code></pre> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">reloadFooter</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">footer</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">重新载入页脚数据。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">getData</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">none</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">获取载入数据。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">getFooterRows</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">none</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">获取页脚数据。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">getRoot</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">none</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">获取根节点，返回节点对象。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">getRoots</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">none</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">获取所有根节点，返回节点数组。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">getParent</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">id</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">获取父节点。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">getChildren</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">id</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">获取子节点。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">getSelected</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">none</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">获取选择的节点并返回它，如果没有节点被选中则返回null。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">getSelections</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">none</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">获取所有选择的节点。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">getCheckedNodes</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">none</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">获取所有选中的行。<strong><span style="color:#ff0000;">（该方法自1.4.5版开始可用）</span></strong></td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">getLevel</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">id</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">获取指定节点等级。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">find</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">id</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">查找指定节点并返回节点数据。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">select</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">id</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">选择一个节点。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">unselect</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">id</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">反选一个节点。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">selectAll</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">none</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">选择所有节点。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">unselectAll</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">none</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">反选所有节点。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;"><span style="color:#444444;"><span style="color:#000000;">checkNode</span></span></td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">id</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">选中指定行节点。<strong><span style="color:#ff0000;">（该方法自1.4.5版开始可用）</span></strong></td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;"><span style="color:#444444;"><span style="color:#000000;">uncheckNode</span></span></td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">id</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">反选指定行节点。<strong><span style="color:#ff0000;">（该方法自1.4.5版开始可用）</span></strong></td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">collapse</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">id</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">折叠一个节点。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">expand</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">id</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">展开一个节点。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">collapseAll</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">id</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">折叠所有节点。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">expandAll</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">id</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">展开所有节点。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">expandTo</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">id</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">打开从根节点到指定节点之间的所有节点。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">toggle</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">id</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">节点展开/折叠状态触发器。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">append</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">param</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">追加节点到一个父节点，'param'参数包含如下属性：<br> parent：父节点ID，如果未指定则追加到根节点。<br> data：数组，节点数据。<br> 代码示例：&nbsp; <pre style="margin-left:0px;"><code>// 追加若干节点到选中节点的后面
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'
	}]
});
</code></pre> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">insert</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">param</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">插入一个新节点到指定节点。'param'参数包含一下参数：<br> before：插入指定节点ID值之前。<br> after：插入指定节点ID值之后。<br> data：新节点数据。 <p style="margin-left:0px;">代码示例：</p> <pre style="margin-left:0px;"><code>// 插入一个新节点到选择的节点之前
var node = $('#tt').treegrid('getSelected');
if (node){
	$('#tt').treegrid('insert', {
		before: node.id,
		data: {
			id: 38,
			name: 'name38'
		}
	});
}
</code></pre> <strong><span style="color:#ff0000;">（该方法自1.3.1版开始可用）</span></strong></td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">remove</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">id</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">移除一个节点和他的所有子节点。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">pop</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">id</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">弹出并返回节点数据以及它的子节点之后删除。<strong><span style="color:#ff0000;">（该方法自1.3.1版开始可用）</span></strong></td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">refresh</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">id</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">刷新指定节点。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">update</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">param</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">更新指定节点。'param'参数包含以下属性：<br> id：要更新的节点的ID。<br> row：新的行数据。 <p style="margin-left:0px;">代码示例：</p> <pre style="margin-left:0px;"><code>$('#tt').treegrid('update',{
	id: 2,
	row: {
		name: '新名称',
		iconCls: 'icon-save'
	}
});</code></pre> <strong><span style="color:#ff0000;">（该方法自1.3.1版开始可用）</span></strong></td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">beginEdit</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">id</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">开始编辑一个节点。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">endEdit</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">id</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">结束编辑一个节点。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">cancelEdit</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">id</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">取消编辑一个节点。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">getEditors</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">id</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">获取指定行编辑器。每个编辑器都包含以下属性：<br> actions：编辑器执行的动作。<br> target：目标编辑器的jQuery对象。<br> field：字段名称。<br> type：编辑器类型。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">getEditor</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">param</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">获取指定编辑器，'param'参数包含2个属性：<br> id：行节点ID。<br> field：字段名称。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">showLines</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">none</td> 
   <td style="border-color:#eeeeee;text-align:left;vertical-align:top;">显示treegrid行。</td> 
  </tr> 
 </tbody> 
</table>

看完这一堆东西或者一边看一边比对代码，就会恍然大悟了，运用起来会比较上手。有些暂时用不上可以略过，属性一定要看定定。

接下来是EasyUI里提供常用功能的小案例：

一、常用按钮

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8">
    	<title>TreeGrid Actions - jQuery EasyUI Demo</title>
    	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    	<link rel="stylesheet" type="text/css" href="../demo.css">
    	<script type="text/javascript" src="../../jquery.min.js"></script>
    	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
    </head>
    <body>
    	<h2>TreeGrid Actions</h2>
    	<p>Click the buttons below to perform actions.</p>
    	<div style="margin:20px 0;">
    		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="collapseAll()">CollapseAll</a>
    		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="expandAll()">ExpandAll</a>
    		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="expandTo()">ExpandTo</a>
    	</div>
    	<table id="tg" class="easyui-treegrid" title="TreeGrid Actions" style="width:700px;height:250px"
    			data-options="
    				iconCls: 'icon-ok',
    				rownumbers: true,
    				animate: true,
    				collapsible: true,
    				fitColumns: true,
    				url: 'treegrid_data2.json',
    				method: 'get',
    				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>
    				<th data-options="field:'progress',width:120,formatter:formatProgress">Progress</th>
    			</tr>
    		</thead>
    	</table>
    	<script type="text/javascript">
    		function formatProgress(value){
    	    	if (value){
    		    	var s = '<div style="width:100%;border:1px solid #ccc">' +
    		    			'<div style="width:' + value + '%;background:#cc0000;color:#fff">' + value + '%' + '</div>'
    		    			'</div>';
    		    	return s;
    	    	} else {
    		    	return '';
    	    	}
    		}
    		function collapseAll(){
    			$('#tg').treegrid('collapseAll');
    		}
    		function expandAll(){
    			$('#tg').treegrid('expandAll');
    		}
    		function expandTo(){
    			$('#tg').treegrid('expandTo',21).treegrid('select',21);
    		}
    	</script>
    </body>
    </html>

这个案例实现的是三个按钮【一键折叠】、【一键展开】和【选择默认选项】，如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fsb25lX2luXw_size_16_color_FFFFFF_t_70 2][]

二、 复选框

这个比较简单，就是添加了【checkbox: true】让树结构多了个复选框的样式，如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fsb25lX2luXw_size_16_color_FFFFFF_t_70 3][]

这个功能实现还是很方便的，但如果只需要某一行有复选框就要下点功夫了。

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8">
    	<title>Custom CheckBox in TreeGrid - jQuery EasyUI Demo</title>
    	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    	<link rel="stylesheet" type="text/css" href="../demo.css">
    	<script type="text/javascript" src="../../jquery.min.js"></script>
    	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
    </head>
    <body>
    	<h2>Custom CheckBox in TreeGrid</h2>
    	<p>TreeGrid nodes with customized check boxes.</p>
    	<div style="margin:20px 0;"></div>
    	<table title="Folder Browser" class="easyui-treegrid" style="width:700px;height:250px"
    			data-options="
    				url: 'treegrid_data1.json',
    				method: 'get',
    				rownumbers: true,
    				idField: 'id',
    				treeField: 'name',
    				checkbox: function(row){
    					var names = ['Java','eclipse.exe','eclipse.ini'];
    					if ($.inArray(row.name, names)>=0){
    						return true;
    					}
    				}
    			">
    		<thead>
    			<tr>
    				<th data-options="field:'name'" width="220">Name</th>
    				<th data-options="field:'size'" width="100" align="right">Size</th>
    				<th data-options="field:'date'" width="150">Modified Date</th>
    			</tr>
    		</thead>
    	</table>
    
    </body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fsb25lX2luXw_size_16_color_FFFFFF_t_70 4][]

三、分页功能

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8">
    	<title>Client Side Pagination in TreeGrid - jQuery EasyUI Demo</title>
    	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    	<link rel="stylesheet" type="text/css" href="../demo.css">
    	<script type="text/javascript" src="../../jquery.min.js"></script>
    	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
    </head>
    <body>
    	<h2>Client Side Pagination in TreeGrid</h2>
    	<p>This sample shows how to implement client side pagination in TreeGrid.</p>
    	<div style="margin:20px 0;"></div>
    	<table id="tg" title="Client Side Pagination" style="width:700px;height:250px"
    			data-options="
    				iconCls: 'icon-ok',
    				rownumbers: true,
    				animate: true,
    				collapsible: true,
    				fitColumns: true,
    				url: 'treegrid_data2.json',
    				method: 'get',
    				idField: 'id',
    				treeField: 'name',
    				pagination: true,
    				pageSize: 2,
    				pageList: [2,5,10]
    			">
    		<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>
    				<th data-options="field:'progress',width:120,formatter:formatProgress">Progress</th>
    			</tr>
    		</thead>
    	</table>
    	<script type="text/javascript">
    		(function($){
    			function pagerFilter(data){
    		        if ($.isArray(data)){    // is array  
    		            data = {  
    		                total: data.length,  
    		                rows: data  
    		            }  
    		        }
    		        var target = this;
    		        var tg = $(target);  
    				var state = tg.data('treegrid');
    		        var opts = tg.treegrid('options');  
    		        if (!state.allRows){
    		        	state.allRows = data.rows;
    		        }
    				if (!opts.remoteSort && opts.sortName){
    					var names = opts.sortName.split(',');
    					var orders = opts.sortOrder.split(',');
    					state.allRows.sort(function(r1,r2){
    						var r = 0;
    						for(var i=0; i<names.length; i++){
    							var sn = names[i];
    							var so = orders[i];
    							var col = $(target).treegrid('getColumnOption', sn);
    							var sortFunc = col.sorter || function(a,b){
    								return a==b ? 0 : (a>b?1:-1);
    							};
    							r = sortFunc(r1[sn], r2[sn]) * (so=='asc'?1:-1);
    							if (r != 0){
    								return r;
    							}
    						}
    						return r;
    					});
    				}
    		        var topRows = [];
    		        var childRows = [];
    		        $.map(state.allRows, function(row){
    		        	row._parentId ? childRows.push(row) : topRows.push(row);
    		        	row.children = null;
    		        });
    		        data.total = topRows.length;
    		        var pager = tg.treegrid('getPager');
    		        pager.pagination('refresh', {
    		        	total: data.total,
    		        	pageNumber: opts.pageNumber
    		        });
    		        opts.pageNumber = pager.pagination('options').pageNumber || 1;
    		        var start = (opts.pageNumber-1)*parseInt(opts.pageSize);  
    		        var end = start + parseInt(opts.pageSize);  
    				data.rows = topRows.slice(start, end).concat(childRows);
    				return data;
    			}
    
    			var appendMethod = $.fn.treegrid.methods.append;
    			var removeMethod = $.fn.treegrid.methods.remove;
    			var loadDataMethod = $.fn.treegrid.methods.loadData;
    			$.extend($.fn.treegrid.methods, {
    				clientPaging: function(jq){
    					return jq.each(function(){
    						var tg = $(this);
    						var state = tg.data('treegrid');
    						var opts = state.options;
    						opts.loadFilter = pagerFilter;
    						var onBeforeLoad = opts.onBeforeLoad;
    						opts.onBeforeLoad = function(row,param){
    							state.allRows = null;
    							return onBeforeLoad.call(this, row, param);
    						}
    						var pager = tg.treegrid('getPager');
    						pager.pagination({
    							onSelectPage:function(pageNum, pageSize){
    								opts.pageNumber = pageNum;
    								opts.pageSize = pageSize;
    								pager.pagination('refresh',{
    									pageNumber:pageNum,
    									pageSize:pageSize
    								});
    								tg.treegrid('loadData',state.allRows);
    							}
    						});
    						tg.treegrid('loadData', state.data);
    						if (opts.url){
    							tg.treegrid('reload');
    						}
    					});
    				},
    				loadData: function(jq, data){
    					jq.each(function(){
    						$(this).data('treegrid').allRows = null;
    					});
    					return loadDataMethod.call($.fn.treegrid.methods, jq, data);
    				},
    				append: function(jq, param){
    					return jq.each(function(){
    						var state = $(this).data('treegrid');
    						if (state.options.loadFilter == pagerFilter){
    							$.map(param.data, function(row){
    								row._parentId = row._parentId || param.parent;
    								state.allRows.push(row);
    							});
    							$(this).treegrid('loadData', state.allRows);
    						} else {
    							appendMethod.call($.fn.treegrid.methods, $(this), param);
    						}
    					})
    				},
    				remove: function(jq, id){
    					return jq.each(function(){
    						if ($(this).treegrid('find', id)){
    							removeMethod.call($.fn.treegrid.methods, $(this), id);
    						}
    						var state = $(this).data('treegrid');
    						if (state.options.loadFilter == pagerFilter){
    							for(var i=0; i<state.allRows.length; i++){
    								if (state.allRows[i][state.options.idField] == id){
    									state.allRows.splice(i,1);
    									break;
    								}
    							}
    							$(this).treegrid('loadData', state.allRows);
    						}
    					})
    				},
    				getAllRows: function(jq){
    					return jq.data('treegrid').allRows;
    				}
    			});
    
    		})(jQuery);
    
    		function formatProgress(value){
    	    	if (value){
    		    	var s = '<div style="width:100%;border:1px solid #ccc">' +
    		    			'<div style="width:' + value + '%;background:#cc0000;color:#fff">' + value + '%' + '</div>'
    		    			'</div>';
    		    	return s;
    	    	} else {
    		    	return '';
    	    	}
    		}
    		
    		$(function(){
    			$('#tg').treegrid().treegrid('clientPaging');
    		})
    	</script>
    </body>
    </html>

官方给出的代码，我也是费了一点时间才理解。不过我GET到了。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fsb25lX2luXw_size_16_color_FFFFFF_t_70 5][]

四、右键操作菜单

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8">
    	<title>TreeGrid ContextMenu - jQuery EasyUI Demo</title>
    	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    	<link rel="stylesheet" type="text/css" href="../demo.css">
    	<script type="text/javascript" src="../../jquery.min.js"></script>
    	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
    </head>
    <body>
    	<h2>TreeGrid ContextMenu</h2>
    	<p>Right click to display the context menu.</p>
    	<div style="margin:20px 0;"></div>
    	<table id="tg" class="easyui-treegrid" title="TreeGrid ContextMenu" style="width:700px;height:250px"
    			data-options="
    				iconCls: 'icon-ok',
    				rownumbers: true,
    				animate: true,
    				collapsible: true,
    				fitColumns: true,
    				url: 'treegrid_data2.json',
    				method: 'get',
    				idField: 'id',
    				treeField: 'name',
    				onContextMenu: onContextMenu
    			">
    		<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>
    				<th data-options="field:'progress',width:120,formatter:formatProgress">Progress</th>
    			</tr>
    		</thead>
    	</table>
    	<div id="mm" class="easyui-menu" style="width:120px;">
    		<div onclick="append()" data-options="iconCls:'icon-add'">Append</div>
    		<div onclick="removeIt()" data-options="iconCls:'icon-remove'">Remove</div>
    		<div class="menu-sep"></div>
    		<div onclick="collapse()">Collapse</div>
    		<div onclick="expand()">Expand</div>
    	</div>
    	<script type="text/javascript">
    		function formatProgress(value){
    	    	if (value){
    		    	var s = '<div style="width:100%;border:1px solid #ccc">' +
    		    			'<div style="width:' + value + '%;background:#cc0000;color:#fff">' + value + '%' + '</div>'
    		    			'</div>';
    		    	return s;
    	    	} else {
    		    	return '';
    	    	}
    		}
    		function onContextMenu(e,row){
    			if (row){
    				e.preventDefault();
    				$(this).treegrid('select', row.id);
    				$('#mm').menu('show',{
    					left: e.pageX,
    					top: e.pageY
    				});				
    			}
    		}
    		var idIndex = 100;
    		function append(){
    			idIndex++;
    			var d1 = new Date();
    			var d2 = new Date();
    			d2.setMonth(d2.getMonth()+1);
    			var node = $('#tg').treegrid('getSelected');
    			$('#tg').treegrid('append',{
    				parent: node.id,
    				data: [{
    					id: idIndex,
    					name: 'New Task'+idIndex,
    					persons: parseInt(Math.random()*10),
    					begin: $.fn.datebox.defaults.formatter(d1),
    					end: $.fn.datebox.defaults.formatter(d2),
    					progress: parseInt(Math.random()*100)
    				}]
    			})
    		}
    		function removeIt(){
    			var node = $('#tg').treegrid('getSelected');
    			if (node){
    				$('#tg').treegrid('remove', node.id);
    			}
    		}
    		function collapse(){
    			var node = $('#tg').treegrid('getSelected');
    			if (node){
    				$('#tg').treegrid('collapse', node.id);
    			}
    		}
    		function expand(){
    			var node = $('#tg').treegrid('getSelected');
    			if (node){
    				$('#tg').treegrid('expand', node.id);
    			}
    		}
    	</script>
    </body>
    </html>

![20190801101723799.png][]右键就会出现这个操作菜单啦。

五、树表格数据的编辑操作

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8">
    	<title>Editable TreeGrid - jQuery EasyUI Demo</title>
    	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    	<link rel="stylesheet" type="text/css" href="../demo.css">
    	<script type="text/javascript" src="../../jquery.min.js"></script>
    	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
    </head>
    <body>
    	<h2>Editable TreeGrid</h2>
    	<p>Select one node and click edit button to perform editing.</p>
    	<div style="margin:20px 0;">
    		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="edit()">Edit</a>
    		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="save()">Save</a>
    		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="cancel()">Cancel</a>
    	</div>
    	<table id="tg" class="easyui-treegrid" title="Editable TreeGrid" style="width:700px;height:250px"
    			data-options="
    				iconCls: 'icon-ok',
    				rownumbers: true,
    				animate: true,
    				collapsible: true,
    				fitColumns: true,
    				url: 'treegrid_data2.json',
    				method: 'get',
    				idField: 'id',
    				treeField: 'name',
    				showFooter: true
    			">
    		<thead>
    			<tr>
    				<th data-options="field:'name',width:180,editor:'text'">Task Name</th>
    				<th data-options="field:'persons',width:60,align:'right',editor:'numberbox'">Persons</th>
    				<th data-options="field:'begin',width:80,editor:'datebox'">Begin Date</th>
    				<th data-options="field:'end',width:80,editor:'datebox'">End Date</th>
    				<th data-options="field:'progress',width:120,formatter:formatProgress,editor:'numberbox'">Progress</th>
    			</tr>
    		</thead>
    	</table>
    	<script type="text/javascript">
    		function formatProgress(value){
    	    	if (value){
    		    	var s = '<div style="width:100%;border:1px solid #ccc">' +
    		    			'<div style="width:' + value + '%;background:#cc0000;color:#fff">' + value + '%' + '</div>'
    		    			'</div>';
    		    	return s;
    	    	} else {
    		    	return '';
    	    	}
    		}
    		var editingId;
    		function edit(){
    			if (editingId != undefined){
    				$('#tg').treegrid('select', editingId);
    				return;
    			}
    			var row = $('#tg').treegrid('getSelected');
    			if (row){
    				editingId = row.id
    				$('#tg').treegrid('beginEdit', editingId);
    			}
    		}
    		function save(){
    			if (editingId != undefined){
    				var t = $('#tg');
    				t.treegrid('endEdit', editingId);
    				editingId = undefined;
    				var persons = 0;
    				var rows = t.treegrid('getChildren');
    				for(var i=0; i<rows.length; i++){
    					var p = parseInt(rows[i].persons);
    					if (!isNaN(p)){
    						persons += p;
    					}
    				}
    				var frow = t.treegrid('getFooterRows')[0];
    				frow.persons = persons;
    				t.treegrid('reloadFooter');
    			}
    		}
    		function cancel(){
    			if (editingId != undefined){
    				$('#tg').treegrid('cancelEdit', editingId);
    				editingId = undefined;
    			}
    		}
    	</script>
    
    </body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fsb25lX2luXw_size_16_color_FFFFFF_t_70 6][]

六、页脚统计

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8">
    	<title>TreeGrid with Footer - jQuery EasyUI Demo</title>
    	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    	<link rel="stylesheet" type="text/css" href="../demo.css">
    	<script type="text/javascript" src="../../jquery.min.js"></script>
    	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
    </head>
    <body>
    	<h2>TreeGrid with Footer</h2>
    	<p>Show summary information on TreeGrid footer.</p>
    	<div style="margin:20px 0;"></div>
    	<table id="tg"></table>
    	<script type="text/javascript">
    		$(function(){
    			$('#tg').treegrid({
    				title:'TreeGrid with Footer',
    				iconCls:'icon-ok',
    				width:700,
    				height:250,
    				rownumbers: true,
    				animate:true,
    				collapsible:true,
    				fitColumns:true,
    				url:'treegrid_data2.json',
    				method: 'get',
    				idField:'id',
    				treeField:'name',
    				showFooter:true,
    				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},
    					{field:'progress',title:'Progress',width:120,
    					    formatter:function(value){
    					    	if (value){
    						    	var s = '<div style="width:100%;border:1px solid #ccc">' +
    						    			'<div style="width:' + value + '%;background:#cc0000;color:#fff">' + value + '%' + '</div>'
    						    			'</div>';
    						    	return s;
    					    	} else {
    						    	return '';
    					    	}
    				    	}
    					}
    				]]
    			});
    		})
    	</script>
    </body>
    </html>

这个代码还是很有参考价值的，直接用javascript去实现。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fsb25lX2luXw_size_16_color_FFFFFF_t_70 7][]

七、显示树网络的线

data-options="
    		url: 'treegrid_data1.json',
    		method: 'get',
    		lines: true,
    		rownumbers: true,
    		idField: 'id',
    		treeField: 'name'
    	">

这个容易，添加了个【lines：true】而已。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fsb25lX2luXw_size_16_color_FFFFFF_t_70 8][]

# 个人总结 #

1、看案例建议自己去搭个EasyUI环境去测试的好，这样理解起来更简单。案例的代码在easyui的包里就有，路径是easyui==>demo==>treegrid。

2、有人问我为什么老是放那么多庸余的代码，我个人的话是比较喜欢这样子的，对于我这个小白来说，整页代码能给我一些信心，有信心是能看懂的，所以我的博客都是这样的啦。不喜勿喷，别看就好，毕竟我也不是求你们看。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fsb25lX2luXw_size_16_color_FFFFFF_t_70]: /images/20211114/0b00de44041a475c80618f9ce3753f20.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fsb25lX2luXw_size_16_color_FFFFFF_t_70 1]: /images/20211114/6bffe68c128d45deab1cc644871dda19.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fsb25lX2luXw_size_16_color_FFFFFF_t_70 2]: /images/20211114/9bfb8f6aec5441199c5556181a5f2603.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fsb25lX2luXw_size_16_color_FFFFFF_t_70 3]: /images/20211114/81402339c11f47769709f9f03e4739fa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fsb25lX2luXw_size_16_color_FFFFFF_t_70 4]: /images/20211114/47b88e81c9084e20aa09a733cfaa2918.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fsb25lX2luXw_size_16_color_FFFFFF_t_70 5]: /images/20211114/e128da0ac118491a91b7ba99e04d3a86.png
[20190801101723799.png]: /images/20211114/707f70c7de674e56a6b2e2fe3aa17c19.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fsb25lX2luXw_size_16_color_FFFFFF_t_70 6]: /images/20211114/8105e13a9e8249819e3ea556af964829.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fsb25lX2luXw_size_16_color_FFFFFF_t_70 7]: /images/20211114/a83fa5294352498b81116c449c31dd4c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fsb25lX2luXw_size_16_color_FFFFFF_t_70 8]: /images/20211114/6259a4d20f184cac86e3ed56a1b6602b.png