使用angularJs ng-repeat作表格合併行效果

描述

• 使用angularJs作出表格合併的效果
• 後端返回的數據

[
         {"fileName":"111.pcap.00","startTime":"2018-06-05 10:16:04","taskName":"111","taskId":58,"fileId":72},
         {"fileName":"111.pcap.01","startTime":"2018-06-05 10:16:55","taskName":"111","taskId":58,"fileId":73},
         {"fileName":"aaa.pcap.00","startTime":"2018-06-05 10:10:28","taskName":"aaa","taskId":57,"fileId":71},
         {"fileName":"www.pcap.00","startTime":"2018-06-05 10:50:28","taskName":"www","taskId":59,"fileId":79}
     ]

背景：

爲了能更直觀的查看錶格中相同的taskName所包含的數據，合併列名爲taskName且值相等的行，指望效果以下圖:

分析：

首先看後端返回的數據，是個一維數組，直接使用ng-repeat遍歷行(tr)獲得的是一個不帶合併效果的表格，如圖:

怎麼解決呢？想到的一種方案就是把taskName相同的數據合併成一條，再進行遍歷。

實現方案

• 首先對原始數據進行處理,在我這裏是把taskName相同的，合併成一條數據,從新處理之後的數據以下:

[
    {"taskName":"111","fileList":[{"fileName":"111.pcap.00","startTime":"2018-06-05 10:16:04","taskName":"111","taskId":58,"fileId":72},{"fileName":"111.pcap.01","startTime":"2018-06-05 10:16:55","taskName":"111","taskId":58,"fileId":73}]},
    {"taskName":"aaa","fileList":[{"fileName":"aaa.pcap.00","startTime":"2018-06-05 10:10:28","taskName":"aaa","taskId":57,"fileId":71}]},
    {"taskName":"www","fileList":[{"fileName":"www.pcap.00","startTime":"2018-06-05 10:50:28","taskName":"www","taskId":59,"fileId":79}]}
]

從新構造的方法以下，數組list即是處理的結果,只須要把list賦值給$scope變量即可在頁面上使用

var list = [];
    angular.forEach(sourceData,function (item) {
        for(var i=0;i<list.length;i++){
            if(list[i].taskName === item.taskName){
                list[i].fileList.push(item);
                return;
            }
        }
        list.push({
            taskName:item.taskName,
            fileList:[item]
        });
    });

• 如今看html這裏，若是仍然在<tr>上進行ng-repeat,得不到預期效果。須要在上一層也就是<tbody>上遍歷，由於每條數據都包含字段taskName，在作合併時只須要保留一個，使用ng-if='$index==0'控制。

<tbody ng-repeat="file in tableData">
        <tr ng-repeat="item in file.fileList">
          <td ng-if="$index ==0" rowspan="{{file.fileList.length}}">{{file.taskName}}</td>
          <td>{{item.fileName}}</td>
          <td>{{item.startTime}}</td>
          <td class="table-col-operate">
            <span>
              <a ng-click="capture.download(item.fileId)">下載</a>
              <span class="text-red " ng-click="capture.deleteCapture(item)">刪除</span>
            </span>
           </td>
        </tr>
    </tbody>

總結

在寫從新構造原數組的方法時遇到問題，寫的比較複雜，後來通過同事的點播，使用瞭如今比較簡潔的方式。
另外，實現的方式不僅一種，我也試了其餘的，都沒有這個簡單。