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看个人需求，效果图如下：
总结：两种方法各有所长，运用还是要看实际情况来进行选择。我在项目里用的是第一种，因为逻辑较多（需要根据条件去操作数据），用第一种可以省去很多处理数据的麻烦事。
记录一：Treegrid查询功能的实现。
开始使用EasyUI的TreeGrid的loadData 加载url的方式不能实现查询功能，查看了网友的代码，于是利用异步AJAX查询了一下数据返回后，赋值给变量，然后利用TreeGrid的loadData加载这个json格式的返回结果实现了对TreeGrid的查询功能，代码如下：
function searchBOM() {var fStatus : $("#FStatus").combobox('getValue')var url = encodeURI('/bom/SearchBOM?fStatus =' + fStatus;$.post(url, {}, function(data) {var d = data;//返回json格式结果$('#grid').treegrid('loadData',d); //加载数据更新treegrid}, 'json');}记录二：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和小案例去理解就会恍然大悟啦！
官方API资料：
属性
树形表格扩展自datagrid(数据表格)，树形表格新增的属性如下：
| 属性名 | 属性值类型 | 描述 | 默认值 |
|---|---|---|---|
| idField | string | 定义关键字段来标识树节点。（必须的） | null |
| treeField | string | 定义树节点字段。（必须的） | null |
| animate | boolean | 定义在节点展开或折叠的时候是否显示动画效果。 | false |
| checkbox | boolean,function |
定义在每一个节点前显示复选框，也可以指定一个函数来动态指定是否显示复选框，但函数返回true的时候则显示，否则不显示。（该属性自1.4.5版开始可用） 代码示例： |
false |
| cascadeCheck | boolean | 定义是否级联检查。（该属性自1.4.5版开始可用） | true |
| onlyLeafCheck | boolean | 定义是否仅在叶子节点前显示复选框。（该属性自1.4.5版开始可用） | false |
| lines | boolean | 定义是否显示treegrid行。（该属性自1.4.5版开始可用） | false |
| loader | function(param,success,error) | 定义以何种方式从远程服务器读取数据。返回false可以忽略该动作。该函数具有一下参数： param：传递到远程服务器的参数对象。 success(data)：当检索数据成功的时候调用的回调函数。 error()：当检索数据失败的时候调用的回调函数。 |
json loader |
| loadFilter | function(data,parentId) | 返回过滤后的数据进行展示。 |
事件
树形表格的事件扩展自datagrid(数据表格)，树形表格新增的时间如下：
| 事件名 | 事件参数 | 描述 |
|---|---|---|
| onClickRow | row | 在用户点击节点的时候触发。 |
| onDblClickRow | row | 在用户双击节点的时候触发。 |
| onClickCell | field,row | 在用户点击单元格的时候触发。 |
| onDblClickCell | field,row | 在用户双击单元格的时候触发。 |
| onBeforeLoad | row, param | 在请求数据加载之前触发，返回false可以取消加载动作。 |
| onLoadSuccess | row, data | 数据加载完成之后触发。 |
| onLoadError | arguments | 数据加载失败的时候触发，参数和jQuery的$.ajax()函数的'error'回调函数一样。 |
| onBeforeSelect | row | 在用户选择一行之前触发，返回false则取消该动作。（该事件自1.4版开始可用） |
| onSelect | row | 在用户选择的时候触发，返回false则取消该动作。（该事件自1.4版开始可用） |
| onBeforeUnselect | row | 在用户取消选择一行之前触发，返回false则取消该动作。（该事件自1.4版开始可用） |
| onUnselect | row | 在用户取消选择的时候触发，返回false则取消该动作。（该事件自1.4版开始可用） |
| onBeforeCheckNode | row,checked | 在用户选中一行节点之前触发，返回false则取消该动作。（该事件自1.4.5版开始可用） |
| onCheckNode | row,checked | 在用户选中一行节点的时候触发，返回false则取消该动作。（该事件自1.4.5版开始可用） |
| onBeforeExpand | row | 在节点展开之前触发，返回false可以取消展开节点的动作。 |
| onExpand | row | 在节点被展开的时候触发。 |
| onBeforeCollapse | row | 在节点折叠之前触发，返回false可以取消折叠节点的动作。 |
| onCollapse | row | 在节点被折叠的时候触发。 |
| onContextMenu | e, row | 在右键点击节点的时候触发。 |
| onBeforeEdit | row | 在用户开始编辑节点的时候触发。 |
| onAfterEdit | row,changes | 在用户完成编辑的时候触发。 |
| onCancelEdit | row | 在用户取消编辑节点的时候触发。 |
方法
很多方法都使用'id'命名参数，而'id'参数代表树节点的值。
| 方法名 | 方法参数 | 描述 |
|---|---|---|
| options | none | 返回树形表格的属性。 |
| resize | options | 设置树形表格大小，options包含2个属性： width：树形表格的新宽度。 height：树形表格的新高度。 |
| fixRowHeight | id | 修正指定的行高。 |
| load | param | 读取并显示首页内容。（该方法自1.3.4版开始可用）
代码示例： |
| loadData | data | 读取树形表格数据。 |
| reload | id | 重新加载树形表格数据。如果'id'属性有值，将重新载入指定树形行，否则重新载入所有行。
代码示例： |
| reloadFooter | footer | 重新载入页脚数据。 |
| getData | none | 获取载入数据。 |
| getFooterRows | none | 获取页脚数据。 |
| getRoot | none | 获取根节点，返回节点对象。 |
| getRoots | none | 获取所有根节点，返回节点数组。 |
| getParent | id | 获取父节点。 |
| getChildren | id | 获取子节点。 |
| getSelected | none | 获取选择的节点并返回它，如果没有节点被选中则返回null。 |
| getSelections | none | 获取所有选择的节点。 |
| getCheckedNodes | none | 获取所有选中的行。（该方法自1.4.5版开始可用） |
| getLevel | id | 获取指定节点等级。 |
| find | id | 查找指定节点并返回节点数据。 |
| select | id | 选择一个节点。 |
| unselect | id | 反选一个节点。 |
| selectAll | none | 选择所有节点。 |
| unselectAll | none | 反选所有节点。 |
| checkNode | id | 选中指定行节点。（该方法自1.4.5版开始可用） |
| uncheckNode | id | 反选指定行节点。（该方法自1.4.5版开始可用） |
| collapse | id | 折叠一个节点。 |
| expand | id | 展开一个节点。 |
| collapseAll | id | 折叠所有节点。 |
| expandAll | id | 展开所有节点。 |
| expandTo | id | 打开从根节点到指定节点之间的所有节点。 |
| toggle | id | 节点展开/折叠状态触发器。 |
| append | param | 追加节点到一个父节点，'param'参数包含如下属性： parent：父节点ID，如果未指定则追加到根节点。 data：数组，节点数据。 代码示例： |
| insert | param | 插入一个新节点到指定节点。'param'参数包含一下参数： before：插入指定节点ID值之前。 after：插入指定节点ID值之后。 data：新节点数据。 代码示例： （该方法自1.3.1版开始可用） |
| remove | id | 移除一个节点和他的所有子节点。 |
| pop | id | 弹出并返回节点数据以及它的子节点之后删除。（该方法自1.3.1版开始可用） |
| refresh | id | 刷新指定节点。 |
| update | param | 更新指定节点。'param'参数包含以下属性： id：要更新的节点的ID。 row：新的行数据。 代码示例： （该方法自1.3.1版开始可用） |
| beginEdit | id | 开始编辑一个节点。 |
| endEdit | id | 结束编辑一个节点。 |
| cancelEdit | id | 取消编辑一个节点。 |
| getEditors | id | 获取指定行编辑器。每个编辑器都包含以下属性： actions：编辑器执行的动作。 target：目标编辑器的jQuery对象。 field：字段名称。 type：编辑器类型。 |
| getEditor | param | 获取指定编辑器，'param'参数包含2个属性： id：行节点ID。 field：字段名称。 |
| showLines | none | 显示treegrid行。 |
看完这一堆东西或者一边看一边比对代码，就会恍然大悟了，运用起来会比较上手。有些暂时用不上可以略过，属性一定要看定定。
接下来是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>这个案例实现的是三个按钮【一键折叠】、【一键展开】和【选择默认选项】，如下：
二、 复选框
<table title="Folder Browser" class="easyui-treegrid" style="width:700px;height:250px"data-options="url: 'treegrid_data1.json',method: 'get',checkbox: true,rownumbers: true,idField: 'id',treeField: 'name'"><thead>这个比较简单，就是添加了【checkbox: true】让树结构多了个复选框的样式，如下：
这个功能实现还是很方便的，但如果只需要某一行有复选框就要下点功夫了。
<!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>
三、分页功能
<!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到了。
四、右键操作菜单
<!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>
右键就会出现这个操作菜单啦。
五、树表格数据的编辑操作
<!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>
六、页脚统计
<!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去实现。
七、显示树网络的线
data-options="url: 'treegrid_data1.json',method: 'get',lines: true,rownumbers: true,idField: 'id',treeField: 'name'">这个容易，添加了个【lines：true】而已。
个人总结
1、看案例建议自己去搭个EasyUI环境去测试的好，这样理解起来更简单。案例的代码在easyui的包里就有，路径是easyui==>demo==>treegrid。
2、有人问我为什么老是放那么多庸余的代码，我个人的话是比较喜欢这样子的，对于我这个小白来说，整页代码能给我一些信心，有信心是能看懂的，所以我的博客都是这样的啦。不喜勿喷，别看就好，毕竟我也不是求你们看。
支付宝扫一扫
微信扫一扫
.png)
.png)
.png)
