angular+antd-zorro實現表格合併列

最近項目都是在用angular8+antd-zorro做表格，突然發現表格中有很多列都是重複的項，於是着手解決這些問題合併這些列，這時框架的好處就體現出來，我只用對後端返回的數據即對下述的tableData進行處理，加上合併的屬性。

//加載當前列表
readyload(page, limit) {
  let dataurl = environment.project + '/emerProcedure/query?page=' + page + '&limit=' + limit;

  this.http.get(dataurl).subscribe((res: any) => {
    if (res["msg"] === "Ok") {
      this.tableData = res.data;
      this.pageTotal = res.count;
    }
  });
}

這時又有進一步需求，只有部分列可以合併，有些列即使相同也不能合併，這時先定義好合並列的鍵值，加入到一個數組當中。

this.mergeColumns = ['content', 'step', 'stepNo'];

接下來要對原始數據進行兩步排序，第一步排序保證對象數組中屬性例如都是a、b、c、d的排序，不能第一個是a、b、c、d,第二個變成a、b、d、c了，默認按第一個項的屬性順序來排。

const 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;
        };

第二步排序保證具有相同鍵值的項都排在一起

const 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;
          }
        };

這裏直接奉上最終ts代碼效果

  private sortAndMerge(rawDataList): any[] {
    const rowspan = this.rowspan, 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;
  }


  this.tableData = this.sortAndMerge(this.tableData);

html部分寫法

      <tr *ngFor="let data of basicTable.data;index as i">
        <ng-container *ngFor="let t of mergeColumns;">
          <ng-container *ngIf="data[t]!==undefined">
            <td [attr.rowspan]="data[rowspan+t]">{{ data[t] }}</td>
          </ng-container>
        </ng-container>
        <td></td>
        <td></td>
        ……
      </tr>