table表格实现动态合并行(Angular+ng-zorro)

最新推荐文章于 2024-09-26 17:58:41 发布

piupiu欣

最新推荐文章于 2024-09-26 17:58:41 发布

阅读量2k

点赞数 1

文章标签： angular.js typescript 前端

本文链接：https://blog.csdn.net/m0_60504233/article/details/125187202

版权

本文介绍如何在Angular框架配合Ng-Zorro组件中，使用ngFor指令和自定义函数，实现在表格中根据后端返回数据合并相同单元格的功能。代码示例和sortAndMerge函数展示了合并策略和条件判断过程。

摘要由CSDN通过智能技术生成

需求：根据后端返回的数据，把数据相同的单元格进行合并，如图所示

技术：angular框架+ng-zorro组件中table表格

代码：

html中：(这段代码是前三列的代码，是需要判断相同数据合并的)

 <tr *ngFor="let item of table02  let allIndex = index;">
          <ng-container *ngFor="let t of mergeColumns; index as i">
            <ng-container *ngIf="item[t]!==undefined ">
              <!-- 方案2 -->
              <td colspan="4" [attr.rowspan]="item[mergeFix+t]">{{ item[t] }}
              </td>
              <!-- 方案2 -->
            </ng-container>
          </ng-container>
</tr>

ts中：

  //tableData是数据
  tableData: any; 
  //table02是html所需要的数组
  table02: any = [];
  mergeFix = 'mergeFlag'
  // mergeColumns 是需要判断相同数据的字段
  mergeColumns = ['specName', 'deviceName', 'dataPointName'];
  rowspan: any;
  ngOnInit(): void {
    if (this.data) {
      this.table02 = this.sortAndMerge(this.data)
    }
  }
// 数据相同合并单元格
  private sortAndMerge(rawDataList): any[] {
    const rowspan = this.mergeFix, mergeColumns = this.mergeColumns;
    if (rawDataList.length > 1) {//长度⼤于1才有资格进⼀步处理
      const sortColumn = Object.keys(rawDataList[0]),
        keySort = raw => {
          for (let i = raw.length - 1; i > 0; i--) {
            let newObj = {}, tmpObj = raw[i];
            sortColumn.forEach(s => newObj[s] = tmpObj[s]);
            raw[i] = newObj;
          }
          return raw;
        }, compare = (a, b, c = sortColumn[0], i = 0) => {
          if (a[c] === b[c]) { //等于的话进⾏判断是否还有后续字段需要排序，没有则返回0；有则递归进⾏后续字段排序处理。
            if (i === sortColumn.length - 1) {//没有后续字段
              return i = 0;
            }
            i++;
            return compare(a, b, sortColumn[i], i);//递归排序后续字段
          } else if (a[c] > b[c]) { //⼤于返回1
            return 1;
          } else { //⼩于返回-1
            return -1;
          }
        }, arr = keySort(JSON.parse(JSON.stringify(rawDataList))).sort(compare), aLen = arr.length
      for (let i = mergeColumns.length - 1; i >= 0; i--) {//先迭代待合并列
        let index = 0;
        let title = mergeColumns[i];
        let span = 1;//合并列属性默认为1
        for (let j = 0; j < aLen; j++) {
          let comp = arr[index][title];
          if (arr[j][title] === comp) {
            j !== index && (delete arr[j][title], span++);
            j === aLen - 1 && (arr[index][rowspan + title] = span);
          } else {
            span > 1 && (arr[index][rowspan + title] = span, span = 1);
            index = j
          }
        }
      }
      return arr
    }
    return rawDataList
  }