easyUI---datagrid合并单元格代码实现

时间:2023-03-09 16:18:59
easyUI---datagrid合并单元格代码实现

1、html部分:

<div id="table1"></div>

2、js部分:

$('#table1').datagrid({
data : data,
loadFilter: pagerFilter,
height: $(document).height()*0.87,
striped: true,
selectOnCheck: true,
pagination: true,
pageSize:10,
pageList:[10,20,30,40,50],
onLoadSuccess: function (data) {
if (data.rows.length > 0) {
$('#table1').datagrid("autoMergeCells", ['userid']);
}
},
columns: [
[{
field: 'userid',
title: '列名',
width: '15%',
align: 'center'
},{
field: 'username',
title: '列名',
width: '15%',
align: 'center'
}]
});
autoMergeCells方法扩展了datagrid的方法,实现如下:
/**
* EasyUI DataGrid根据字段动态合并单元格
* 参数 jq 要合并table的id
* 参数 fields 要合并的列,用逗号分隔(例如:"field1,field2,field3,...");
*/
$.extend($.fn.datagrid.methods, {
autoMergeCells: function (jq, fields) {
return jq.each(function () {
var target = $(this);
if (!fields) {
fields = target.datagrid("getColumnFields");
}
var rows = target.datagrid("getRows");
var i = 0,
j = 0,
temp = {};
for (i; i < rows.length; i++) {
var row = rows[i];
j = 0;
for (j; j < fields.length; j++) {
var field = fields[j];
var tf = temp[field];
if (!tf) {
tf = temp[field] = {};
tf[row[field]] = [i];
} else {
var tfv = tf[row[field]];
if (tfv) {
tfv.push(i);
} else {
tfv = tf[row[field]] = [i];
}
}
}
}
$.each(temp, function (field, colunm) {
$.each(colunm, function () {
var group = this; if (group.length > 1) {
var before,
after,
megerIndex = group[0];
for (var i = 0; i < group.length; i++) {
before = group[i];
after = group[i + 1];
if (after && (after - before) == 1) {
continue;
}
var rowspan = before - megerIndex + 1;
if (rowspan > 1) {
target.datagrid('mergeCells', {
index: megerIndex,
field: field,
rowspan: rowspan
});
}
if (after && (after - before) != 1) {
megerIndex = after;
}
}
}
});
});
});
}
});