使用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>
总结
在写重新构造原数组的方法时遇到问题,写的比较复杂,后来经过同事的点播,使用了现在比较简洁的方式。
另外,实现的方式不只一种,我也试了其他的,都没有这个简单。
使用angularJs ng-repeat做表格合并行效果相关推荐
- ele表格合并行之后的selection选中
bug说明 ele表格合并行之后,还需要添加复选框选择记录做操作的情况下, 用ele的@selection-change,@select,@select-all是有bug的. 选中合并列的复选框时,其 ...
- Element Table 单元格中嵌套表格(Table) 合并行效果
在Element中实现表格合并行功能一般是通过自定义span-method方法,此方法要求表格数据源中需要合并行的单元格中数据相同,根据相同数据来实现合并算法. 本例通过在父Table单元格中嵌套子T ...
- 表格合并行的方法和单元格点击事件
el-table部分 <el-table max-height="100%" @cell-click="cellClick":data="dat ...
- 计算机做表格的行高和列宽,表格中列和行的插入与删除及行高和列宽的调整——想象力电脑应用...
大多数数据输入到工作表后都需要进行管理和格式设置,以获得更好的显示效果,也便于分辨各类型的数据.这里我们将介绍行或列的插入与删除和行高和列宽的调整. 一.行或列的插入与删除 在输入数据时,如果遗漏了某 ...
- 表格合并行_合并行table表格
组件<template><!-- fy自定义表格 --><div class="fy-table-diy-wrap"><table cla ...
- el-table表格合并行、合并列
<!-- --> <template><div class="max"><div class="header"> ...
- table 表格合并行或列
合并单元格 <table><tbody><tr><th colspan="2">我是占位符</th><th col ...
- HTML 表格合并(表格合并行属性 rowspan 将多行合并成一行)
<table border="1"> <tr> <td colspan="3" >用户信 ...
- php表单偶数变颜色,利用CSS3 nth-child()选择器 实现表格奇偶行变色
nth-child()简介 CSS3的nth-child() 选择器,我之前很少用,在做表格偶数行变色的时候,我通常在绑定的时候,做一个js判断,来加一个css,从而使表格偶数行和奇数行颜色不一样.这 ...
最新文章
- java for stl_STL迭代器
- 喜忧参半:我国蜂窝物联网全球占比超过75%
- 真香!如何用300行代码写完一个Spring基本框架?
- css网页设计实例代码_大型电商平台设计实例:电商平台项目工程、数据库选型、代码库...
- html5下拉列表默认值,element-ui中的select下拉列表设置默认值方法_简单_前端开发者...
- Effective Java之保护性编写readObject方法(七十六)
- Flex布局里的align-self属性
- P1005 矩阵取数游戏(__int128模板/简单dp)
- .net core下简单构建高可用服务集群
- python-django-redis拒绝连接问题解决_20191121
- C1083,无法打开包括文件...
- Invalid use of SingleClientConnManager: connection still allocated. 解决方法
- 基于Arduino开发的智能小车
- java网络编程--UDP程序设计
- html中的阴影怎么使用,css 内阴影怎么做
- 仙剑5手游服务器维护,《仙剑奇侠传》手游维护内容官方解答
- 图片批量压缩工具哪个好用?这3个工具可以解决你的压缩烦恼
- 黑群辉安装php,黑群晖从装机到使用全过程 篇五:群晖安装VirtualBox虚拟机
- 多元线性回归系数求解
- 卡尔曼滤波与组合导航原理_无人机机载导航系统和传感器基本原理
热门文章
- python launcher怎么使用_python的launcher用法知识点总结
- android textview参差不齐,android textView 排版显示参差不齐的解决方法
- Python与C语言基础对比(Python快速入门)
- 三十三、基本分段存储管理方式
- Nvidia TX2 安装中文输入法
- 腾讯云主机安全防护(云镜卸载)--/usr/local/qcloud/YunJing/YDEyes/YDService
- #圆的周长和面积面向对象_数学实验 | 圆的面积公式推导
- python不能加密吗_为什么我不能解密我用pycrypto加密的内容?
- java制表位是什么意思_java制表位如何应用?大神进来。
- linux怎么允许远程root登录