DataGrid 表格组件、事件属性方法、应用案例、jqGrid
# 引言
数据表格是一个必不可少的元素，在选择这个选型的时候尝试了很多开源组件，最终选择jqGrid，只是因为它接近经典思维，用着还算顺手，最主要的是遇见什么问题都可以自行解决和修复问题，有人说jqGrid不好看，这没关系这完全而已自行编写CSS改造它。 支持：分页，排序，多表头，分组，子表，冻结，小计，合计，编辑行，树表表格等； 更多学习资料：jqGrid 官方演示实例 (opens new window)
# 最简单的一个例子
<% layout(... libs: ['dataGrid'] ...}){ %>
<#form:form id="searchForm" model="${config}" action="${ctx}/sys/config/listData"
method="post" class="form-inline " data-page-no="${parameter.pageNo}"
data-page-size="${parameter.pageSize}" data-order-by="${parameter.orderBy}">
参数名称：<#form:input path="configName" maxlength="100" class="form-control" />
参数键名：<#form:input path="configKey_like" maxlength="100" class="form-control" />
<button type="submit" class="btn btn-primary btn-sm">查询</button>
<button type="reset" class="btn btn-default btn-sm">重置</button>
</#form:form>
<table id="dataGrid"></table>
<div id="dataGridPage"></div>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
JS：
// 初始化DataGrid对象
$('#dataGrid').dataGrid({
// 查询数据表单
searchForm: $('#searchForm'),
// 设置数据表格列
columnModel: [
{header:'参数名称', name:'configName', index:'a.config_name', width:200, formatter: function(val, obj, row, act){
return '<a href="${ctx}/sys/config/form?id='+row.id+'" class="btnList" data-title="编辑参数">'+val+'</a>';
}},
{header:'参数键名', name:'configKey', index:'a.config_key', width:200},
{header:'参数键值', name:'configValue', sortable:false, width:260, classes:"nowrap"},
{header:'操作', name:'actions', width:100, sortable:false, title:false, formatter: function(val, obj, row, act){
var actions = [];
<% if(hasPermi('sys:config:edit')){ %>
actions.push('<a href="${ctx}/sys/config/form?id='+row.id+'" class="btnList" title="编辑参数"><i class="fa fa-pencil"></i></a> ');
<% } %>
<% if(hasPermi('sys:config:delete')){ %>
actions.push('<a href="${ctx}/sys/config/delete?id='+row.id+'" class="btnList" title="删除参数" data-confirm="确认要删除该参数吗？"><i class="fa fa-trash-o"></i></a> ');
<% } %>
return actions.join('');
}}
],
// 加载成功后执行事件
ajaxSuccess: function(data){
}
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
是不是比您使用foreach方便的多，封装后名字叫dataGrid，这只是展示了冰山一角，它支持所有jqGrid参数，即简化了代码编写，又不失功能
# 常用全局选项
options = $.extend({
// 数据表格参数
url: searchForm.attr('action'),
postData: searchForm.serializeArray(),
mtype: "POST", datatype: "json",
editurl: 'clientArray', // 单行编辑的时候使用本地数组形式
rowNum: -1, // 显示行数，-1为显示全部
rownumWidth: 30, // 序号的列宽
multiselectWidth: 20, // 复选框的宽度
// multiboxonly: true, // 单击复选框时再多选
altRows: true, // 斑马线样式，交替行altclass
// 设置自定义列模型参数（columnModel包含colNames和colModel官方自带属性）
columnModel: [], colNames: [], colModel: [],
// 设置数据表格扩展参数
dataId: 'id', // 指定数据主键，当主键名称不是id的时候设置
lazyLoad: false, // 是否懒加载Grid数据，默认初始列表后不及时加载数据，（仅对url远程请求数据有效），当调用 dataGrid.refresh()时再进行加载。
shrinkToFit: true, // 是否按百分比自动调整列宽，当列比较多时，开启水平滚动/横向滚动条，可设置为false
showRownum: true, // 是否显示行号
showCheckbox: false, // 是否显示复选框
sortableColumn: true, // 列表是否允许排序（设置为false后，整个列表不允许排序）
multiSort: false, // 是否支持多列排序，给列指定 firstsortorder 可设定初次排序方式
sortable: true, // 是否允许拖动列表头排序，排序后事件 jqGridRemapColumns
validate: true, // 是否启用查询表单验证，layout 添加 libs: ['validate']
emptyDataHint: false, // 表格内没有数据的时候是否提示 “无数据显示” v4.1.7
emptyDataHintContent: '<center>'+$.jgrid.defaults.emptyrecords+'</center>', // 没有数据的提示内容
// 表格大小设置参数，autoGridHeight 和 autoGridWidth 可以是个函数，函数的返回值就是该表格的高度或宽度。
autoGridHeight: true, // 自动表格高度（设置为false后，不自动调整表格高度）为函数时返回'100%',则自动高度。
autoGridHeightFix: 0, // 自动表格高度宽度（自动调整高度时修正的高度值）
autoGridWidth: true, // 自动表格宽度（设置为false后，不自动调整表格宽度）
autoGridWidthFix: 0, // 自动表格修复宽度（自动调整宽度时修正的宽度值）
// 窗体按钮绑定（不使用默认按钮或按钮ID不同时设置）
btnSearch: $("#btnSearch"), // 查询按钮
btnRefreshTree: $("#btnRefreshTree"), // 刷新树按钮
btnExpandTreeNode: $("#btnExpandTreeNode"), // 展开树节点按钮
btnCollapseTreeNode: $("#btnCollapseTreeNode"), // 折叠树节点按钮
btnSetting: $("#btnSetting"), // 列表设置按钮
// 编辑表格参数
editGrid: false, // 是否是编辑表格
editGridInitRowNum: 1, // 编辑表格的初始化新增行数
editGridInitAllRowEdit: true, // 是否初始化就编辑所有行
editGridAddRowBtn: $("#"+dataGridId+"AddRowBtn"), // 子表增行按钮
editGridAddRowBtnToHeader: false, // 子表增行按钮是否显示到表头上 v4.1.7（v4.3.0之后默认显示）
editGridAddRowInitData: {}, // 新增行的时候初始化的数据（支持函数或对象）
editGridAddRowKeys: false, // 是否注册新增行的键盘事件（按键盘到下一个单元格和新增行）
editGridAddRowPosition: 'last', // 添加行的位置 first, last, before, after v4.3.0
editGridAddRowPositionSrc: null, // 如果指定插入位置 before, after，则需要设置插入到哪一行的前后（rowId） v4.3.0
editGridAddRowCallback: function() {}, // 添加行后的回调 v4.3.0
// 编辑表格的提交数据参数
editGridInputForm: dataGrid.parents('form'), // 提交表单的ID（当前grid所在表单）
editGridInputFormListName: '', // 提交的数据列表名，例如：testDataChildList
editGridInputFormListAttrs: '', // 提交数据列表的属性字段，例如：id,status,name,remarks
// 树结构表格参数
treeGrid: false, // 启用树结构表格
treeGridModel: 'adjacency', // 启用简单结构模式
treeColumn: null, // 需要展开的列（默认第一列）
ExpandColClick: true, // 隐含参数，请不要设置，单击列可展开
ExpandColumn: options.treeColumn, // 隐含参数，请不要设置，需要展开的列
defaultExpandLevel: 0, // 默认展开的层次
initExpandLevel: options.defaultExpandLevel,// 保存初始化是设置的展开层次
expandNodeClearPostData: false, // 展开节点清理请求参数数据，用来清理查询表单的参数
// 分页相关字段（设置分页参数input对象）
inputPageNo: $("#pageNo", searchForm), // 当前页码字段
inputPageSize: $("#pageSize", searchForm), // 页面大小字段
inputOrderBy: $("#orderBy", searchForm), // 排序字段
// 设置多级表头
groupHeaders: {
twoLevel:[
{startColumnName: 'postCode', numberOfColumns: 2, titleText: '二级表头'},
{startColumnName: 'remarks', numberOfColumns:2, titleText:'二级表头2'}
],
threeLevel:[
{startColumnName: 'postCode', numberOfColumns:4, titleText:'三级表头'}
]
},
frozenCols: true, // 冻结列，锁定列，固定列，在 colModel 指定 frozen: true
showFooter: true, // 是否显示底部合计行
}, options);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
# 列定义模型
| 配置项 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| align | string | 定义单元格中内容对齐方式，可用值： left, center, right. | left |
| cellattr | function | 这个方法在创建单元格内容的时候给单元格添加附加到属性。所有可用的单元格属性或者style属性中可用的值都可以使用，这个方法需要返回字符串。传递进入这个配置方法的参数如下： rowId - 单元格所属行id； val - 显示在单元格中的值； row -原始的数据行对象。如果jqGrid配置中datatype为json，则为array对象。datatype为xml时则为xml node节点； cm - 所有colModel中配置的属于此列的属性； val - the data row which will be inserted in the row. 参数为键值对对象数组，name为colModel定义的name | null |
| classes | string | 给单元格添加附加样式。如果有多个样式需要添加，样式用空格隔开。例如：classes:'class1 class2' 将会给此列单元格设置class1和class2样式。在css中有一个预定义的样式ui-ellipsis允许附加到特定的行 | empty string |
| datefmt | string | sorttype配置为date（datatype被设置为local）或者editrules 配置为{date:true} 字段时，定义日期的显示格式。“/”，“-”，“.”可用于的时间分隔符号。可用的时间格式如下 y,Y,yyyy ：对应4位数字的年份 YY, yy ：对应2位数字的年份 m,mm ：对应月份 d,dd ：对应日期 | ISO Date (Y-m-d) |
| defval | string | 作为搜索字段的默认值。只用于自定义搜索时的初始值。 | empty |
| editable | boolean | 定义字段是否可以编辑。用于单元格，行编辑，和表单编辑。 | false |
| editoptions | array | 依据edittype提供允许的值列表。 | empty array |
| editrules | array | 给可编辑子都设置附加的规则。 | empty array |
| edittype | string | 给行，表单编辑配置字段编辑类型。可能的值： text, textarea, select, checkbox, radio。 | text |
| firstsortorder | string | 设置为asc或者desc时，初始化时列将会按照这个进行排序。 随后排序将会轮流切换。 | null |
| fixed | boolean | 即使jqGrid的shrinkToFit配置为ture时，当此配置为true，也不允许重新计算列的宽度。如果shrinkToFit为true，当jqGrid容器宽度变化后调用setGridWidth 方法也不会修改此列宽度。 | false |
| formoptions | array | 定义表单编辑时的配置 | empty |
| formatoptions | array | 重写默认配置语言文件中的配置项。 | none |
| formatter | mixed | 默认类型(string)或者客户自定义函数控制此字段的显示格式。 | none |
| frozen | boolean | 设置为ture，此列将为冻结列，不允许拖拽滚动条改变位置。 | false |
| hidedlg | boolean | 设置为true此列将不会出现在模式对话框中，用户可以选择此列的显示或者隐藏。 | false |
| hidden | boolean | 定义是否隐藏此列在初始化时。 | false |
| index | string | 通过sidx参数设置排序时的索引名。 | empty string |
| jsonmap | string | 定义此列数据键和json数据源中的映射关系 。 | none |
| key | boolean | 如果从服务器获取的数据部包含id，可以通过此配置指定唯一id列。只有一列能指定此属性，如果多列配置了这个属性，第一个配置的生效，后续会被忽略。 | false |
| name | string | 设置此列的唯一名称。name是必须的。jqGrid配置的事件名称和属性名称，保留字不能作为此配置项的值，包括subgrid，cb和rn。 | Required |
| resizable | boolean | 定义此列是否允许调整宽度 | true |
| search | boolean | 当配置了查询模块后，是否允许将此列作为查询条件. Search Configuration | true |
| searchoptions | array | 定义查询选项 Search Configuration | empty |
| sortable | boolean | 定义是否允许点击列表头进行排序 | true |
| sorttype | mixed | 当datatype为local时有效。定义适当的排序类型。可用值； int/integer ：按照整数排序； float/number/currency：按照数字排序 date ：日期排序； text ：文本排序； function ：按照自定义函数来排序。自定义函数接受此列排序的值，需要返回一个值。【原文： To this function we pass the value to be sorted and it should return a value too.】应该和javascript数组排序使用函数作为参数排序差不多，return-1/0/1 | text |
| stype | string | 定义查询对象的类型。 See Search Configuration | text |
| surl | string | Custom Searching 中有效 和edittype为 'select' 时这个配置从哪个动态页地址获取已经生成好的select html结构。 | empty string |
| template | object | 设置colModel有效属性。当您希望覆盖列模式默认值时配置这个比较有用。 See cmTemplate in grid options | null |
| title | boolean | 如果设置为false，当鼠标移动到单元格上时不显示title提示信息。 | true |
| width | number | 设置初始化列宽，单位px。注意不能设置为百分比 | 150 |
| xmlmap | string | 定义此列和xml文件中的xml节点映射。 | none |
| unformat | function | 返回单元格的原始值（在排序时也会调用unformat，在排序过程中返回值用于比较）, unformat: function(val, obj, cell){return $('#'+obj.rowId+'_'+obj.colModel.name, cell).val();} | null |
上表内容来自网络（欢迎猿友纠错和完善，联系交流群群主）
# 常用事件
# 选择行事件
$("#dataGrid").dataGrid({
// 选择行后调用（id:行id，isSelect：是否是选中，event：事件）
onSelectRow: function(id, isSelect, event) {
},
// 单击列表表头上的全选按钮时调用（ids：选中的id数组，isSelect：是否选中）
onSelectAll: function(ids, isSelect){
},
// 双击表格行时调用（id：双击的行号，rownum：双击的行位置，column：双击的列）
ondblClickRow: function(id, rownum, colnum, event){
},
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 树表展开折叠事件
$("#dataGrid").dataGrid({
// 展开节点事件
onExpandNode: function(data){
},
// 折叠节点事件
onCollapseNode: function(data){
},
});
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 表格数据加载事件
$("#dataGrid").dataGrid({
// 数据加载前执行方法
ajaxLoad: function(data){
},
// 数据加载成功后执行方法
ajaxSuccess: function(data){
},
// 数据加载失败后执行方法
ajaxError: function(data){
},
// 表格初始化完成后执行
complete: function(){
}
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 表头排序后的事件
// 列表设置显示隐藏或排序后的事件（可用于设置持久化）
$("#dataGrid").on('jqGridRemapColumns',function(){
log($('#dataGrid').dataGrid('getParam', 'columnModel'));
});
1
2
3
4
2
3
4
# 常用方法
# 调用示例
// 该调用方式，支持调用 jqGrid 原生方法，与 $('#jqgrid').jqGrid('方法名') 相同
$('#列表对象id').dataGrid('方法名', '参数1', '参数2', '参数3', '参数4', '参数5...等等');
1
2
2
# 设置参数
// params：设置参数值，如：{url: '/sys/user/listData'}
// overwrite：是否重写，如果设置参数为数组，则直接替换，不进行深度拷贝，原理如下：
// if(overwrite === true) {
// var params = $.extend({}, this.p, newParams);
// this.p = params;
// } else {
// $.extend(true,this.p,newParams);
// }
$('#dataGrid').dataGrid('setParam', params, overwrite);
// 举例：datatype为local时，则更新数据方法为：
$('#roleGrid').dataGrid('setParam', {data:[{},{},{}], page: 1, rowNum: 5000}, true);
$('#roleGrid').dataGrid('refresh');
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 获取参数
$('#dataGrid').dataGrid('getParam', paramName);
1
# 获取所有数据ID
$('#dataGrid').dataGrid('getDataIDs');
1
# 获取某一行数据
$('#dataGrid').dataGrid('getRowData', rowId);
1
# 设置某一行数据
var data = {}; // 行数据
$('#dataGrid').dataGrid('setRowData', rowId, data);
1
2
2
# 获取全部行数据
$('#dataGrid').dataGrid('getRowData');
1
# 获取选择行ID
$('#dataGrid').dataGrid('getSelectRow');
1
# 获取选择行数组ID
$('#dataGrid').dataGrid('getSelectRows');
1
# 设置或取消选择行
$('#dataGrid').dataGrid('setSelectRow', id, isCancel);
1
参数 isCancel 为 true 时，指取消选择行，同 resetSelection 方法
dataGrid.dataGrid('resetSelection', id);
1
实现：点击复选框的时候再去选择或取消选择
onSelectRow: function(id, isSelect, event){
if(event && event.target && !$(event.target).hasClass('cbox')){
dataGrid.dataGrid('setSelectRow', id, isSelect);
return;
}
},
1
2
3
4
5
6
2
3
4
5
6
# 刷新表格（带分页）
$('#dataGrid').dataGrid('refresh', pageNo, pageSize);
1
不使用表单方式设置分页：
$("#dataGrid").dataGrid({
url: '${ctx}/sys/custom/listData',
postData: {'param1':'13','param2':'34'},
page: 1, // 当前页码
rowNum: 10, // 每页显示的条数
// 其它参数省略 ...
});
// 更新提交数据、分页参数，并重载表格
$('#dataGrid').dataGrid('setParam', {
postData: {'param1':'56','param2':'78'},
page: 2, rowNum: 10
}).dataGrid('reloadGrid');
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
本地数据表格，则更新数据方法：
$('#empOfficeGrid').dataGrid('setParam', {
data:[{},{},{}],
page: 1, rowNum: 5000
}, true).dataGrid('reloadGrid');
1
2
3
4
2
3
4
点击查询阻止默认查询：
$("#searchForm").unbind('submit').submit(function(e){
// 添加成立再执行查询
if (true) {
$("#dataGrid").dataGrid('refresh', 1);
}
return false;
});
1
2
3
4
5
6
7
2
3
4
5
6
7
# 只刷新表格（重新载入）
$('#dataGrid').dataGrid('reloadGrid');
1
# 重载、卸载、销毁表格
var options = { 表格选项... };
var dataGridId = 'dataGrid'; //$("#dataGrid").jqGrid('GridUnload');
$("#gbox_" + dataGridId).html('<table id="'+dataGridId+'"></table>');
$("#" + dataGridId).dataGrid(options);
1
2
3
4
2
3
4
# 删除当前行（普通列表用）
$('#dataGrid').dataGrid('delRowData', id);
1
# 删除树节点（树结构用）
$('#dataGrid').dataGrid('delTreeNode', id);
1
# 展开树节点
// level：一次展开的层次（数值）
$('#dataGrid').dataGrid('expandTreeNode', level);
1
2
2
# 折叠树节点
$('#dataGrid').dataGrid('collapseTreeNode');
1
# 获取孩子节点
$('#dataGrid').dataGrid("getNodeChildren", rowId);
1
# 添加行数据
$('#dataGrid').jqGrid('addRow', { position: 'last',
addRowParams: {keys: false, focusField: true},
initdata: {id: '', status: Global.STATUS_NORMAL}
});
1
2
3
4
2
3
4
插入到指定位置：
$('#dataGrid').jqGrid('addRow', { position: 'before', // 插入位置：first、last、before、after
src: '行id', // 指定行的id，插入到指定位置前或后
addRowParams: {keys: false, focusField: true},
initdata: {id: '', status: Global.STATUS_NORMAL}
});
1
2
3
4
5
2
3
4
5
# 恢复编辑行
用于将编辑状态的行数据还原为非编辑状态
var lastSelection = '行id';
$('#dataGrid').dataGrid('saveRow', lastSelection)
.dataGrid('restoreRow', lastSelection);
1
2
3
2
3
# 刷新树表格
// expandLevel: 展开的层级， parentCode：跟节点编号（只显示哪一级）
$('#dataGrid').dataGrid('refreshTree', expandLevel, parentCode);
1
2
2
# 刷新树的子节点
// rowid 上级节点id，要刷新节点
// currentRowid 删除当前节点的id，然后再重新加载新的父节点
$('#dataGrid').dataGrid('refreshTreeChildren', rowid, currentRowid);
1
2
3
2
3
# 显示隐藏列
$('#dataGrid').dataGrid('hideCol', '列名'); //隐藏列
$('#dataGrid').dataGrid('showCol', '列名'); //显示列
1
2
2
注意：锁定的列不能隐藏
列表设置显示隐藏或排序后的事件（可用于设置持久化）
$('#dataGrid').on('jqGridRemapColumns',function(){
log($('#dataGrid').dataGrid('getParam', 'columnModel'));
});
1
2
3
2
3
# 合并单元格
1、合并相同数据行
在加载完成数据之后调用 mergeCell 方法：
ajaxSuccess: function(data){
// 第二个参数指定，合并的单元格列名（多个用逗号分隔，如：'company.companyNameSimple,office.officeName'）
$('#dataGrid').dataGrid('mergeCell', 'company.companyNameSimple,office.officeName');
}
1
2
3
4
2
3
4
2、合并指定数据列：
根据加载的数据设置单元格属性：
columnModel: [{
name:'a', index:'a', width:50,
cellattr: function(rowId, tv, row, cm, val) {
if (rowId == '123') { return ' colspan=2' }
}
},{
name:'b', index:'b', width:50,
cellattr: function(rowId, tv, row, cm, val) {
if (rowId == '123') { return ' style="display:none;"' }
}
}]
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 表格添加合计行
1、设置 options 选项如下：
showFooter: true, // 是否显示底部合计行
1
2、合计行数据来源有两种方式
a) 第一种是： 后台添加如下代码
page.addOtherData("user.userName", "<em>合计： </em>");
page.addOtherData("sex", "<em>100 </em>");
page.addOtherData("remarks", "<em>￥1000 </em>");
1
2
3
2
3
返回的数据格式如下：
{"pageNo":1,
"pageSize":30,
"list":[ 返回结果集数据... ],
"otherData":{ // 此属性为合计行数据集（列名对应合计行数据）
"user.userName":"<em>合计： </em>"}
"sex":"<em>100 </em>"}
"remarks":"<em>￥1000 </em>"
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
b) 第二种是：请求完成之后通过js设置，举例如下：
ajaxSuccess: function(data){ // 加载成功后执行方法
// 设置底部合计行数据(设置合计行)
$('#dataGrid').dataGrid("footerData", "set", {
'user.userName' : '<em>合计： </em>',
'sex': '<em>100 </em>',
'remarks': '<em>￥1000 </em>'
}, false);
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 列表列格式化设置
// 金额、货币、数量、千分位显示
{header:'金额', name:'price', formatter:'integer', formatoptions:{thousandsSeparator:',', defaulValue:''}},
{header:'货币', name:'price', formatter:'currency', formatoptions:{thousandsSeparator:',', decimalSeparator:'.', decimalPlaces:2, defaulValue:'', prefix:'￥'}},
{header:'数量', name:'amount', formatter:'number', formatoptions:{thousandsSeparator:',', decimalPlaces:3, defaulValue:''}},
// 日期类型格式化（原格式：yyyy-MM-dd HH:mm:ss 转换为：yyyy-MM-dd HH:mm）
{header:'更新时间', name:'updateDate', formatter:"date", formatoptions:{srcformat:'Y-m-d H:i:s', newformat:'Y-m-d H:i'}},
1
2
3
4
5
6
2
3
4
5
6
formatter：主要是设置格式化类型(integer、email等以及函数来支持自定义类型)
formatoptions：用来设置对应 formatter 的参数，jqGrid 中预定义了常见的格式及其 options 如下：
- integer
- thousandsSeparator： //千分位分隔符,
- defaulValue
- number
- decimalSeparator, //小数分隔符，如"."
- thousandsSeparator, //千分位分隔符，如","
- decimalPlaces, //小数保留位数
- defaulValue
- currency
- decimalSeparator, //小数分隔符，如"."
- thousandsSeparator, //千分位分隔符，如","
- decimalPlaces, //小数保留位数
- defaulValue,
- prefix //前缀，如加上"$"
- suffix//后缀
- date
- srcformat, //source的本来格式
- newformat //新格式
- email
- 没有参数，会在该cell是email加上： mailto:name@domain.com
- showlink
- baseLinkUrl, //在当前cell中加入link的url，如"jq/query.action"
- showAction, //在baseLinkUrl后加入&action=actionName
- addParam, //在baseLinkUrl后加入额外的参数，如"&name=aaaa"
- target,
- idName //默认会在baseLinkUrl后加入,如".action?id=1"。改如果设置idName="name",那么".action?name=1"。其中取值为当前rowid
- checkbox
- disabled //true/false 默认为true此时的checkbox不能编辑，如当前cell的值是1、0会将1选中
- select
- 设置下拉框，没有参数，需要和colModel里的editoptions配合使用
# 使用本地数据渲染
1、关键属性：
data: [{k:'v1'},{k:'v2'}], // 本地数据（JSON格式）
datatype: "local", // 设置数据类型为，local（本地数据）
rowNum: 1000 // 设置最大显示行数（如果不设置，默认为1000）
1
2
3
2
3
2、演示例子：
// 用户编辑的选择角色示例
$("#roleGrid").dataGrid({
data: ${toJson(roleList)},
datatype: "local",
columnModel: [
{header:'角色名称', name:'roleName', sortable:false, width:100},
{header:'角色编码', name:'roleCode', sortable:false, width:100}
],
showCheckbox: true, // 显示复选框
autoGridHeight: function(){
return 'auto'; // 高度为自动高度
},
autoGridWidth: function(){
return $('#inputForm .tab-content').width(); // 相对宽度
}
});
// 复选框，选择行相应行
var ids = "${user.roleCodes}".split(",");
for(var i=0; i<ids.length; i++) {
$("#roleGrid").dataGrid('setSelectRow', ids[i]);
}
//获取选中角色ID字符串
$("#roleGrid").dataGrid('getSelectRows').join(',');
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
3、树表例子：
$('#dataGrid').dataGrid({
data: [
{
"id":"123",
"treeName":"一级节点",
"treeLevel":0,
"parentCode":"0",
"isTreeLeaf":false
},
{
"id":"455",
"treeName":"二级节点",
"treeLevel":1,
"parentCode":"123",
"isTreeLeaf":true
}
],
datatype:'local',
columnModel: [
{header:'${text("机构名称")}', name:'treeName', width:300, align:"left", frozen:true, formatter: function(val, obj, row, act){
return '( '+row.id+' ) '+(val||row.id);
}},
{header:'id', name:'id', hidden:true}, // 不可删除
{header:'${text("操作")}', name:'actions', width:150, sortable:false, title:false, formatter: function(val, obj, row, act){
var actions = [];
return actions.join('');
}}
],
treeGrid: true, // 启用树结构表格
defaultExpandLevel: 1, // 默认展开的层次
ajaxSuccess: function(data){
$('#dataGrid').find("div.treeclick").unbind('dblclick');
}
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
# 动态数据、动态列模型
// 动态追加数据
var data = [];
data.push({'roleName':'普通员工','roleCode'});
data.push({'roleName':'普通员工','roleCode'});
// 动态生成列模型
var columnModel = [];
columnModel.push({header:'角色名称', name:'roleName', sortable:false, width:100});
columnModel.push({header:'角色编码', name:'roleCode', sortable:false, width:100});
// 生成表格
$("#roleGrid").dataGrid({
data: data, // 应用动态生成的数据
datatype: "local",
columnModel: columnModel, // 应用动态生成的列模型
showCheckbox: false
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 主子表增删改、编辑表
# 主子表实例代码
<table id="testDataChildDataGrid"></table>
<a href="#" id="testDataChildDataGridAddRowBtn" class="btn btn-primary btn-sm mt10 mb10"
><i class="fa fa-plus"></i> ${text('增行')}</a>
<script>
//初始化测试数据子表DataGrid对象
$("#testDataChildDataGrid").dataGrid({
data: ${toJson(testData.testDataChildList)},
datatype: "local", // 设置本地数据
autoGridHeight: function(){return 'auto'}, // 设置自动高度
// 设置数据表格列
columnModel: [
{header:'状态', name:'status', editable:true, hidden:true},
{header:'主键', name:'id', editable:true, hidden:true},
{header:'${text("排序号")}', name:'testSort', width:150, editable:true, edittype:'text', editoptions:{'maxlength':'11', 'class':'form-control digits'}},
{header:'${text("父表主键")}', name:'testData.id', editable:true, hidden:true},
{header:'${text("单行文本")}', name:'testInput', width:150, editable:true, edittype:'text', editoptions:{'maxlength':'200', 'class':'form-control'}},
{header:'${text("多行文本")}', name:'testTextarea', width:150, editable:true, edittype:'textarea', editoptions:{'maxlength':'200', 'class':'form-control', 'rows':'1'}},
{header:'${text("下拉框")}', name:'testSelect', width:100,
editable:true, edittype:'select', editoptions:{'class':'form-control',
items: $.merge([{dictLabel:' ',dictValue:''}], ${@DictUtils.getDictListJson('sys_menu_type')}),
itemLabel: 'dictLabel', itemValue: 'dictValue', dataInit: function(element){
$(element).select2().on("change",function(){$(this).resetValid()});
}
}
},
{header:'${text("下拉多选")}', name:'testSelectMultiple', width:100,
editable:true, edittype:'select', editoptions:{multiple:true, 'class':'form-control',
items: $.merge([], ${@DictUtils.getDictListJson('sys_menu_type')}),
itemLabel: 'dictLabel', itemValue: 'dictValue', dataInit: function(element){
$(element).select2().on("change",function(){$(this).resetValid()});
}
}
},
{header:'${text("单选框")}', name:'testRadio', width:100,
editable:true, edittype:'select', editoptions:{'class':'form-control',
items: $.merge([{dictLabel:' ',dictValue:''}], ${@DictUtils.getDictListJson('sys_menu_type')}),
itemLabel: 'dictLabel', itemValue: 'dictValue', dataInit: function(element){
$(element).select2().on("change",function(){$(this).resetValid()});
}
}
},
{header:'${text("复选框")}', name:'testCheckbox', width:100,
editable:true, edittype:'select', editoptions:{multiple:true, 'class':'form-control',
items: $.merge([], ${@DictUtils.getDictListJson('sys_menu_type')}),
itemLabel: 'dictLabel', itemValue: 'dictValue', dataInit: function(element){
$(element).select2().on("change",function(){$(this).resetValid()});
}
}
},
{header:'${text("下拉框-非字典数据")}', name:'testSelect2', width:100,
editable:true, edittype:'select', editoptions:{'class':'form-control',
items: [{dictLabel:'1',dictValue:'是'},{dictLabel:'0',dictValue:'否'}],
itemLabel: 'dictLabel', itemValue: 'dictValue', dataInit: function(element){
$(element).select2().on("change",function(){
// 重新进行当前控件的表单验证
$(this).resetValid();
// 下拉框选择后，自动给指定列的输入框赋值（联动实例）
$(this).closest('tr').find('[aria-describedby="dataGrid_testDate"] .form-control')
.val('2020-11-26'); // 查找格式：[aria-describedby="表格编码_字段名"]
});
}
}
},
{header:'${text("日期选择")}', name:'testDate', width:150,
formatter:'date', formatoptions:{srcformat:'Y-m-d H:i:s',newformat:'Y-m-d'},
editable:true, edittype:'text', editoptions:{'class':'form-control Wdate', 'readonly':'true',
dataInit: function(element){
laydate.render({elem:element, type:'date', format:'yyyy-MM-dd', done: function(){
// 选择日期后，自动给下一个输入框赋值（联动实例）
$(element).closest('td').next().find('.form-control').val('2020-11-26 10:10:10');
}});
}
}}
},
{header:'${text("日期时间")}', name:'testDatetime', width:150,
formatter:'date', formatoptions:{srcformat:'Y-m-d H:i:s',newformat:'Y-m-d H:i:s'},
editable:true, edittype:'text', editoptions:{'class':'form-control Wdate', 'readonly':'true',
dataInit: function(element){
laydate.render({elem:element, type:'datetime', format:'yyyy-MM-dd HH:mm'});
}
}}
},
{header:'${text("用户选择")}', name:'testUser', width:150,
formatter: function(val, obj, row, act){
return js.val(row, 'testUser.userCode')+'|'+js.val(row, 'testUser.userName');
}, editable: true, edittype: "custom", editoptions: {
custom_element: function(val, editOptions) {
return js.template('treeselectTpl', {
id: 'user_'+editOptions.id, title: '用户选择',
name: 'testUser.userCode', value: val.split('|')[0],
labelName: 'testUser.userName', labelValue: val.split('|')[1],
url: '${ctx}/sys/office/treeData?isLoadUser=true', cssClass: ''
});
},
custom_value: function(element, act){
return {userCode: element.find('[type=hidden]').val(),
userName: element.find('[type=text]').val()};
},
dataInit: function(element){
// 初始化控件后设置只读模式（实例）
// $(element).find('.form-control, .btn').addClass('disabled');
}
}
},
{header:'${text("用户列表选择")}', name:'testUser2', width:150,
formatter: function(val, obj, row, act){
return js.val(row, 'testUser.userCode')+'|'+js.val(row, 'testUser.userName');
}, editable: true, edittype: "custom", editoptions: {
custom_element: function(val, editOptions) {
return js.template('listselectTpl', {
id: 'user_'+editOptions.id, title: '用户选择',
name: 'testUser.userCode', value: val.split('|')[0],
labelName: 'testUser.userName', labelValue: val.split('|')[1],
url: '${ctx}/sys/empUser/empUserSelect', cssClass: '',
itemCode: 'userCode', itemName: 'userName'
});
}
}
},
{header:'${text("机构选择")}', name:'testOffice', width:150,
formatter: function(val, obj, row, act){
return js.val(row, 'testOffice.officeCode')+'|'+js.val(row, 'testOffice.officeName');
}, editable: true, edittype: "custom", editoptions: {
custom_element: function(val, editOptions) {
return js.template('treeselectTpl', {
id: 'office_'+editOptions.id, title: '机构选择',
name: 'testOffice.officeCode', value: val.split('|')[0],
labelName: 'testOffice.officeName', labelValue: val.split('|')[1],
url: '${ctx}/sys/office/treeData?officeTypes=1,2', cssClass: ''
});
}
}
},
{header:'${text("区域选择")}', name:'testAreaCode', width:150,
formatter: function(val, obj, row, act){
return js.val(row, 'testAreaCode')+'|'+js.val(row, 'testAreaName');
}, editable: true, edittype: "custom", editoptions: {
custom_element: function(val, editOptions) {
return js.template('treeselectTpl', {
id: 'area_'+editOptions.id, title: '区域选择',
name: 'testAreaCode', value: val.split('|')[0],
labelName: 'testAreaName', labelValue: val.split('|')[1],
url: '${ctx}/sys/area/treeData', cssClass: ''
});
}
}
},
{header:'${text("操作")}', name:'actions', width:80, sortable:false, fixed:true, formatter: function(val, obj, row, act){
var actions = [];
if (val == 'new'){
actions.push('<a href="#" onclick="js.confirm(\'${text("您确认要删除这条数据吗？")}\', function(){$(\'#testDataChildDataGrid\').dataGrid(\'delRowData\',\''+obj.rowId+'\')});return false;"><i class="fa fa-trash-o"></i></a> ');
}else{
actions.push('<a href="#" onclick="js.confirm(\'${text("您确认要删除这条数据吗？")}\', function(){$(\'#testDataChildDataGrid\').dataGrid(\'setRowData\',\''+obj.rowId+'\',null,{display:\'none\'});$(\'#'+obj.rowId+'_status\').val(\''+Global.STATUS_DELETE+'\');});return false;"><i class="fa fa-trash-o"></i></a> ');
}
return actions.join('');
}, editoptions: {defaultValue: 'new'}}
],
// 编辑表格参数
editGrid: true, // 是否是编辑表格
editGridInitRowNum: 1, // 编辑表格的初始化新增行数
editGridAddRowBtn: $('#testDataChildDataGridAddRowBtn'), // 子表增行按钮
editGridAddRowBtnToHeader: true, // 子表增行按钮是否显示到表头上 v4.1.7
editGridAddRowInitData: {id: '', status: Global.STATUS_NORMAL}, // 新增行的时候初始化的数据
// 编辑表格的提交数据参数
editGridInputFormListName: 'testDataChildList', // 提交的数据列表名
editGridInputFormListAttrs: 'status,id,testSort,testData.id,testInput,testTextarea,testSelect,testSelectMultiple,testRadio,testCheckbox,testDate,testDatetime,testUser.userCode,testOffice.officeCode,testAreaCode,testAreaName,', // 提交数据列表的属性字段
// 加载成功后执行事件
ajaxSuccess: function(data){
}
})
// 若想隐藏列后序号连续，可添加如下代码
.on('jqGridAfterGridComplete', function(){
$(this).find("td.jqgrid-rownum:visible").each(function(i){
$(this).html(i+1);
});
});
</script>
<script id="treeselectTpl" type="text/template">//<!--<div>
<#form:treeselect id="{{d.id}}" title="{{d.title}}" name="{{d.name}}" value="{{d.value}}"
labelName="{{d.labelName}}" labelValue="{{d.labelValue}}" url="{{d.url}}"
class="{{d.cssClass}}" btnClass="btn-sm" allowClear="true"/>
</div>//--></script>
<script id="listselectTpl" type="text/template">//<!--<div>
<#form:listselect id="{{d.id}}" title="{{d.title}}" name="{{d.name}}" value="{{d.value}}"
labelName="{{d.labelName}}" labelValue="{{d.labelValue}}" url="{{d.url}}"
class="{{d.cssClass}}" btnClass="btn-sm" allowClear="true"
itemCode="{{d.itemCode}}" itemName="{{d.itemName}}"/>
</div>//--></script>
<script>
$("#inputForm").validate({
submitHandler: function(form){
js.ajaxSubmitForm($(form), function(data){
js.showMessage(data.message);
if(data.result == Global.TRUE){
js.closeCurrentTabPage(function(contentWindow){
contentWindow.page();
});
}
}, "json");
}
});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
# 更新列表字段名字
$('#dataGrid').dataGrid('updateListFieldName', listName, fieldNames);
1
- 用于：提交子表前，更新列表字段名字，以方便后台接受
- 参数：listName：后台接受实体中的 list 属性名（可为空，如果不填，则自动获取 editGridInputFormListName）
- 参数：fieldNames：list 对象里的属性，多个用逗号分隔，如：'id,name,remarks'（可为空，如果不填，则自动获取 editGridInputFormListAttrs）
- 目的：将对应字段名字转换为 listName[index].fieldName
假设目前 grid 中有 3 条数据，调用如下方法：
$('#dataGrid').dataGrid('updateListFieldName', 'testDataChildList', 'id,name,remarks');
1
调用前的 input name 参数：
1、<input name="id" value=""/>、<input name="name" value=""/>、<input name="remarks" value=""/>
2、<input name="id" value=""/>、<input name="name" value=""/>、<input name="remarks" value=""/>
3、<input name="id" value=""/>、<input name="name" value=""/>、<input name="remarks" value=""/>
1
2
3
2
3
调用后的 input name 参数：
1、<input name="testDataChildList[0].id" value=""/>、
<input name="testDataChildList[0].name" value=""/>、
<input name="testDataChildList[0].remarks" value=""/>
2、<input name="testDataChildList[1].id" value=""/>、
<input name="testDataChildList[1].name" value=""/>、
<input name="testDataChildList[1].remarks" value=""/>
3、<input name="testDataChildList[2].id" value=""/>、
<input name="testDataChildList[2].name" value=""/>、
<input name="testDataChildList[2].remarks" value=""/>
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 主子表常见问题
常见问题1：
1、主子表的子表，第一次点击提交按钮时，子表数据不能提交到后台（子表属性没有添加 xxxList[i].xxxx 前缀）；前端有可能提示“编码长度不能超过 64 个字符”；第二次点击提交按钮时，才能提交后台。
2、这是因为在初始化 dataGrid 时会先去绑定表单 submit 事件，去执行 dataGrid 的 updateListFieldName 方法，然后在进行提交。
3、如果您将 validate 绑定表单事件放到 dataGrid 初始化前面去执行，就不会先去执行 updateListFieldName 方法，所以造成了，第一次没有生效。
解决方法：
1、将 validate 代码，移动到 dataGrid 代码后面即可；
2、如果您的 dataGrid 是动态创建的，无法放到 validate 之后绑定，我们给出实例，参考如下：
//初始化测试数据子表DataGrid对象
$("#testDataChildDataGrid").dataGrid({
...
editGridInputForm: $(), //《添加这一行》作用：关闭 submit 时，自动调用 updateListFieldName 方法
editGridInputFormListName: 'testDataChildList', // 提交的数据列表名
editGridInputFormListAttrs: 'status,id,testInput,testTextarea,testSelect', // 提交数据列表的属性字段
...
});
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
$("#inputForm").validate({
submitHandler: function(form){
// 《添加这一行》作用：submit 之前，手动调用 updateListFieldName 方法
$('#dataGrid').dataGrid('updateListFieldName');
js.ajaxSubmitForm($(form), function(data){
js.showMessage(data.message);
if(data.result == Global.TRUE){
js.closeCurrentTabPage(function(contentWindow){
contentWindow.page();
});
}
}, "json");
}
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
常见问题2：
为什么我填写了一行子表数据，保存后回显了两行甚至更多行数据？
这可能是列中的提交参数名（即 columnModel 里的 name 或 js.template 中的 id ）有重复的，提交了相同的参数名，可能会导致该问题的发生。
# 主子表初始非编辑状态
- 初始化表单的时候，子表为非编辑状态
- 点击新增行，新增的行为编辑状态
- 单击当前行的编辑按钮，当前行为编辑状态
- 支持新增和编辑状态下的删除行操作
//初始化测试数据子表DataGrid对象
$("#testDataChildDataGrid").dataGrid({
data: ${toJson(testData.testDataChildList)},
datatype: "local", // 设置本地数据
autoGridHeight: function(){return 'auto'}, // 设置自动高度
// 设置数据表格列
columnModel: [
{header:'关键字段', name:'id', hidden:false, formatter: function(val, obj, row, act){
var html = [];
html.push('<input type="text" id="'+row.id+'_id" name="id" value="'+(row.id||'')+'">');
html.push('<input type="text" id="'+row.id+'_status" name="status" value="'
+(row.status||Global.STATUS_NORMAL)+'">');
return html.join('');
}},
{header:'${text("文本")}', name:'testInput', width:150,
editable:true, edittype:'text', editoptions:{'maxlength':'200', 'class':'form-control'}},
{header:'${text("下拉框")}', name:'testSelect', width:100,
formatter: function(val, obj, row, act){
return js.getDictLabel(obj.colModel.editoptions.items, val, '${text("未知")}', true);
},
unformat: function(val, obj, cell){
return val;
},
editable:true, edittype:'select', editoptions:{'class':'form-control',
items: $.merge([{dictLabel:' ',dictValue:''}],
${@DictUtils.getDictListJson('sys_menu_type')}),
itemLabel: 'dictLabel', itemValue: 'dictValue', dataInit: function(element){
$(element).select2().on("change",function(){$(this).resetValid()});
}
}
},
{header:'${text("机构选择")}', name:'testOffice', width:150,
formatter: function(val, obj, row, act){
return js.val(row, 'testOffice.officeName');
},
unformat: function(val, obj, cell){
return js.val(obj.colModel.data[obj.rowId], 'officeCode')
+ '|' + js.val(obj.colModel.data[obj.rowId], 'officeName');
},
editable: true, edittype: "custom", editoptions: {
custom_element: function(val, editOptions) {
return js.template('treeselectTpl', {
id: 'office_'+editOptions.id, title: '机构选择',
name: 'testOffice.officeCode', value: val.split('|')[0],
labelName: 'testOffice.officeName', labelValue: val.split('|')[1],
url: '${ctx}/sys/office/treeData?officeTypes=1,2', cssClass: ''
});
}
}
},
{header:'${text("操作")}', name:'actions', width:80, sortable:false, fixed:true, formatter: function(val, obj, row, act){
var actions = [];
// 编辑行按钮，点击后，改变当前行为编辑状态
actions.push('<a href="#" onclick="$(\'#testDataChildDataGrid\').dataGrid(\'editRow\',\''+obj.rowId+'\',{keys:true,focusField:true});return false;"><i class="fa fa-pencil"></i></a> ');
if (val == 'new'){
// 点击新增行出现的删除按钮，从未保存到数据库过，直接删除即可
actions.push('<a href="#" onclick="js.confirm(\'${text("您确认要删除这条数据吗？")}\', function(){$(\'#testDataChildDataGrid\').dataGrid(\'delRowData\',\''+obj.rowId+'\')});return false;"><i class="fa fa-trash-o"></i></a> ');
}else{
// 初始化表单，回显的数据的删除按钮，隐藏行，并标记行为删除状态，点击表单保存后才真正进行删除
actions.push('<a href="#" onclick="js.confirm(\'${text("您确认要删除这条数据吗？")}\', function(){$(\'#testDataChildDataGrid\').dataGrid(\'setRowData\',\''+obj.rowId+'\',null,{display:\'none\'});$(\'#'+obj.rowId+'_status\').val(\''+Global.STATUS_DELETE+'\');});return false;"><i class="fa fa-trash-o"></i></a> ');
}
return actions.join('');
}, editoptions: {defaultValue: 'new'}}
],
// 编辑表格参数
editGrid: true, // 是否是编辑表格
editGridInitRowNum: 1, // 编辑表格的初始化新增行数
editGridInitAllRowEdit: false, // 是否初始化就编辑所有行（*** 重点 ***）
editGridAddRowBtn: $('#testDataChildDataGridAddRowBtn'), // 子表增行按钮
editGridAddRowInitData: {id: '', status: Global.STATUS_NORMAL}, // 新增行的时候初始化的数据
// 编辑表格的提交数据参数
editGridInputFormListName: 'testDataChildList', // 提交的数据列表名
editGridInputFormListAttrs: 'status,id,testInput,testOffice.officeCode,', // 提交数据列表的属性字段
// 加载成功后执行事件
ajaxSuccess: function(data){
// 左上角增加新增按钮，同表格下的新增。
$('#jqgh_testDataChildDataGrid_rn').append('<a href="javascript:" onclick="'
+ '$(\'#testDataChildDataGridAddRowBtn\').click();"><i class="fa fa-plus"></i></a>');
}
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
# 选择编辑行、单行编辑
- 选择行后，当前选择的行设置为编辑状态
- 其它非选择行的数据，还原非编辑状态
onSelectRow: function(id) {
if (id){
// 选择行后，编辑此行数据
var dg = $('#dataGrid');
if (window.lastSelRow != id){
dg.dataGrid('saveRow', window.lastSelRow);
dg.dataGrid('editRow', id, {keys:true, focusField:false});
window.lastSelRow = id;
}
}
},
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 删除按钮自定义回调
actions.push('<a href="${ctx}/sys/config/delete?id=' + row.id + '" class="btnList" title="删除参数"'
+ ' data-confirm="确认要删除该参数吗？" data-confirm-success="alert(\'我是回调\')">'
+ '<i class="fa fa-trash-o"></i></a> ');
1
2
3
2
3
# 保存表单后刷新列表
$("#inputForm").validate({
submitHandler: function(form){
// 发送异步提交表单请求
js.ajaxSubmitForm($(form), function(data){
// 保存表单后提示结果消息
js.showMessage(data.message);
// 如果提交结果为true，则代表保存成功
if(data.result == Global.TRUE){
// 保存成功，后关闭当前Tab页签
js.closeCurrentTabPage(function(contentWindow){
// 这里是，在关闭当前Tab页签之前执行的回调方法
// 参数 contentWindow 返回的是上一个Tab页签的 window 对象
// 调用上一个页签window对象里的page()方法，刷新grid数据
contentWindow.page();
});
}
}, "json");
}
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 子表、嵌套表、subgrid
// 初始化DataGrid对象
$('#dataGrid').dataGrid({
searchForm: $("#searchForm"),
columnModel: [
{header:'${text("单行文本")}', name:'testInput', index:'a.test_input', width:150, align:"left"},
{header:'${text("多行文本")}', name:'testTextarea', index:'a.test_textarea', width:150, align:"left"},
{header:'${text("状态")}', name:'status', index:'a.status', width:150, align:"center", formatter: function(val, obj, row, act){
return js.getDictLabel(${@DictUtils.getDictListJson('sys_search_status')}, val, '${text("未知")}', true);
}}
],
// 双击表格行，打开页签
ondblClickRow: function(id, rownum, colnum, event){
js.addTabPage(null, '编辑数据', '${ctx}/test/testData/form?id='+id);
},
// 子表格支持演示
subGrid: true,
subGridRowExpanded: function (subgridId, rowId) {
$('#'+subgridId).html('<h5><i class="icon-docs"></i> 子表数据</h5>'
+'<table id="'+subgridId+'_subgrid"></table>');
$('#'+subgridId+'_subgrid').dataGrid({
url: '${ctx}/test/testData/subListData',
postData: {'testData.id': rowId},
autoGridHeight: function(){return 'auto'}, // 设置自动高度
autoGridWidth: function(){return $("#"+subgridId).width();}, // 设置自动高度
// 设置数据表格列
columnModel: [
{header:'${text("单行文本")}', name:'testInput', width:150},
{header:'${text("日期时间")}', name:'testDatetime', width:150, align:"center"}
],
// 加载成功后执行事件
ajaxSuccess: function(data){
}
});
},
// 加载成功后执行事件
ajaxSuccess: function(data){
}
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
# 表格行拖动、拖动行
<table id="dataGrid"></table>
<script src="${ctxStatic}/jqGrid/4.7/plugins/jquery.tablednd.js?${_version}"></script>
1
2
2
$("#dataGrid").dataGrid({
columnModel: [
{header:'列名', name:'columnSort', width:30, frozen:true, align:'center', editable:true, edittype:'text',
editoptions:{'maxlength':'8', 'class':'form-control required digits hide columnSort',
dataInit: function(element){
if ($(element).val() == ''){
$(element).val($(element).closest('table').find('tr').length * 10);
}
$(element).parent().append('<i class="fa fa-arrows" style="color:#aaa;cursor:move"></i>');
}
}, classes: 'columnSort'}
],
editGrid: true, // 是否是编辑表格
ajaxSuccess: function(data){ // 加载成功后执行方法
$("#dataGrid").tableDnD({
onDragClass: "dragClass",
dragHandle: "columnSort",
onDrop: function(table, row){
$(table).find('input.columnSort').each(function(i){
$(this).val((i + 1) * 10);
});
}
});
}
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
# 单击复选框时再去选择行
$("#dataGrid")
.on('jqGridBeforeSelectRow', function(t, id, e){
return $(e.target).hasClass('cbox');
})
// 如果是编辑表格，则添加下面事件
.on('jqGridInlineEditRow', function(){
$(this).find('input, select, textarea, .btn').unbind("focus");
});
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 行高亮、行变色、行着色
$("#dataGrid").dataGrid({
// ... 省略其它配置 ...
ajaxSuccess: function(data){
// 根据数据状态，高亮行，变色行，着色行
$.each(data.list, function(k, v){
if (v.status == Global.STATUS_DISABLE){
$('#'+v.id+' td').css('background', '#e4fda8');
}
});
});
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 给分页控件附加信息
$("#dataGrid").dataGrid({
// ... 省略其它配置 ...
ajaxSuccess: function(data){
$('#dataGridPage ul:last').after('<ul class="pagination">'
+'<li class="disabled controls">分页附加信息</li></ul>');
});
1
2
3
4
5
6
2
3
4
5
6
# 调整标题高度
.ui-jqgrid .ui-jqgrid-htable th {height:24px;}
.ui-jqgrid .ui-jqgrid-htable th div {padding:4px 0px 3px 2px;}
.ui-jqgrid .ui-jqgrid-frozen .ui-jqgrid-htable th div {height:24px!important;}
1
2
3
2
3
