【HTML】Angular JS + Table 根据数据动态合并单元格

最新推荐文章于 2023-03-09 18:37:36 发布
最新推荐文章于 2023-03-09 18:37:36 发布
阅读量721 收藏 2
点赞数
分类专栏： 前端 文章标签： angular.js html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sakura22123/article/details/129122664
版权

问题描述：
根据数据值将单元格合并
如一级指标 二级指标
原始演示效果：
在这里插入图片描述

目标效果如图所示：
在这里插入图片描述

完整的http.post请求JS

                        $http.post('../hnTProF3c/List', params).success(function (data) {
                            /*console.log(data)*/
                            if ("" != data && data.data.length > 0) {
                                console.log(data.data);

                                let tempArr = []
                                let temp = []
                                //处理数据源
                                data.data.map((mapItem) => {
                                    if (tempArr.length == 0) {
                                        tempArr.push({
                                            F_YJZB: mapItem.F_YJZB,
                                            F_EJZB: mapItem.F_EJZB,
                                            F_SJDF: mapItem.F_SJDF,
                                            F_XJSJDF: mapItem.F_XJSJDF,
                                            F_QZZ: mapItem.F_QZZ,
                                            v2: [mapItem]
                                        })
                                    } else {
                                        let res = tempArr.some((item) => {
                                            if (item.F_EJZB === mapItem.F_EJZB && item.F_YJZB === mapItem.F_YJZB) {
                                                item.v2.push(mapItem)
                                                return true
                                            }
                                        })
                                        if (!res) {
                                            //如果没找相同的部门添加一个新对象
                                            tempArr.push({
                                                F_YJZB: mapItem.F_YJZB,
                                                F_EJZB: mapItem.F_EJZB,
                                                F_SJDF: mapItem.F_SJDF,
                                                F_XJSJDF: mapItem.F_XJSJDF,
                                                F_QZZ: mapItem.F_QZZ,
                                                v2: [mapItem]
                                            })
                                        }
                                    }
                                })

                                console.log("处理二级折叠")
                                console.log(tempArr)

                                tempArr.map((mapItem) => {
                                    if (temp.length == 0) {
                                        temp.push({
                                            F_YJZB: mapItem.F_YJZB,
                                            itemLen: mapItem.v2.length,
                                            v1: [mapItem]
                                        })
                                    } else {
                                        let res = temp.some((item) => {
                                            if (item.F_YJZB === mapItem.F_YJZB) {
                                                item.itemLen = item.itemLen + mapItem.v2.length,
                                                    item.v1.push(mapItem)
                                                return true
                                            }
                                        })
                                        if (!res) {
                                            //如果没找相同的部门添加一个新对象
                                            temp.push({
                                                F_YJZB: mapItem.F_YJZB,
                                                itemLen: mapItem.v2.length,
                                                v1: [mapItem]
                                            })
                                        }
                                    }
                                })
                                console.log("处理一级折叠")
                                console.log(temp)

                                //动态创建表格
                                let html = "";

                                angular.element('#j-tbody').html('');
                                for (var i = 0; i < temp.length; i++) {
                                    let f1 = ''
                                    let f2 = ''
                                    for (var j = 0; j < temp[i].v1.length; j++) {
                                        for (var z = 0; z < temp[i].v1[j].v2.length; z++) {
                                            //一级指标
                                            let firstTd = '';
                                            if (temp[i].v1[j].v2[z].F_YJZB != f1 && temp[i].v1[j].v2[z].F_YJZB != '') {
                                                firstTd = '<td class="text-center" rowspan="'+ temp[i].itemLen +'" >'+temp[i].v1[j].v2[z].F_YJZB+'</td>';
                                                f1 = temp[i].v1[j].v2[z].F_YJZB;
                                            }else {
                                                firstTd = ''
                                            }
                                            //二级指标
                                            let secondTd = '';
                                            let scoreTd = '';
                                            if (temp[i].v1[j].v2[z].F_EJZB != f2 && temp[i].v1[j].v2[z].F_EJZB !=''){
                                                secondTd = '<td class="text-center" rowspan="'+ temp[i].v1[j].v2.length +'">'+temp[i].v1[j].v2[z].F_EJZB+'</td>';
                                                scoreTd =
                                                     '    <td class="text-center" rowspan="'+ temp[i].v1[j].v2.length +'">'+temp[i].v1[j].v2[z].F_SJDF+'</td>'
                                                    + '    <td class="text-center" rowspan="'+ temp[i].v1[j].v2.length +'">'+temp[i].v1[j].v2[z].F_XJSJDF+'</td>'
                                                    + '    <td class="text-center" rowspan="'+ temp[i].v1[j].v2.length +'">'+temp[i].v1[j].v2[z].F_QZZ+'</td>';
                                                f2 = temp[i].v1[j].v2[z].F_EJZB;
                                            }else {
                                                secondTd = ''
                                            }
                                            html +=
                                                '<tr >'
                                                + '    <td class="text-center" >' + temp[i].v1[j].v2[z].NO + '</td>'
                                                + firstTd
                                                + secondTd
                                                + '    <td class="text-left" >'+temp[i].v1[j].v2[z].F_SJZB+'</td>'
                                                + '    <td class="text-center" >'+temp[i].v1[j].v2[z].F_ZBLX+'</td>'
                                                + '    <td class="text-center" >'+temp[i].v1[j].v2[z].F_TK+'</td>'
                                                + '    <td class="text-center" >'+temp[i].v1[j].v2[z].F_PFZXX+'</td>'
                                                + '    <td class="text-center" >'+temp[i].v1[j].v2[z].F_PFZSX+'</td>'
                                                + scoreTd
                                            '</tr>';
                                        }
                                    }
                                }
                                angular.element("#j-tbody").html(html);


                                $scope.tableList = data.data;
                                // $scope.tableList = temp;

                                $scope.paginationConf.totalItems = data.totalItems;
                                $scope.paginationConf.currentPage = data.currentPage;
                            } else {
                                $scope.dataList = [];
                                $scope.paginationConf.totalItems = 0;
                                $scope.paginationConf.currentPage = 0;
                                Notify.alert("info", "温馨提示：暂无数据");
                            }
                            Metronic.stopPageLoading();
                        }).error(function () {
                            Metronic.stopPageLoading();
                            Notify.alert("error", "获取数据失败");
                        });

核心逻辑

① 将原始数据处理
原始数据：
在这里插入图片描述

通过map循环将原始数据进行分组处理

let tempArr = []
                                let temp = []
                                //处理数据源
                                data.data.map((mapItem) => {
                                    if (tempArr.length == 0) {
                                        tempArr.push({
                                            F_YJZB: mapItem.F_YJZB,
                                            F_EJZB: mapItem.F_EJZB,
                                            F_SJDF: mapItem.F_SJDF,
                                            F_XJSJDF: mapItem.F_XJSJDF,
                                            F_QZZ: mapItem.F_QZZ,
                                            v2: [mapItem]
                                        })
                                    } else {
                                        let res = tempArr.some((item) => {
                                            if (item.F_EJZB === mapItem.F_EJZB && item.F_YJZB === mapItem.F_YJZB) {
                                                item.v2.push(mapItem)
                                                return true
                                            }
                                        })
                                        if (!res) {
                                            //如果没找相同的部门添加一个新对象
                                            tempArr.push({
                                                F_YJZB: mapItem.F_YJZB,
                                                F_EJZB: mapItem.F_EJZB,
                                                F_SJDF: mapItem.F_SJDF,
                                                F_XJSJDF: mapItem.F_XJSJDF,
                                                F_QZZ: mapItem.F_QZZ,
                                                v2: [mapItem]
                                            })
                                        }
                                    }
                                })

                                console.log("处理二级折叠")
                                console.log(tempArr)

                                tempArr.map((mapItem) => {
                                    if (temp.length == 0) {
                                        temp.push({
                                            F_YJZB: mapItem.F_YJZB,
                                            itemLen: mapItem.v2.length,
                                            v1: [mapItem]
                                        })
                                    } else {
                                        let res = temp.some((item) => {
                                            if (item.F_YJZB === mapItem.F_YJZB) {
                                                item.itemLen = item.itemLen + mapItem.v2.length,
                                                    item.v1.push(mapItem)
                                                return true
                                            }
                                        })
                                        if (!res) {
                                            //如果没找相同的部门添加一个新对象
                                            temp.push({
                                                F_YJZB: mapItem.F_YJZB,
                                                itemLen: mapItem.v2.length,
                                                v1: [mapItem]
                                            })
                                        }
                                    }
                                })
                                console.log("处理一级折叠")
                                console.log(temp)

经过处理后的数据：
在这里插入图片描述
将结果拼接为html给需要的table

//动态创建表格
                                let html = "";

                                angular.element('#j-tbody').html('');
                                for (var i = 0; i < temp.length; i++) {
                                    let f1 = ''
                                    let f2 = ''
                                    for (var j = 0; j < temp[i].v1.length; j++) {
                                        for (var z = 0; z < temp[i].v1[j].v2.length; z++) {
                                            //一级指标
                                            let firstTd = '';
                                            if (temp[i].v1[j].v2[z].F_YJZB != f1 && temp[i].v1[j].v2[z].F_YJZB != '') {
                                                firstTd = '<td class="text-center" rowspan="'+ temp[i].itemLen +'" >'+temp[i].v1[j].v2[z].F_YJZB+'</td>';
                                                f1 = temp[i].v1[j].v2[z].F_YJZB;
                                            }else {
                                                firstTd = ''
                                            }
                                            //二级指标
                                            let secondTd = '';
                                            let scoreTd = '';
                                            if (temp[i].v1[j].v2[z].F_EJZB != f2 && temp[i].v1[j].v2[z].F_EJZB !=''){
                                                secondTd = '<td class="text-center" rowspan="'+ temp[i].v1[j].v2.length +'">'+temp[i].v1[j].v2[z].F_EJZB+'</td>';
                                                scoreTd =
                                                     '    <td class="text-center" rowspan="'+ temp[i].v1[j].v2.length +'">'+temp[i].v1[j].v2[z].F_SJDF+'</td>'
                                                    + '    <td class="text-center" rowspan="'+ temp[i].v1[j].v2.length +'">'+temp[i].v1[j].v2[z].F_XJSJDF+'</td>'
                                                    + '    <td class="text-center" rowspan="'+ temp[i].v1[j].v2.length +'">'+temp[i].v1[j].v2[z].F_QZZ+'</td>';
                                                f2 = temp[i].v1[j].v2[z].F_EJZB;
                                            }else {
                                                secondTd = ''
                                            }
                                            html +=
                                                '<tr >'
                                                + '    <td class="text-center" >' + temp[i].v1[j].v2[z].NO + '</td>'
                                                + firstTd
                                                + secondTd
                                                + '    <td class="text-left" >'+temp[i].v1[j].v2[z].F_SJZB+'</td>'
                                                + '    <td class="text-center" >'+temp[i].v1[j].v2[z].F_ZBLX+'</td>'
                                                + '    <td class="text-center" >'+temp[i].v1[j].v2[z].F_TK+'</td>'
                                                + '    <td class="text-center" >'+temp[i].v1[j].v2[z].F_PFZXX+'</td>'
                                                + '    <td class="text-center" >'+temp[i].v1[j].v2[z].F_PFZSX+'</td>'
                                                + scoreTd
                                            '</tr>';
                                        }
                                    }
                                }
                                angular.element("#j-tbody").html(html);

html部分

<tbody id="j-tbody">

</tbody>

最终效果：
在这里插入图片描述

sakura欣悠
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js 实现 动态生成包含合并单元格的表格
03-31
js 实现 动态生成包含合并单元格的表格! 值得下载看看!资源免费,大家分享!!
table表格按列合并相同数据行单元格代码
07-13
在jsp、html页面中实现table表格按列合并相同数据行单元格代码，可实现功能为：在一个table表格中，合并指定列中所有相同数据相邻行单元格内容。
angular-nestjs-rendering：使用NestJS进行Angular 5+服务器端渲染
01-30
Angular NestJS Universal（服务器渲染） src / client <-Angular 5+ src / server <-NestJS src / shared <-在应用之间共享 创意斗 用于构建全栈解决方案的软件咨询公司。 精通：NodeJS，TypeScript，Angular，MongoDB ... <any> .js库:) 你有项目给我们吗？ [email protected] 已包含 REST API Web套接字 安装 npm install 发展历程 开发端口打开：4200（继承自angular-cli） 在开发中，必须将NestJS中的每个控制器（路由）映射到proxy.conf.json中 npm start 不要忘记不时整理和整理代码： npm run client:lint npm run server:lint npm run prettify 生产 生产端口在.env中指定（默认为5400） npm run build:universal # test production npm run serve:unive
Angular 2.0+ 的数据绑定的实现示例
08-29
本篇文章主要介绍了Angular 2.0+ 的数据绑定的实现实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
ionic4+angular8+动态设置首页
01-20
我采用最原始最简单的方案，直接指定刷新后访问的实际URL，不动态操作angular路由。 访问URL示例： http://localhost:8100/#/tabs/mall http://localhost:8100/#/user-login index.html加入一段简单的判断脚本即可： // 只处理未登录的状态，未登录时则刷新到指定的URL路由，即登录页面 const token = localStorage.getItem('user-token'); if (!token) {
Javascript 动态合并table单元格
fxxashelly的博客
07-10 2017
原博客地址：https://blog.csdn.net/kida_yuan/article/details/51371487直接保存html浏览器打开看效果，谢谢原博主提供，转载方便自己以后参考&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm...
js动态合并单元格
weixin_45411740的博客
07-16 1789
前几天做网页的时候涉及到动态合并单元格的问题，经过一番努力终于是做好了，所以现在把代 码贴出来。 首先说一下我们要实现的效果原图是这样的 然后我们要实现的效果是这样的 而且呢表格的生成是发送ajax请求后后端传过来的数据通过for循环动态生成的，下面贴代 html代码如下 <thead> <tr> <th>站点</th> <th>车道</th> <th>时间&l...
angular ng-zorro表格合并
qq_43059898的博客
01-31 497
table合并
table表格实现动态合并行(Angular+ng-zorro)
m0_60504233的博客
06-27 1843
根据后端返回的数据，把数据相同的单元格进行合并 ts中：
js动态合并表格单元格
忠华
12-28 6072
最近做项目要做一个自定义表单(由用户自己定义表单的样式和内容)用表格做，这就牵涉到对表格的操作。 对表格的操作无非就是对行和列的添加和删除，单元格的合并和拆分。对表格的行列操作这些都没得什么号说的，比较的简单，但是对单元格的合并和坼分还不是那么简单。   先说说单元格的坼分，这个首先我们先要得到选中要坼分的单元格，获取他的colspan和rowspan属性即获取当前单元格合并了几行几列，我们好
js动态表格合并拆分行
10-15
一个js例子实现了表格的动态合并，拆分单元格
angularjs 合并单元格
jishamo的专栏
01-26 6098
angularjs 完美解决动态表格问题 {{district.date}} {{detail.districtTime}}
js实现表格动态合并
weixin_52776724的博客
03-09 1678
【代码】js实现表格动态合并。
html相同数据合并单元格合并单元格,Javascript合并表格中具有相同内容单元格示例...
weixin_33478575的博客
06-04 245
效果图:HTML代码:表格相同内容合并合并前：a12345a12346a2334 b3467 b3567 cc2345 cc2355 d1234 e1234 合并后：a12345a12346a2334 b3467 b3567 cc2345 cc2355 d1234 e1234 JS:function mc(tableId, startRow, endRow, col) {var tb = doc...
ng repeat 拼接html,AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法...
weixin_28840143的博客
06-24 237
今天用angular写table的时候，遇到了一个问题。在ng-repeat中，含有动态的html，而这些html中含有自定义指令。因为希望实现一个能够复用的table，所以定义了一个指令myStandTable，指令代码大概如下：var myCommon = angular.module("myCommon",[]);myCommon.directive("myStandTable", func...
关于Angular Js动态表格合并单元格的一点见解
mengmengmengxin的博客
03-21 1756
记第一篇笔记~~~~ hell OwO rld ~~~~ 最近公司有一点点小需求，做个另类的表格，要求动态的样式(PS:不能直接写死那种)，没办法打工人只能硬着头皮去干。 网上传的一些写法： controller.js: $scope.test = [ 　　　　 {testName:'aaa',list:[ {testValue1: '1',testValue2:'2',testValue3...
Angular 合并table单元格
前端博客典中典
12-08 890
效果： html: <table class="table table-striped"> <thead> <tr> <th>影片名称</th> <th>影厅</th> <th>放映时间（{{tableDataDate}}）</th> </tr> </thead&
angular中ng-repeat生成表格并合并单元格
u010763322的专栏
05-25 651
// //html部分 <tbody ng-repeat="node in vm.stationName"> <tr ng-repeat="tr in node.items track by $index"> <td ng-if="$index ==0" rowspan="{{node.items.length}}">{{node.name}}</td> <td>{{tr.vC_SHOW_NAME}}&lt.
关于HTML中表格单元格的合并
热门推荐
Mark_ling的博客
10-24 1万+
当我们在做出一份HTML表格的时候可以看到这样是非常不河狸的。这就需要合并单元格了。
angular表格数据回显
最新发布
06-10
要在Angular中回显表格数据，你需要创建一个表格组件并在该组件中使用Angular的数据绑定机制将数据绑定到表格中。具体步骤如下： 1. 在组件中声明一个数据数组，用于存储要显示在表格中的数据。 2. 在组件的HTML模板中，使用Angular的ngFor指令遍历数据数组，并将每个数据项显示为表格行。 3. 在每行中，使用Angular的插值表达式将数据项的属性绑定到对应的单元格中。 下面是一个示例表格组件的代码： ``` import { Component } from '@angular/core'; @Component({ selector: 'app-table', template: ` <table> <thead> <tr> <th>ID</th> <th>Name</th> <th>Age</th> </tr> </thead> <tbody> <tr *ngFor="let item of data"> <td>{{ item.id }}</td> <td>{{ item.name }}</td> <td>{{ item.age }}</td> </tr> </tbody> </table> ` }) export class TableComponent { data = [ { id: 1, name: 'John', age: 30 }, { id: 2, name: 'Jane', age: 25 }, { id: 3, name: 'Bob', age: 40 } ]; } ``` 在这个例子中，我们在组件中声明了一个名为data的数组，用于存储要显示的数据。然后在组件的HTML模板中，我们使用ngFor指令遍历data数组，并将每个数据项显示为一行表格。在每行中，我们使用插值表达式将数据项的属性绑定到对应的单元格中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值