treeGrid 的使用（ EasyUI ）

最新推荐文章于 2020-02-02 12:52:23 发布
最新推荐文章于 2020-02-02 12:52:23 发布
阅读量4.1k 收藏 14
点赞数 1
分类专栏： # 前端 文章标签： Treegrid树网络详细使用手册 Treegrid EasyUI实现增删查改功能
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Alone_in_/article/details/97959649
版权

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(数据表格)，树形表格新增的属性如下：

属性名属性值类型描述默认值
idFieldstring定义关键字段来标识树节点。（必须的）null
treeFieldstring定义树节点字段。（必须的）null
animateboolean定义在节点展开或折叠的时候是否显示动画效果。false
checkboxboolean,function

定义在每一个节点前显示复选框，也可以指定一个函数来动态指定是否显示复选框，但函数返回true的时候则显示，否则不显示。（该属性自1.4.5版开始可用）

代码示例：

$('#tg').treegrid({
	checkbox: function(row){
		var names = ['Java','eclipse.exe','eclipse.ini'];
		if ($.inArray(row.name, names)>=0){
			return true;
		}
	}
})
false
cascadeCheckboolean定义是否级联检查。（该属性自1.4.5版开始可用）true
onlyLeafCheckboolean定义是否仅在叶子节点前显示复选框。（该属性自1.4.5版开始可用）false
linesboolean定义是否显示treegrid行。（该属性自1.4.5版开始可用）false
loaderfunction(param,success,error)定义以何种方式从远程服务器读取数据。返回false可以忽略该动作。该函数具有一下参数：
param：传递到远程服务器的参数对象。
success(data)：当检索数据成功的时候调用的回调函数。
error()：当检索数据失败的时候调用的回调函数。		json loader
loadFilterfunction(data,parentId)返回过滤后的数据进行展示。 

 

事件

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

事件名事件参数描述
onClickRowrow在用户点击节点的时候触发。
onDblClickRowrow在用户双击节点的时候触发。
onClickCellfield,row在用户点击单元格的时候触发。
onDblClickCellfield,row在用户双击单元格的时候触发。
onBeforeLoadrow, param在请求数据加载之前触发，返回false可以取消加载动作。
onLoadSuccessrow, data数据加载完成之后触发。
onLoadErrorarguments数据加载失败的时候触发，参数和jQuery的$.ajax()函数的'error'回调函数一样。
onBeforeSelectrow在用户选择一行之前触发，返回false则取消该动作。（该事件自1.4版开始可用）
onSelectrow在用户选择的时候触发，返回false则取消该动作。（该事件自1.4版开始可用）
onBeforeUnselectrow在用户取消选择一行之前触发，返回false则取消该动作。（该事件自1.4版开始可用）
onUnselectrow在用户取消选择的时候触发，返回false则取消该动作。（该事件自1.4版开始可用）
onBeforeCheckNoderow,checked在用户选中一行节点之前触发，返回false则取消该动作。（该事件自1.4.5版开始可用）
onCheckNoderow,checked在用户选中一行节点的时候触发，返回false则取消该动作。（该事件自1.4.5版开始可用）
onBeforeExpandrow在节点展开之前触发，返回false可以取消展开节点的动作。
onExpandrow在节点被展开的时候触发。
onBeforeCollapserow在节点折叠之前触发，返回false可以取消折叠节点的动作。
onCollapserow在节点被折叠的时候触发。
onContextMenue, row在右键点击节点的时候触发。
onBeforeEditrow在用户开始编辑节点的时候触发。
onAfterEditrow,changes在用户完成编辑的时候触发。
onCancelEditrow在用户取消编辑节点的时候触发。

 

方法

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

方法名方法参数描述
optionsnone返回树形表格的属性。
resizeoptions设置树形表格大小，options包含2个属性：
width：树形表格的新宽度。
height：树形表格的新高度。
fixRowHeightid修正指定的行高。
loadparam读取并显示首页内容。（该方法自1.3.4版开始可用） 

代码示例：

// 读取并发送请求参数
$('#tg').treegrid('load', {
	q: 'abc',
	name: 'name1'
});
loadDatadata读取树形表格数据。
reloadid重新加载树形表格数据。如果'id'属性有值，将重新载入指定树形行，否则重新载入所有行。

代码示例：

$('#tt').treegrid('reload', 2);	// 重新载入值为2的行
$('#tt').treegrid('reload');	// 重新载入所有行
reloadFooterfooter重新载入页脚数据。
getDatanone获取载入数据。
getFooterRowsnone获取页脚数据。
getRootnone获取根节点，返回节点对象。
getRootsnone获取所有根节点，返回节点数组。
getParentid获取父节点。
getChildrenid获取子节点。
getSelectednone获取选择的节点并返回它，如果没有节点被选中则返回null。
getSelectionsnone获取所有选择的节点。
getCheckedNodesnone获取所有选中的行。（该方法自1.4.5版开始可用）
getLevelid获取指定节点等级。
findid查找指定节点并返回节点数据。
selectid选择一个节点。
unselectid反选一个节点。
selectAllnone选择所有节点。
unselectAllnone反选所有节点。
checkNodeid选中指定行节点。（该方法自1.4.5版开始可用）
uncheckNodeid反选指定行节点。（该方法自1.4.5版开始可用）
collapseid折叠一个节点。
expandid展开一个节点。
collapseAllid折叠所有节点。
expandAllid展开所有节点。
expandToid打开从根节点到指定节点之间的所有节点。
toggleid节点展开/折叠状态触发器。
appendparam追加节点到一个父节点，'param'参数包含如下属性：
parent：父节点ID，如果未指定则追加到根节点。
data：数组，节点数据。
代码示例：  
// 追加若干节点到选中节点的后面
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'
	}]
});
insertparam插入一个新节点到指定节点。'param'参数包含一下参数：
before：插入指定节点ID值之前。
after：插入指定节点ID值之后。
data：新节点数据。

代码示例：

// 插入一个新节点到选择的节点之前
var node = $('#tt').treegrid('getSelected');
if (node){
	$('#tt').treegrid('insert', {
		before: node.id,
		data: {
			id: 38,
			name: 'name38'
		}
	});
}
（该方法自1.3.1版开始可用）
removeid移除一个节点和他的所有子节点。
popid弹出并返回节点数据以及它的子节点之后删除。（该方法自1.3.1版开始可用）
refreshid刷新指定节点。
updateparam更新指定节点。'param'参数包含以下属性：
id：要更新的节点的ID。
row：新的行数据。

代码示例：

$('#tt').treegrid('update',{
	id: 2,
	row: {
		name: '新名称',
		iconCls: 'icon-save'
	}
});
（该方法自1.3.1版开始可用）
beginEditid开始编辑一个节点。
endEditid结束编辑一个节点。
cancelEditid取消编辑一个节点。
getEditorsid获取指定行编辑器。每个编辑器都包含以下属性：
actions：编辑器执行的动作。
target：目标编辑器的jQuery对象。
field：字段名称。
type：编辑器类型。
getEditorparam获取指定编辑器，'param'参数包含2个属性：
id：行节点ID。
field：字段名称。
showLinesnone显示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、有人问我为什么老是放那么多庸余的代码，我个人的话是比较喜欢这样子的，对于我这个小白来说，整页代码能给我一些信心，有信心是能看懂的，所以我的博客都是这样的啦。不喜勿喷，别看就好，毕竟我也不是求你们看。

Alone_in_
关注
  • 1
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
【EasyUI】基本树形表格TreeGrid踩坑指南
習習君的博客
05-04 3011
最近做公司的一个ssh项目，web层用的是easyui和freemarker写的。最近做一个行政区划树形组件，遇到了许多坑，在此记录一下。其中包含：获取当前树组件层级、树组件的属性、树组件的事件和方法等等。
EASYUI TREEGRID
10-30
easyui treegrid 优化，包括 以新背景色标识鼠标所指行
treegrid 的使用介绍
zhuimengzhe5的博客
12-27 1万+
最近在项目开发中使用easyuide treegrid插件，下面将结合项目来介绍下自己的使用心得。使用到treegrid插件的是权限管理模块，主要功能还是crud，首先在使用easyui时要引入相应的jar包1、页面显示注意事项：1、数据库设计时要有pid的字段来关联到父记录，父级的pid可以为null；2、实体类设计时要添加_parentId字段，网上介绍的其他字段，例如stats、iconcl...
easyUI TreeGrid
YHC
08-04 2万+
@author YHC 从$.fn.datagrid.defaults.继承,覆盖默认值$.fn.treegrid.defaults. treegrid 是使用显示分层数据在grid中,treegrid 是基于datagrid和关联treeview 和关联可编辑的grid,treegrid 允许你创建定制的,异步加载展开行数据, 和显示分层的数据在多列中. 相关
easyui的treegrid
helloworldmycsdn的博客
05-14 408
treegrid数据格式里面包括_parentId和children两个属性， 在项目开发的时候可以只需要定义其中一个就可以创建一颗树， 子节点会默认将_parentId赋值，但是如果找不到有上一节点， 该值就是undifined.所以可以得到下面一个定义json格式的方式。
easyui treegrid
w_t_y_y的博客
12-04 497
总体效果： 一、前台： <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> CheckBox Tree - jQuery EasyUI Demo 可编辑的表格树 <table id="tg" class
jQuery EasyUI的TreeGrid查询功能实现方法
10-19
需要注意的是，实现TreeGrid的查询功能虽然在技术上并不复杂，但需要对jQuery EasyUI的TreeGrid组件的API有一定的了解，并且熟练使用AJAX技术进行前后端的数据交互。此外，在编写代码时应当注意数据的安全性和异常...
Easyui 之 Treegrid 笔记
10-22
EasyUI的组件丰富，使用方便，能够节省网页开发的时间和规模。具体到Treegrid组件，它是用于展示树形结构数据的一种表格形式。Treegrid在前端页面上表现为可以展开和折叠的表格，每一项可以有子项，形成层级关系，...
EASYUI TREEGRID异步加载数据实现方法
09-05
EASYUI TreeGrid是一款基于jQuery和EASYUI框架的数据展示组件，它结合了表格和树形结构的特点，常用于展示层次关系的数据。在EASYUI TreeGrid中，异步加载数据是一项重要的功能，允许用户在需要时动态获取数据，提高...
EasyUI的treegrid组件动态加载数据问题的解决办法
12-24
EasyUI的TreeGrid组件是一个强大的数据展示工具，它结合了Tree和Grid的功能，允许用户以树状结构显示数据，同时支持行级别的操作。在实际应用中，常常需要根据用户的查询条件动态加载数据，以实现更灵活的数据展示。...
treegrid的使用详解
03-11
treegrid的学习笔记，内含json及实现方法，解析清晰明了
easyUI-树形表格(TreeGrid)实现无限层级菜单
06-01
NULL 博文链接：https://x125858805.iteye.com/blog/2229104
jquery easyui treegrid demo 详解
10-03
在这个"jquery easyui treegrid demo 详解"中，我们将深入探讨如何使用 TreeGrid 实现增删改查功能。 首先，让我们理解 TreeGrid 的基本概念。TreeGrid 结构上是一个表格，但每一行都可以展开或折叠，显示子级数据...
EasyUI框架04——treegrid
武汉小喽啰
02-02 597
treegrid是树形表格控件，集合了datagrid与tree的特点 1.列表展示（带复选框） $('#cancelTaskGrid').treegrid({ url: baseDir + "/json/customTestManageData/getTestTaskInfo", queryParams:queryDatas, ...
easyui-treegrid篇
qq383264679的专栏
08-28 5669
先来看一个故事， ，主角就是赵括。 赵括自少时学兵法，言兵事，以天下莫能当。尝与其父奢言兵事，奢不能难，然不谓善。括母问奢其故，奢曰：“兵，死地也，而括易言之。使赵不将括即已；若必将之，破赵军者必括也！”及括将行，其母上书言于王曰：“括不可使将。”及括将行，其母上书言于王曰：“括不可使将。”王曰：“何以？”对曰：“始妾事其父，时为将，身所奉饭耳进食者以十数，所友者以百数；大王及宗室所赏赐者尽
jquery easyui：EasyUI Treegrid 树形网格
Leopard锋的博客
11-15 2万+
用jquery easyui 的 Treegrid 树形网格 进行数据展示
【EasyUI篇】TreeGrid树表格组件
ouYang的博客
09-28 5029
微信公众号：程序yuan 关注可获得更多干货哦！。问题或建议，请公众号留言; ------------------------------------------------ 关注小编微信公众号获取更多资源 ------------------------------------------------ 查看--&gt; 全套EasyUI示例目录   30.TreeGrid树表...
easyui treegrid 操作
bossszhou的博客
08-01 751
 项目需求变更，留着以备他用 前端界面 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;签核关卡设定&lt;/title&gt; &lt;!--jquery--&gt; &lt;script type="text/javas
JS 判断字符串中是否包含某个字符串（方法总结）
热门推荐
Alone_in_的博客
09-24 9万+
我是想在js中判断字符串是否包含某个中文，将方法记录起来，这些方法也适用于数字、字母。实践是检验真理的唯一标准，还是要多多测试啊。 String对象的方法 方法一：indexOf() var groupName="小白A组"; alert('groupName.indexOf() =' + (groupName.indexOf("组") != -1)); //true index...
easyui treegrid 使用分页
最新发布
06-03
easyui treegrid 提供了分页功能，可以将大量数据分成多个页面进行加载，从而提高页面响应速度。下面是使用分页的示例代码： 1. 首先，需要在 easyui treegrid 的属性中添加 "pagination" 属性，该属性的值为 true，表示启用分页功能。例如： ``` $('#treegrid').treegrid({ url: 'get_data.php', idField: 'id', treeField: 'text', pagination: true, pageSize: 10, pageList: [10, 20, 30], columns: [...] }); ``` 2. 然后，在服务器端根据分页参数，返回对应页码的数据。例如： ``` <?php $page = isset($_POST['page']) ? intval($_POST['page']) : 1; $rows = isset($_POST['rows']) ? intval($_POST['rows']) : 10; $offset = ($page - 1) * $rows; $result = array(); //查询数据库，获取数据 $sql = "SELECT * FROM table LIMIT $offset, $rows"; //执行查询操作... $result['total'] = $total_count;//查询结果总数 $result['rows'] = $rows;//查询结果数据 echo json_encode($result); ?> ``` 在这个示例代码中，根据分页参数 $page 和 $rows，计算出查询数据的偏移量 $offset，并使用 LIMIT 关键字限制查询结果的数量。然后，将查询结果的总数和数据返回给客户端。 通过以上代码，你就可以实现 easyui treegrid 的分页功能。当用户翻页时，会自动请求对应页码的数据，从而实现了分批加载数据的效果，提高了 easyui treegrid 的性能。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值