Easyui 根据多个列合并单元格和每列单独合并
作者:互联网
Easyui 中没有自动合并的属性,所以得自己写方法
我们在easyui的表格的onLoadSuccess事件
onLoadSuccess:function(data1){
tbmerf('tb',['djbh','spmc','ysmc','xsxzmc','khmc','xymc','ygmc','rq','jhrq','ztrq','ztjd'])
}
//多列合并
function tbmerf(tb, fileds) {
var data = $('#'+tb).datagrid('getRows');
var mark = 1; //这里涉及到简单的运算,mark是计算每次需要合并的格子数
for (var i = 1; i < data.length; i++) {//这里循环表格当前的数据
var flg = true;
for (let j = 0; j < fileds.length; j++) {//这里是判断每个字段对应的和上一行是否相同,相同就需要合并
var fil = fileds[j];
if (!(data[i][fil] === data[i - 1][fil])) {
flg = false;
break;
}
}
if (flg) {//flg为true就是每个字段对应的和上一行相同,相同就需要合并
mark += 1;
for (let k = 0; k < fileds.length; k++) {//循环需要合并的列
$('#' + tb).datagrid('mergeCells', {
index: i + 1 - mark,//datagrid的index,表示从第几行开始合并;就是记住最开始需要合并的位置
field: fileds[k],//合并单元格的区域,就是clomun中的filed对应的列
rowspan: mark//纵向合并的格数,如果想要横向合并,就使用colspan:mark
});
}
} else {
mark = 1; //一旦前后两行的值不一样了,那么需要合并的格子数mark就需要重新计算
}
}
}
//列单独合并行
function comergeCells(tb, fileds) {//tb 合并的表格 fileds列数组
var data = $('#'+tb).datagrid('getRows');
for (let i = 0; i < fileds.length; i++) {
var mark = 1; //这里涉及到简单的运算,mark是计算每次需要合并的格子数
var fil = fileds[i];
for (var j = 1; j < data.length; j++) {//这里循环表格当前的数据
if (data[j][fil] === data[j - 1][fil]) {//flg为true就是每个字段对应的和上一行相同,相同就需要合并
mark += 1;
$('#' + tb).datagrid('mergeCells', {
index: j + 1 - mark,//datagrid的index,表示从第几行开始合并;就是记住最开始需要合并的位置
field: fileds[i],//合并单元格的区域,就是clomun中的filed对应的列
rowspan: mark//纵向合并的格数,如果想要横向合并,就使用colspan:mark
});
} else {
mark = 1; //一旦前后两行的值不一样了,那么需要合并的格子数mark就需要重新计算
}
}
}
}
标签:fileds,Easyui,data,单元格,合并,mark,var,tb 来源: https://blog.csdn.net/qq_38030465/article/details/122596497