【EasyUI】基本树形表格TreeGrid踩坑指南-Toy模板网

这篇具有很好参考价值的文章主要介绍了【EasyUI】基本树形表格TreeGrid踩坑指南。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

写在前面：最近做公司的一个ssh项目，web层用的是easyui和freemarker写的。最近做一个行政区划树形组件，遇到了许多坑，在此记录一下。

1. 树形表格事件

2. 树形表格属性

3. 树形表格相关操作

为了更好的理解后面的内容在此将项目中部分代码进行展示,请翻到文章末尾看源代码！

1. 树形表格事件

easyui 的基本树形表格（treegrid）组件提供了许多事件来处理用户操作、数据加载等情况。下面是其中一些常用的事件：

onClickRow: 单击行触发的事件，可以在该事件中获取当前单击的行的数据。
onDblClickRow: 双击行触发的事件，可以在该事件中获取当前双击的行的数据。
onLoadSuccess: 数据加载成功后触发的事件。在该事件中，可以进行一些数据处理和渲染操作，例如根据数据动态调整表格的宽度、设置表格的样式等。
onBeforeLoad: 数据加载之前触发的事件。在该事件中，可以进行一些数据加载前的准备工作，例如显示 loading 图标、设置查询参数等。如果该事件返回 false，则取消数据加载操作。
onBeforeExpand: 节点展开之前触发的事件。在该事件中，可以进行一些节点展开前的准备工作，例如设置节点的查询参数或检查节点是否符合展开条件。如果该事件返回 false，则取消节点展开操作。
onExpand: 展开节点之后触发的事件，可以在该事件中进行操作。
onBeforeCollapse: 折叠节点之前触发的事件，可以在该事件中取消折叠操作或进行其他操作。
onCollapse: 折叠节点之后触发的事件，可以在该事件中进行操作。
onContextMenu: 右键菜单触发的事件，可以在该事件中自定义右键菜单。
onCheck: 勾选复选框触发的事件，可以在该事件中获取当前勾选的节点的数据。
onUncheck: 取消勾选复选框触发的事件，可以在该事件中获取当前取消勾选的节点的数据。
onSelect: 表格选中某一行时触发的事件。在该事件中，可以获取当前选中的行的数据，并进行相应的操作，例如显示选中行的详情或弹出编辑对话框。
onSortColumn: 列排序时触发的事件。在该事件中，可以获取当前排序的列和排序的方式，并进行相应的操作，例如重新加载数据或显示排序的图标。

标红的方法很重要，开发基本都在使用，下面针对几个常用的事件，放一两个示例(由于保密原因，代码只放部分，理解就好)：

onBeforeload

onBeforeLoad:function(row,param){
		$(this).treegrid('options').url = '可以指定你的路径'
}

onLoadSuccess

onLoadSuccess: function(){
   $.messager.alert('提示','这是一个测试！','warning');
},

Onselect

onSelect:function(rowData) {
     $.messager.alert('提示','这是一个测试！','warning');
}

注意：这个rowData是当前用户选中行的数据。

OnBeforeExpand

onBeforeExpand: function(row) {
		//用户点击层级展开
		var queryParams = $('#regionTree').treegrid('options').queryParams;
		queryParams.isSearch = '0';
		$('#regionTree').treegrid('options').queryParams = queryParams;
},

注意：这里是用户展开组件之前的一些操作，我们可以在这里对树形组件的queryParams属性进行操作，其实就是他的参数。属性这一块，下面再进行介绍。

2. 树形表格属性

url：树形表格数据的请求地址。
method：请求数据的方式，通常是 GET 或 POST。
idField：表示节点的唯一标识字段名。
treeField：表示节点名称字段名。
parentField：表示节点的父节点标识字段名。
animate：是否使用动画效果展开和折叠子节点，默认为 true。
collapsible：是否允许折叠父节点，默认为 true。
lines：是否显示虚线连接子节点和父节点的线条，默认为 true。
fitColumns：是否自适应列宽度，默认为 false。
width：表格宽度。
height：表格高度。
queryParams：请求数据时附加的额外参数。
onLoadSuccess：表格数据加载成功后执行的回调函数。
onClickRow：单击某一行时执行的回调函数。
onDblClickRow：双击某一行时执行的回调函数。
onBeforeExpand：展开某一行之前执行的回调函数。
onExpand：展开某一行后执行的回调函数。
onBeforeCollapse：折叠某一行之前执行的回调函数。
onCollapse：折叠某一行后执行的回调函数。
onContextMenu：右键菜单事件处理函数。
toolbar：表格工具栏。
frozenColumns：固定列。
columns：数据列。
pagination：是否开启分页。
pagePosition：分页栏的位置，可以是 top 或 bottom，默认为 bottom。
pageSize：每页显示的记录数。
pageNumber：当前页码。
total：总记录数。

以上是常见的配置参数，具体的还需要根据具体情况进行配置。

EasyUI树形表格组件在数据加载之前加入参数？

在 EasyUI 中，queryParams 中设置的参数不会被自动校验。queryParams 参数是用于在发送请求之前传递给远程服务器的额外参数。如果需要在 EasyUI 中对参数进行验证，可以使用 EasyUI 的表单验证机制。可以通过 validate 方法来触发验证，并使用 isValid 方法来检查表单的验证结果。 queryParams属性可以是一个函数，也可以是一个对象。当queryParams属性为函数时，可以在该函数内部动态地构建查询参数并返回：当为函数时：

$('#tt').treegrid({
    url: 'get_data.php',
    queryParams: function(params) {
        return {
            id: 123,
            name: 'test',
            page: params.page,
            rows: params.rows
        };
    }
});

当为属性时：

$('#tt').treegrid({
    url: 'get_data.php',
    queryParams: {
        id: 123,
        name: 'test'
    }
});

3. 树形表格相关操作

获取用户当前选中树的层级

onSelect:function(rowData) {
  var level = $('#regionTree').treegrid('getLevel', rowData.id); //获取选中测层级
}

项目代码展示：

<html style="height:100%">
<head>
<title>行政区划管理</title>
<#include "/web/common/meta.ftl"/>
<script type="text/javascript">
	$(function(){
		var selectedRowOne = null;//记录第一次移动的行值
		$('#regionTree').treegrid({
			url: '',
			title: '行政区划',
			striped: true,
			remoteSort: false,
			singleSelect:true,
			width: 'auto',
			height: fillAppBaseDataGridHeight(),
			fitColumns: true,
			pageNumber: pageNo,
			pageSize: 10000,
			idField:'id',
			treeField:'name',
			nowrap:false,
			toolbar:[
			<#if canEdit='true'>
			{
				id: 'btAdd',
				disabled: true,
				text:'添加',
				iconCls:'icon-add',
				handler:function(){
					if($('#codeVersionId').combobox('getValue') == null || $('#codeVersionId').combobox('getValue') == '') {
						showNotice('请先选择公共代码版本'); 
					}else {
						var node = getSelectNode('regionTree', 'treegrid');
						var parentId = '';	
						if(node) {										
							parentId = node.id;
						}
						var data = $('#regionTree').treegrid('getData');
						if(data && (data.total > 0 || !$.isEmptyObject(data)) && (parentId == null || parentId == '')) {
							showNotice('请选择上级行政区划'); 
						}else {
						}
					}
				}
			},'-',{
				text:'修改',
				id: 'btEdit',
				disabled: true,
				iconCls:'icon-edit',
				handler:function(){
				}
			},'-',{
				text:'删除',
				id: 'btDelete',
				disabled: true,
				iconCls:'icon-remove',
				handler:function(){
				}
			},'-',
			</#if>
			{
				text:'查看',
				id:'btView',
				disabled: true,
				iconCls:'icon-detail',
				handler:function(){
				}
			},'-',
			{
				text:'移动',
				id:'btMove',
				disabled: true,
				iconCls:'icon-edit',
				handler:function(){
					var level = $('#regionTree').treegrid('getLevel', selectedRowOne.id); //获取选中测层级
					//移动之前进行校验（1）省级以上不允许移动
					if(level <= 2){
						$.messager.alert('移动提示','省级以上行政区划不允许移动！','error');
					}else{
					}
				}
			}
			<#if canSync='true'>
			,'-',	
				{
					text:'同步',
					iconCls:'icon-sync',
					handler:function(){
						openMessageWin('${ctx}','synchronousMsg', '正在同步,请稍候...');
						$.getJSON('<@s.url namespace="/app/code" action="Region!sync" includeParams="none"/>', function(data) {
							closeMessageWin('synchronousMsg');	
							if(data) {				
							   	if(data.result == 'success') {
							   		showSuccess('行政区划管理', '同步');		
							   		refresh('regionTree', 'treegrid');
								} else {
									showError('行政区划管理', '同步', data.msg);
								}
							} else {
								showError('行政区划管理', '同步');		
							}
						});	
					}
				}
			</#if>
			],
			columns:[[
				{field:'name',title:'名称',width:220},
				{field:'unifiedCode',title:'统一代码',width:150,align:'left'},
				{field:'code',title:'标准代码',width:100,align:'left'},
				{field:'codeScopeCn',title:'适用范围',width:80,align:'left'},
				{field:'statusCn',title:'状态',width:60,align:'left'},
				{field:'remark',title:'备注',width:220,align:'left'}
			]],
			rownumbers:true,
			pagination:false,
			onBeforeLoad:function(row,param){
			},
			onLoadSuccess: function(){
				<#if (codeVersionMap != null && codeVersionMap?size>0) >
				var btAdd = getButtonInToolbar('regionTree', 'treegrid', 'btAdd');
				if($('#codeVersionId').combobox('getValue') != null && $('#codeVersionId').combobox('getValue') != '') {
					btAdd.linkbutton('enable');
				}
				var panelTool = $('.datagrid .panel-tool');
				panelTool.addClass('panel-toolbar-area');
				$('#codeVersionSelectArea').appendTo(panelTool);
				$('#codeVersionSelectArea').show();
				<#else>
				showError('该公共代码还未设置版本,不能进行操作');
				</#if>
				$('.datagrid-toolbar').append($('#codeSearch'));
				$('#codeSearch').show();
	    	},
	    	onSelect:function(rowData) {
				//用户点击获取行信息
				var btEdit = getButtonInToolbar('regionTree', 'treegrid', 'btEdit');
				var btDelete = getButtonInToolbar('regionTree', 'treegrid', 'btDelete');
				var btView = getButtonInToolbar('regionTree', 'treegrid', 'btView');
				var btPublish = getButtonInToolbar('regionTree', 'treegrid', 'btPublish');
				var btMove = getButtonInToolbar('regionTree', 'treegrid', 'btMove');
				//选中后按钮可操作
				btView.linkbutton('enable');
				btMove.linkbutton('enable');

				if(rowData && rowData.id != null && rowData.id != '') {
					if(${platformLevel} == rowData.codeScope) {
						btEdit.linkbutton('enable');
						btDelete.linkbutton('enable');
					}else {
						btEdit.linkbutton('disable');
						btDelete.linkbutton('disable');
					}
					btPublish.linkbutton('enable');
				}else {
					btEdit.linkbutton('disable');
					btDelete.linkbutton('disable');
					btPublish.linkbutton('disable');
				}

				selectedRowOne = rowData;
			},	
			onBeforeExpand: function(row) {
				//用户点击层级展开
				var queryParams = $('#regionTree').treegrid('options').queryParams;
				queryParams.isSearch = '0';
				$('#regionTree').treegrid('options').queryParams = queryParams;
			},		    	
	    	onSortColumn:function(sort,order){
				remoteSort('regionTree', 'treegrid', sort, order);
	    	}
		});
		$('#codeVersionId').combobox({
			onSelect: function(record) {
				$('#regionTree').treegrid('unselectAll');
				$('#regionTree').treegrid('reload');
			}
		});
		function searchCodeChange() {
			var searchCode = $('#search_code').val();
			var searchName = $('#search_name').val();
			if(searchCode.length > 0 || searchName.length > 0) {
				$('#search_codeLevel').attr('disabled', false);
			}else {
				$('#search_codeLevel').attr('disabled', true);
			}
			if(searchCode.length <= 2) {
				$('#search_codeLevel option[value="2"]').attr('selected', true);
			}else if(searchCode.length <= 4) {
				$('#search_codeLevel option[value="3"]').attr('selected', true);
			}else if(searchCode.length <= 6) {
				$('#search_codeLevel option[value="4"]').attr('selected', true);
			}else {
				$('#search_codeLevel option[value="5"]').attr('selected', true);
			} 
		}
		function searchNameChange() {
			var searchCode = $('#search_code').val();
			var searchName = $('#search_name').val();
			if(searchCode.length > 0 || searchName.length > 0) {
				$('#search_codeLevel').attr('disabled', false);
			}else {
				$('#search_codeLevel').attr('disabled', true);
			}	
		}
		$('#search_code').bind('keyup', function(){
			searchCodeChange();
		}).bind('change', function() {
			searchCodeChange();
		}).bind('propertychange', function() {
			searchCodeChange();
		}).bind('focus', function() {
			$(this).select();
		});
		$('#search_name').bind('keyup', function(){
			searchNameChange();
		}).bind('change', function() {
			searchNameChange();	
		}).bind('propertychange', function() {
			searchNameChange();			
		}).bind('focus', function() {
			$(this).select();
		});
		function appendSearchParam() {
			var searchCode = $('#search_code').val();
			var searchName = $('#search_name').val();
			$('#regionTree').treegrid('clearSelections');//移除用户之前选择的行
			var queryParams = $('#regionTree').treegrid('options').queryParams; 
			queryParams.search_code = searchCode;
			queryParams.search_name = searchName;			
			if(searchName == '' && searchCode == '') {
				queryParams.search_codeLevel = '';
				queryParams.isSearch = '0';
			}else {
				queryParams.search_codeLevel = $('#search_codeLevel').val();
				queryParams.isSearch = '1';
			}
			$('#regionTree').treegrid('options').queryParams = queryParams;
		}
		$('#btSearch').click(function() {	
			appendSearchParam();		
			refresh('regionTree', 'treegrid');
		});
	});
	</script>
</head>

<body class="ui-layout jpage">
	<div class="content-area1">
		<table id="regionTree"></table>
	</div>
	<span id="codeVersionSelectArea" style="float:right;height:35px;display:none">
	<@s.select name="codeVersionId" id="codeVersionId" cssStyle="width:200px" cssClass="ui-combobox" list="codeVersionMap" listKey="key" listValue="value" value="${codeVersionId}" theme="simple"/>
	</span>
	<span id="codeSearch" class="toolbar-search" style="display:none">
	<table border="0" cellspacing="0" cellpadding="0" width="430">
		<tr>
			<td width="80" align="right">标准代码：</td>
			<td width="90"><input type="text" name="search_code" id="search_code" id="title" maxlength="9" size="50" value="" style="width:100px"/></td>
			<td width="40" align="right">名称：</td>
			<td width="80"><input type="text" name="search_name" id="search_name" id="title" maxlength="50" size="50" value="" style="width:100px"/></td>
			<!--<td width="100" align="right">行政区划级别：</td>
			<td width="80">
			<select name="search_codeLevel" id="search_codeLevel" style="width: 50px">
				<option value="2">省</option>
				<option value="3">地市</option>
				<option value="4">区县</option>
				<option value="5">乡镇</option>
			</select>			
			</td>-->
			<td width="70">
			<a id="btSearch" class="ui-linkbutton" plain="true" iconCls="icon-search">查询</a>
			</td>
		</tr>
	</table>
	</span>
</body>
</html>

文章来源地址https://www.toymoban.com/news/detail-433524.html

到了这里，关于【EasyUI】基本树形表格TreeGrid踩坑指南的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！