使用angularJs ng-repeat做表格合并行效果

Lin_R 發(fā)布于2019-08-26 12:00 / 681人閱讀

摘要：實現(xiàn)方案首先對原始數(shù)據(jù)進(jìn)行處理在我這里是把相同的，合并成一條數(shù)據(jù)重新處理以后的數(shù)據(jù)如下重新構(gòu)造的方法如下，數(shù)組便是處理的結(jié)果只需要把賦值給變量便可在頁面上使用現(xiàn)在看這里，如果仍然在上進(jìn)行得不到預(yù)期效果。

描述

使用angularJs做出表格合并的效果

后端返回的數(shù)據(jù)

     [
         {"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所包含的數(shù)據(jù)，合并列名為taskName且值相等的行，期望效果如下圖:

分析：

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

怎么解決呢？想到的一種方案就是把taskName相同的數(shù)據(jù)合并成一條，再進(jìn)行遍歷。

實現(xiàn)方案

首先對原始數(shù)據(jù)進(jìn)行處理,在我這里是把taskName相同的，合并成一條數(shù)據(jù),重新處理以后的數(shù)據(jù)如下:

[
    {"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}]}
]

重新構(gòu)造的方法如下，數(shù)組list便是處理的結(jié)果,只需要把list賦值給$scope變量便可在頁面上使用

    var list = [];
    angular.forEach(sourceData,function (item) {
        for(var i=0;i
現(xiàn)在看html這里，如果仍然在上進(jìn)行ng-repeat,得不到預(yù)期效果。需要在上一層也就是上遍歷，因為每條數(shù)據(jù)都包含字段taskName，在做合并時只需要保留一個，使用ng-if="$index==0"控制。
    
        
          {{file.taskName}}
          {{item.fileName}}
          {{item.startTime}}
          
            
              下載
              刪除
            
           
        
    
總結(jié)
在寫重新構(gòu)造原數(shù)組的方法時遇到問題，寫的比較復(fù)雜，后來經(jīng)過同事的點播，使用了現(xiàn)在比較簡潔的方式。
另外，實現(xiàn)的方式不只一種，我也試了其他的，都沒有這個簡單。