layui合并单元格
在别人的基础上解决了多列合并和同一个页面多个表格的问题
1 //合并单元格
2 function merge(id,res, columsName, columsIndex) {
3
4 var data = res.data;
5 var mergeIndex = 0;//定位需要添加合并属性的行数
6 var mark = 1; //这里涉及到简单的运算,mark是计算每次需要合并的格子数
7
8 for (var k = 0; k < columsName.length; k++) { //这里循环所有要合并的列
9 var trArr = $(`#${id}`).next().find(".layui-table-body").children(".layui-table").find("tr");//所有行
10 for (var i = 1; i < res.data.length; i++) { //这里循环表格当前的数据
11 var tdCurArr = trArr.eq(i).find("td").eq(columsIndex[k]);//获取当前行的当前列
12 var tdPreArr = trArr.eq(mergeIndex).find("td").eq(columsIndex[k]);//获取相同列的第一列
13 //要该列前面所有合并列相同才能合并
14 for (var j = 0; j <= k; j++) {
15 if (data[i][columsName[j]] != data[i - 1][columsName[j]]) {
16 mergeIndex = i;
17 mark = 1;//一旦前后两行的值不一样了,那么需要合并的格子数mark就需要重新计算
18 break;
19 }
20 if (j==k) {
21 if (data[i][columsName[k]] === data[i - 1][columsName[k]]) { //后一行的值与前一行的值做比较,相同就需要合并
22 mark += 1;
23 tdPreArr.each(function () {//相同列的第一列增加rowspan属性
24 $(this).attr("rowspan", mark);
25 });
26 tdCurArr.each(function () {//当前行隐藏
27 $(this).css("display", "none");
28 });
29 }
30 else {
31 mergeIndex = i;
32 mark = 1;//一旦前后两行的值不一样了,那么需要合并的格子数mark就需要重新计算
33 }
34 }
35 }
36 }
37 mergeIndex = 0;
38 mark = 1;
39 }
40 }
效果
用例:
done: function (res) {
merge("xmztable", res,["updateUser"],[0])
}
layui合并单元格的更多相关文章
- layui:数据表格如何合并单元格
layui.use('table', function () { var table = layui.table; table.render({ elem: '#applyTab' , url: '$ ...
- layui table+复杂表头+合并单元格
效果图: 问题:行hover效果感觉错乱 所以改为透明色 代码: <!DOCTYPE html> <html lang="en"> <head> ...
- C# 获取Excel中的合并单元格
C# 获取Excel中的合并单元格 我们在制作表格时,有时经常需要合并及取消合并一些单元格.在取消合并单元格时需要逐个查找及取消,比较麻烦.这里分享一个简单的方法来识别Excel中的合并单元格,识别这 ...
- jquery操作表格 合并单元格
jquery操作table,合并单元格,合并相同的行 合并的方法 $("#tableid").mergeCell({ cols:[X,X] ///参数为要合并的列}) /** * ...
- NPOI操作EXCEL(五)——含合并单元格复杂表头的EXCEL解析
我们在第三篇文章中谈到了那些非常反人类的excel模板,博主为了养家糊口,也玩命做出了相应的解析方法... 我们先来看看第一类复杂表头: ...... 博主称这类excel模板为略复杂表头模板(蓝色部 ...
- poi获取合并单元格内的第一行第一列的值
当读取如图所示的excel时,显示为第1行 第1列 的内容是:合并单元格 其它在合并单元格区域内的单元格不显示 示例代码如下: import java.io.FileInputStream; impo ...
- Repeater多列分别合并单元格
GridView.Repeater合并单元格可以参考http://www.cnblogs.com/zhmore/archive/2009/04/22/1440979.html,但是原文例子是合并一列的 ...
- Aspose.Cells 首次使用,用到模版填充数据,合并单元格,换行
Aspose.Cells 首次使用,用到模版填充数据,合并单元格,换行 模版格式,图格式是最简单的格式,但实际效果不是这种,实际效果图如图2 图2 ,注意看红色部分,一对一是正常的,但是有一对多的订单 ...
- easyui datagrid 合并单元格
整理以前做的东西,这个合并单元格的问题再新浪博客也写过了..... 下面这段代码是列表数据 //载入排放系数管理报表数据 function LoadEmissionReportData() { //获 ...
- GRIDVIEW多行多列合并单元格(合并列)
GitHub项目地址:https://github.com/mingceng/merge-gridviewcell 去年的时候,我写了两篇文章: GridView多行多列合并单元格(完整代码和例子) ...
随机推荐
- 微服务集成Spring Cloud Zipkin实现链路追踪并集成Dubbo
1.什么是ZipKin Zipkin 是一个根据 Google 发表的论文" Dapper" 进行开源实现的分布式跟踪系统. Dapper是Google 公司内部的分布式追踪系统, ...
- 【C#上位机】西门子1200PLC实用定位控制程序案例
1. 引言 新阁教育这篇文章是一篇综合性非常强的文章,从PLC输入输出及步进电机接线开始,到PLC运动控制程序编写,再到后续的ModbusTCP通信协议及上位机编程实现最终控制,涉及知识面比较广,能够 ...
- HarmonyOS如何高效上架原子化服务?这个平台帮你搞定!
以往HarmonyOS应用和原子化服务都是在AGC(App Gallery Connect)上架,二者的上架流程一样.但应用的形态更加复杂庞大,上架时有很多必填字段,审核标准也相对复杂,而原子化服务的 ...
- HDC2021技术分论坛:盘点分布式软总线数据传输技术中的黑科技
作者:houweibo,软总线首席技术专家:lidonghua,软总线技术专家 随着万物互联时代的到来,特别是大量媒体资源的涌入和使用,用户对传输的要求不断提高,怎样的传输技术才能满足未来的用户需求呢 ...
- Phoenix 时区问题
最近在测试flink从trino查询数据插入到phoenix5的功能,发现一个时间的问题: 明明插入的时间是 '1940-06-01',查询出来的时间会少一天,同样的 Timestamp 也会自动少掉 ...
- 实际项目中一般使用到的git知识
1.项目上线分支管理流程 图片压缩太厉害有些模糊 700k 压缩到20多k 清晰些的图片地址https://project.zdzspace.cn/test-vuekey 2.一些常用的git命令 g ...
- iframe跨域,获取iframe中元素
1.需求让iframe嵌入页面,并且没有滚动条,也就是相当于两个页面拼接在一起 跨域解决,通过框架配置代理 proxy: { '/medical': { target: 'https://exampl ...
- 【Oracle】Oracle数据库,第N大数据取值
Oracle数据库,第N大数据取值 没想到力扣还有数据库的练习,正好本菜鸡跑过来练手 要显示第二大的数据可以使用order by进行排序,然后用limit对显示的数据进行限制,limit1,1,以此来 ...
- 力扣534(MySQL)-游戏玩法分析Ⅲ(中等)
题目: 需求:请编写一个 SQL 查询,同时报告每组玩家和日期,以及玩家到目前为止玩了多少游戏.也就是说,在此日期之前玩家所玩的游戏总数.详细情况请查看示例. 查询结果格式在以下示例中: 对于 ID ...
- 为 Serverless Devs 插上 Terraform 的翅膀,解耦代码和基础设施,实现企业级多环境部署(下)
简介: 在上篇<为 Serverless Devs 插上 Terraform 的翅膀,实现企业级多环境部署(上)>中,主要介绍了 Serverless Devs 多环境功能的使用,用户读完 ...