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

Lin_R 发布于2019-08-26 12:00 / 650人阅读

摘要：实现方案首先对原始数据进行处理在我这里是把相同的，合并成一条数据重新处理以后的数据如下重新构造的方法如下，数组便是处理的结果只需要把赋值给变量便可在页面上使用现在看这里，如果仍然在上进行得不到预期效果。

描述

使用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
现在看html这里，如果仍然在上进行ng-repeat,得不到预期效果。需要在上一层也就是上遍历，因为每条数据都包含字段taskName，在做合并时只需要保留一个，使用ng-if="$index==0"控制。
    
        
          {{file.taskName}}
          {{item.fileName}}
          {{item.startTime}}
          
            
              下载
              删除
            
           
        
    
总结
在写重新构造原数组的方法时遇到问题，写的比较复杂，后来经过同事的点播，使用了现在比较简洁的方式。
另外，实现的方式不只一种，我也试了其他的，都没有这个简单。

云服务器 GPU云服务器 html5表格行合并合并行 python 行合并表格合并

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107989.html

你的第一个AngularJS应用

摘要：从最重要的页面开始吧锦标赛的表格。重启你的应用，看看搜索框。然后我们加入两个路由一个转向锦标赛表格，另一个转向车手详情。你所需要做的只是创建一个名为的文件，然后将锦标赛表格放在那里。结论我们已经介绍了开发一个简单应用所需的一切。 AngularJS是Google开源出来的一款 Javascript MVC 框架。利用AngularJS，你可以构建结构清晰、便于测试和维护的前端应用。 ...

shadajin 2019-08-19 14:25 评论0 收藏0
angular性能优化心得

摘要：本文针对的读者具备性能优化的相关知识雅虎条性能优化原则高性能网站建设指南等拥有实战经验。这种机制能减少浏览器次数，从而提高性能。仅会检查该和它的子，当你确定当前操作仅影响它们时，用可以稍微提升性能。搬运自: http://atian25.github.io/2014/05/09/angular-performace/ 不知不觉，在项目中用angular已经半年多了，踩了很多坑...

guqiu 2019-08-19 14:44 评论0 收藏0
AngularJS scope 学习

摘要：访问对象中从父类继承的对象时都会去访问原型链。因为此处中混合用了，也会产生自己的，因此有和。在和两种情况下会分别产生，是两个不同的，号不同。本文主要是学习别人的文章和回答之后的总结，此处给出链接深入学习AngularJS Scope JavaScript原型继承简介 AngularJs中是双向数据绑定，但并不是每次修改都会产生相应的效果，有些时候传基础类型的值就有可能存在这种情...

levius 2019-08-20 12:24 评论0 收藏0
AngularJS简述

流行框架简介 angularjs是一款非常优秀的前端高级JS框架，由谷歌团队开发维护，能够快速构建单页web应用，化繁为简无论是angularjs还是jQuery都是用原生JS封装的库：对代码进行封装，调用封装的方法，简化操作传统方式是用get方式获取元素，然后点方法 jQuery库实现了对获取方式的封装，对方法的封装框架：提供代码书写规则，按照规则去写代码，框架会帮我们实现响应的功能...

Jason 2019-08-23 11:25 评论0 收藏0
angularjs初识

摘要：总的来说，收获很大。这里这里就以一些常用的标签谈谈中的基础知识。然后还有一个表示记录的索引号，从开始。已经用这个数组的值替他们分好了组了，是不是感觉很强大，还有很多强大的地方等着我们去学习，掌握它，还有更强大的等着我们。周三的时候跟着老师简单的入门了angularjs，然后去图书馆找了一本《Angularjs实战》来看了看，虽然这本书网上的评价不太高，但对于初学者的我来说还是不错的，...

tanglijun 2019-08-23 11:49 评论0 收藏0