写在前面：最近做公司的一个ssh项目，web层用的是easyui和freemarker写的。最近做一个行政区划树形组件，遇到了许多坑，在此记录一下。
目录
为了更好的理解后面的内容在此将项目中部分代码进行展示,请翻到文章末尾看源代码！
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>
2109
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
