在项目开发中，前端页面经常会遇到一些表格数据需要合并单元格的操作，尤其是各类统计报表，下面我就介绍一种单元格纵向合并的方法：
举个栗子：
| 姓名 |
工作时间 |
工作内容 |
| 张三 |
2019-01-01 |
工作1 |
| 张三 |
2019-01-01 |
工作2 |
| 张三 |
2019-01-02 |
工作3 |
1、如果想要合并完的效果只是姓名相同的就把姓名合并，即如下效果：
| 姓名 |
工作时间 |
工作内容 |
|
张三 |
2019-01-01 |
工作1 |
| 2019-01-01 |
工作2 |
|
| 2019-01-02 |
工作3 |
首先要在表格加载数据的方法里面，将要合并的列的属性加入合并单元格方法
cellattr: function(rowId, tv, rawObject, cm, rdata){
//合并单元格
return 'id=\'Name' + rowId + "\'"
}
下面是加载表格的JS完整方法：
$("#gridTable").jqGrid({
url: "@Url.Content("请求数据的接口"),
datatype: "json",
autowidth: true,
colModel: [
{
label: '姓名', name: 'Name', index: 'Name', width: 80, align: 'center', sortable: true,
cellattr: function (rowId, tv, rawObject, cm, rdata) {
//合并单元格
return 'id=\'Name' + rowId + "\'";
}
},
{label: '工作时间', name: 'Time', index: 'Time ', width: 80, align: 'center', sortable: true}，
{ label: '工作内容', name: 'TaskName', index: ' TaskName', width: 80, align: 'center', sortable: true },
],
gridComplete: function () {
//合并单元格
Merger(“gridName”, 'Name');
}
});
}
//合并单元格
function Merger(gridName, CellName) {
//得到显示到界面的id集合
var showIds = $("#" + gridName + "").getDataIDs();
//当前显示多少条
var length = showIds.length;
for (var i = 0; i < length; i++) {
//从上到下获取一条信息
var before = $("#" + gridName + "").jqGrid('getRowData', showIds[i]);
//定义合并行数
var rowSpanTaxCount = 1;
for (j = i + 1; j <= length; j++) {
//和上边的信息对比 如果值一样就合并行数+1 然后设置rowspan 让当前单元格隐藏
var end = $("#" + gridName + "").jqGrid('getRowData', showIds[j]);
if (before[CellName] == end[CellName]) {
rowSpanTaxCount++;
$("#" + gridName + "").setCell(showIds[j], CellName, '', { display: 'none' });
} else {
rowSpanTaxCount = 1;
break;
}
$("#" + CellName + "" + showIds[i] + "").attr("rowspan", rowSpanTaxCount);
}
}
}
2、如果你想要的效果是姓名一样，但是工作时间也一样才合并姓名的话，即效果为：
| 姓名 |
工作时间 |
工作内容 |
| 张三 |
2019-01-01 |
工作1 |
| 2019-01-01 |
工作2 |
|
| 张三 |
2019-01-02 |
工作3 |
那么表格加载完的gridComplet方法调用的Merger方法就要传入表格名、Name列名、Time列名了：
gridComplete: function () {
//合并单元格
Merger(“gridName”, 'Name', 'Time');
}
});
而Merger方法中的条件判断中需要加入一个条件：before[CellName1] == end[CellName1]：
function Merger(gridName, CellName，CellName1) {
…
for (j = i + 1; j <= length; j++) {
…
if (before[CellName] == end[CellName] && before[CellName1] == end[CellName1]) {
…
} else {
…
}
…
}
}
通过以上例子，可以与一反三，根据自己的需要对单元格进行合并操作。
注意事项：Jqgrid中的合并单元格操作一定是在从后台查出来的数据已经是按照你想要合并的列进行过排序的才行，要不然就会出现格式混乱的问题。比如上面例子中的Name，一定是相同名字的行是紧挨着的。