在項目開發中，前端頁面經常會遇到一些表格數據需要合並單元格的操作，尤其是各類統計報表，下面我就介紹一種單元格縱向合並的方法：
舉個栗子：
| 姓名 |
工作時間 |
工作內容 |
| 張三 |
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，一定是相同名字的行是緊挨着的。