javascript动态合并纵向单元格

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.结果

来自：https://segmentfault.com/a/1190000018128208

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_1995