1. 需求
合并相邻行内容相同的单元格。
2. 概念
rowspan 指定单元格纵向跨越的行数。如 rowspan 被设为 3，这表示该单元格必须跨越三行（本身一行，加上另外两行）
3. 公共方法
/**
* 单元格合并方法, 增加 rowspan 属性
* @param data 要处理的数据
* @param nameList 合并的字段 list
*/
function rowspanFun(data, nameList) {
for (var i = 0; i < nameList.length; i++) {
var name = nameList[i];
var startRow = 0;
var endRow = data.length;
var mergeNum = 1;
if (endRow != 1) {
for (var j = startRow; j < endRow; j++) {
if (j == endRow – 1) {// 判断是否是最后一个元素
if (startRow == endRow – 1) {
data[j][name + ‘Rowspan’] = 1;
}
} else {
if (data[startRow][name] == data[j + 1][name]) {
data[j + 1][name + ‘Rowspan’] = 0;
mergeNum = mergeNum + 1;
data[startRow][name + ‘Rowspan’] =mergeNum;
} else {
startRow = j + 1;
if (mergeNum > 1) {
data[startRow][name + ‘Rowspan’] = 1;
} else {
data[j][name + ‘Rowspan’] = 1;
}
mergeNum = 1;
}
}
}
} else {
data[0][name + ‘Rowspan’] = 1;
}
}
return data;
}
4.js 中调用公共方法
var data = [
{name: ‘dwj’, sex: ‘ 女 ’, age: 20},
{name: ‘dwj’, sex: ‘ 男 ’, age: 20},
{name: ‘dwq’, sex: ‘ 女 ’, age: 20},
{name: ‘other’, sex: ‘ 女 ’, age: 20}
];
rowspanFun(data, [‘name’, ‘sex’]);
调用方法后的数据处理结果
5.html 中使用
<table>
<tr *ngFor=”let item of data”>
<td *ngIf=”item.nameRowspan != 0″ [attr.rowspan]=’item.nameRowspan’>{{item.name}}</td>
<td *ngIf=”item.sexRowspan != 0″ [attr.rowspan]=’item.sexRowspan’>{{item.sex}}</td>
<td>{{item.age}}</td>
</tr>
</table>
注意：此 html 代码使用的是 ng 语法，请根据自已使用的 js 框架自行调整。
6. 结果