ng + zorro angular表格横纵向合并,横向目前是手动,纵向是自动合并,微调后可适配三大框架使用
表格横纵向合并,可以看一下代码编写之前和之后的样式,先上图~~
表格页面文件.html
<h1>正常表格</h1>
<nz-table #colSpanTable [nzData]="table03" nzBordered>
<tbody>
<tr *ngFor="let item of table03; index as i">
<td>{{item.Project01}}</td>
<td>{{item.Project02}}</td>
<td>{{item.Project03}}</td>
<td>{{item.Project04}}</td>
<td>{{item.Project05}}</td>
</tr>
</tbody>
</nz-table>
<hr>
<br>
<h1>经过合并的表格</h1>
<h3>
注意1: [nzData]="table01"必须为数组类型!!!!否则会报错core.js:6157 ERROR TypeError: object is not iterable (cannot read property
Symbol(Symbol.iterator))
</h3>
<h3>
注意2:< th [colspan]="tableCol" >是这样子写
</h3>
<h3>
注意3:< td [attr.colspan]="tableCol" >是这样子写
以上两者写法不一致,写的不对会失效
</h3>
<nz-table #colSpanTable [nzData]="table01" nzBordered>
<thead>
<tr>
<th [colspan]="table01[0].arr.length + tableCol">{{table01[0].title}}</th>
</tr>
<tr>
<th [colspan]="tableCol">Project</th>
<th *ngFor="let item of table01[0].arr; index as i">{{item}}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of table01[0].data; index as i">
<td [attr.colspan]="tableCol">{{ item.ttt }}</td>
<td *ngFor="let innerItem of item.Content;">{{innerItem.abc}}</td>
</tr>
<tr *ngFor="let item of table02; index as i">
<ng-container *ngFor="let t of mergeColumns;">
<ng-container *ngIf="item[t]!==undefined">
<td [attr.rowspan]="item[mergeFix+t]">{{ item[t] }}</td>
</ng-container>
</ng-container>
<td *ngFor="let name of notMergeColumns">{{item[name]}}</td>
</tr>
</tbody>
</nz-table>
表格页面文件.ts
import { Component, OnInit, ViewChild } from '@angular/core';
import { tableData1,tableData2 } from './mock.js'
@Component({
selector: 'app-aa',
templateUrl: './AA.component.html',
styleUrls: ['./AA.component.less']
})
export class AAAAAComponent implements OnInit {
tableCol = 3
table01:Object
table02:Array<Object>
table03:Array<Object>
tableData:any;
mergeFix = 'mergeFlag'
mergeColumns = ['Project01','Project02']; // 合并列的键值
notMergeColumns = ['Project03','Project04','Project05','Project06','Project07']; // 合并列的键值
ngOnInit(): void {
this.table01=tableData1
this.table02=this.sortAndMerge(tableData2);
this.table03=tableData2
}
private sortAndMerge(rawDataList): any[] {
const rowspan =this.mergeFix, mergeColumns = this.mergeColumns;
if (rawDataList.length > 1) {//长度大于1才有资格进一步处理
const sortColumn = Object.keys(rawDataList[0]),
keySort = raw => {
for (let i = raw.length - 1; i > 0; i--) {
let newObj = {}, tmpObj = raw[i];
sortColumn.forEach(s => newObj[s] = tmpObj[s]);
raw[i] = newObj;
}
return raw;
}, compare = (a, b, c = sortColumn[0], i = 0) => {
if (a[c] === b[c]) { //等于的话进行判断是否还有后续字段需要排序,没有则返回0;有则递归进行后续字段排序处理。
if (i === sortColumn.length - 1) {//没有后续字段
return i = 0;
}
i++;
return compare(a, b, sortColumn[i], i);//递归排序后续字段
} else if (a[c] > b[c]) { //大于返回1
return 1;
} else { //小于返回-1
return -1;
}
}, arr = keySort(JSON.parse(JSON.stringify(rawDataList))).sort(compare), aLen = arr.length;
for (let i = mergeColumns.length - 1; i >= 0; i--) {//先迭代待合并列
let index = 0;
let title = mergeColumns[i];
let span = 1;//合并列属性默认为1
for (let j = 0; j < aLen; j++) {
let comp = arr[index][title];
if (arr[j][title] === comp) {
j !== index && (delete arr[j][title], span++);
console.log(rowspan)
j === aLen - 1 && (arr[index][rowspan + title] = span);
} else {
span > 1 && (arr[index][rowspan + title] = span, span = 1);
index = j;
}
}
}
return arr
}
return rawDataList;
}
}
数据文件mock.js
const tableData1 = [{
title: '合并类型格式',
arr: ['AAAAA', 'BBBBB', 'CCCCCC', 'DDDDD'],
data: [
{
ttt: 'title01',
Content: [
{
abc: 'ASWD01'
},
{
abc: 'ASWD02'
},
{
abc: 'ASWD03'
},
{
abc: 'ASWD04'
},
],
},
{
ttt: 'title02',
LeaderOrder: 1,
Content: [
{
abc: 'ASWD01'
},
{
abc: 'ASWD02'
},
{
abc: 'ASWD03'
},
{
abc: 'ASWD04'
},
],
},
],
}];
const tableData2 = [
{
key: '1',
Project01: 'Project01_01',
Project02: 'PPPPPPPP0101',
Project03: 'Project03_011111',
Project04: 'Project04_044444',
Project05: 'Project05',
Project06: 'Project06',
Project07: 'Project07',
},
{
key: '2',
Project01: 'Project01_01',
Project02: 'PPPPPPPP0101',
Project03: 'Project03_011111',
Project04: 'Project04_044444',
Project05: 'Project05',
Project06: 'Project06',
Project07: 'Project07',
},
{
key: '3',
Project01: 'Project01_01',
Project02: 'Project02_02',
Project03: 'Project03_011111',
Project04: 'Project04_044444',
Project05: 'Project05',
Project06: 'Project06',
Project07: 'Project07',
},
{
key: '4',
Project01: 'Project01_01',
Project02: 'Project02_02',
Project03: 'Project03_011111',
Project04: 'Project04_044444',
Project05: 'Project05',
Project06: 'Project06',
Project07: 'Project07',
},
{
key: '5',
Project01: 'Project01_01',
Project02: 'Project02_02',
Project03: 'Project03_011111',
Project04: 'Project04_044444',
Project05: 'Project05',
Project06: 'Project06',
Project07: 'Project07',
},
]
export { tableData1, tableData2 };
ng + zorro angular表格横纵向合并,横向目前是手动,纵向是自动合并,微调后可适配三大框架使用的更多相关文章
- element-ui + vue ,ant-design + vue , Angular + ZORRO 实现表格自动横纵向合并单元格,并自动根据单元格数据进行添加样式
element-ui + vue ,ant-design + vue , Angular + ZORRO 实现表格自动横纵向合并单元格,并自动根据单元格数据进行添加样式 本文重点写 element-u ...
- NG-ZORRO + angular-cli11 表格横纵向单元格合并,按需设置背景色,解决动态合并单元格动态colspan情况下,nzLeft固定列失效问题,也适用VUE,REACT
NG-ZORRO + angular-cli11 实现表格横纵向单元格合并,按需设置背景色,并解决动态合并单元格动态colspan情况下,nzLeft固定列失效问题 HTML代码 <!-- 1. ...
- Android实现先横向横线展现在纵向拉开图片
前段时间产品那边让我做一个动画,要求是先以横线的方式横向展开,在纵向展示图片,最后展示几秒动画在原路返回,随后我在网上查找资料,发现这方面的记录很少,最后自己写了一个 后期还会慢慢改进: 转载请说明出 ...
- HTML+CSS+jQuery 纵向导航 && 横向导航 && 消除IE6 BUG && 感悟怎样学习
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content ...
- 如何让elemengUI中的表格组件相同内容的单元格自动合并
1. 前言 这两天在工作中遇到这样一个需求:将某个Excel中的数据在页面上以表格形式展示出来,并且尽量保持数据层级与Excel中一致.在原始Excel文件中,对每一行相同的数据都进行了合并,使得数据 ...
- element ui表格相同内容自动合并
一开始觉得合并单元格很困难,什么鬼,后来仔细查看api,发现是可以实现的,特此记录下,直接看代码, 项目需求是第一列和第二列还有第16列需要相同内容进行合并,所以判断条件是不同的: 实现后效果如下: ...
- poi生成表格自动合并单元格
直接复制这个工具类即可使用: /** * 合并单元格 * @author tongyao * @param sheet sheet页 * @param titleColumn 标题占用行 * @par ...
- 图片合并成PDF,两个PDF的合并
需求: 将多张手机照片合并成一个PDF,并于另一个成型PDF合并 过程: 使用全能扫描王处理一遍,拆剪掉多余部分,并提高亮度增加文字对比度 合并: 使用Faststone Capture合并图片即可. ...
- 手把手教你使用Vue/React/Angular三大框架开发Pagination分页组件
DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师.官方网站:devui.designNg组件库:ng-devui(欢迎S ...
随机推荐
- Centos镜像下载
1.进入官网,并点击下图所示的红框(alternative downloads) 官网网址:https://www.centos.org/download/ 2.在往下翻,可以看到如下图的历史版本, ...
- 「浙江理工大学ACM入队200题系列」问题 F: 零基础学C/C++39——求方程的解
本题是浙江理工大学ACM入队200题第四套中的F题 我们先来看一下这题的题面. 由于是比较靠前的题目,这里插一句.各位新ACMer朋友们,请一定要养成仔细耐心看题的习惯,尤其是要利用好输入和输出样例. ...
- Django的简单使用
Django 基础简介 基础简介 1. 软件框架 一个公司是由公司中的各部部门来组成的,每一个部门拥有特定的职能,部门与部门之间通过相互的配合来完成让公司运转起来. 一个软件框架是由其中各个软件模块组 ...
- 从0搭建vue3组件库: Input组件
本篇文章将为我们的组件库添加一个新成员:Input组件.其中Input组件要实现的功能有: 基础用法 禁用状态 尺寸大小 输入长度 可清空 密码框 带Icon的输入框 文本域 自适应文本高度的文本域 ...
- C++初阶(类的访问权限以及封装+this指针+构造函数+析构函数+拷贝构造函数+参数列表+友元+内部类)
面向过程与面向对象 C语言是面向过程的,关注的是过程(函数),分析出求解问题的步骤,通过函数调用逐步解决问题. C++是基于面向对象的,关注的是对象,将一件事情拆分成不同的对象,靠对象之间的交互完成. ...
- Webpack前端源码泄露漏洞
什么是Webpack? webpack是一个打包器(bundler),它能将多个js.css.json等文件打包成一个文件.这样可以使复杂的各种加载文件集合为整合为单一的集合,让代码更加模块化便于编程 ...
- python仿写js算法二
前言 之前写过一篇用python 仿写 js 算法,当时以为大部分语法都已经能很好的在python找到对应的语法结构,直到前几天我用 python 仿写了 慕课网解析视频加密的算法,我发现很多之前没遇 ...
- day17 MySQL的安装 & 数据库基本语法——增删改查
day17 MySQL 登录数据库 mysql -h localhost -P 3307 -u root -p 查看所有数据库 show databases; 退出数据库 exit; //现有表格 u ...
- 函数调用时用const保护指针
当调用函数并且把指向变量的指针作为参数传入时,通常会假设函数将修改变量(否则,为什么函数需要指针呢?).例如,如果在程序中看到语句 f(&x); 大概是希望f改变x的值.但是,f仅需检查x的值 ...
- Java开发学习(四十六)----MyBatisPlus新增语句之id生成策略控制及其简化配置
在前面有一篇博客:Java开发学习(四十一)----MyBatisPlus标准数据层(增删查改分页)开发,我们在新增的时候留了一个问题,就是新增成功后,主键ID是一个很长串的内容. 我们更想要的是按照 ...