在别人的基础上解决了多列合并和同一个页面多个表格的问题

 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合并单元格的更多相关文章

  1. layui:数据表格如何合并单元格

    layui.use('table', function () { var table = layui.table; table.render({ elem: '#applyTab' , url: '$ ...

  2. layui table+复杂表头+合并单元格

    效果图: 问题:行hover效果感觉错乱  所以改为透明色 代码: <!DOCTYPE html> <html lang="en"> <head> ...

  3. C# 获取Excel中的合并单元格

    C# 获取Excel中的合并单元格 我们在制作表格时,有时经常需要合并及取消合并一些单元格.在取消合并单元格时需要逐个查找及取消,比较麻烦.这里分享一个简单的方法来识别Excel中的合并单元格,识别这 ...

  4. jquery操作表格 合并单元格

    jquery操作table,合并单元格,合并相同的行 合并的方法 $("#tableid").mergeCell({ cols:[X,X] ///参数为要合并的列}) /** * ...

  5. NPOI操作EXCEL(五)——含合并单元格复杂表头的EXCEL解析

    我们在第三篇文章中谈到了那些非常反人类的excel模板,博主为了养家糊口,也玩命做出了相应的解析方法... 我们先来看看第一类复杂表头: ...... 博主称这类excel模板为略复杂表头模板(蓝色部 ...

  6. poi获取合并单元格内的第一行第一列的值

    当读取如图所示的excel时,显示为第1行 第1列 的内容是:合并单元格 其它在合并单元格区域内的单元格不显示 示例代码如下: import java.io.FileInputStream; impo ...

  7. Repeater多列分别合并单元格

    GridView.Repeater合并单元格可以参考http://www.cnblogs.com/zhmore/archive/2009/04/22/1440979.html,但是原文例子是合并一列的 ...

  8. Aspose.Cells 首次使用,用到模版填充数据,合并单元格,换行

    Aspose.Cells 首次使用,用到模版填充数据,合并单元格,换行 模版格式,图格式是最简单的格式,但实际效果不是这种,实际效果图如图2 图2 ,注意看红色部分,一对一是正常的,但是有一对多的订单 ...

  9. easyui datagrid 合并单元格

    整理以前做的东西,这个合并单元格的问题再新浪博客也写过了..... 下面这段代码是列表数据 //载入排放系数管理报表数据 function LoadEmissionReportData() { //获 ...

  10. GRIDVIEW多行多列合并单元格(合并列)

    GitHub项目地址:https://github.com/mingceng/merge-gridviewcell 去年的时候,我写了两篇文章:  GridView多行多列合并单元格(完整代码和例子) ...

随机推荐

  1. 从入门到精通:C++ 学习路线指南,附详细学习计划

    C++是一种高级编程语言,广泛用于开发操作系统.应用程序.游戏和各种工具.如果你想学习这门语言,以下是一个适合初学者的学习路线: 第一步:学习C++基础知识 在学习C++之前,你需要掌握一些基础知识, ...

  2. Linux 操作另一台服务器

    服务器信任 在运维场景中,如果需要在一台服务器操作另一台服务器,就需要目标服务器(下面称为 B 服务器)信任当前服务器(下面称为 A 服务器). 在 A 服务器生成证书. ssh-keygen -t ...

  3. 三七互娱《斗罗大陆:魂师对决》上线,Network Kit助力玩家即刻畅玩

    三七游戏旗下的年度旗舰大作<斗罗大陆:魂师对决>现已开启全平台公测.8月1日,三七互娱技术副总监出席了HMS Core.Sparkle游戏应用创新沙龙,展示了在HMS Core Netwo ...

  4. Windows cmd命令 -- 记录

    # 清屏 >> cls # 查看进程 >> tasklist # 结束进程 >> tskill <pid> # 查询WIFI列表所有WIFI的信息 &g ...

  5. pyqt5报错:qt.qpa.plugin: Could not find the Qt platform plugin "windows" in "" This ap

    环境: win10 Python 3.7.5 vs code 解决方法: 新建环境变量,然后重启  vs code 就可以了 QT_QPA_PLATFORM_PLUGIN_PATH C:\Users\ ...

  6. sql 语句系列(记录时间差)[八百章之第十八章]

    计算当前记录和下一条记录之间的日期差 关键点在于如何获得下一条日期. mysql 和 sql server select x.*,DATEDIFF(day,x.HIREDATE,x.next_hd) ...

  7. sql 语句系列(分割ip)[八百章之第十四章]

    前言 单独列出的章节.因为用处比较多. mysql select SUBSTRING_INDEX(SUBSTRING_INDEX("192.168.1.1",".&quo ...

  8. keycloak~jwt的rs256签名的验证方式

    接口地址 keycloak开放接口地址:/auth/realms/fabao/.well-known/openid-configuration rsa算法相关术语 RSA算法是一种非对称加密算法,其安 ...

  9. 阿里云峰会 | 阿里云CDN六大边缘安全能力,全力助推政企数字化转型

    6月9日,2020年阿里云线上峰会召开.阿里云智能总裁张建锋认为,数字化已经成为中国经济的主要驱动力,疫情让政府.企业都认识到数字化的迫切性.在峰会上,阿里云CDN正式对外发布基于CDN构建的六大边缘 ...

  10. 滴滴 Flink-1.10 升级之路

    简介: 滴滴实时计算引擎从 Flink-1.4 无缝升级到 Flink-1.10 版本,做到了完全对用户透明.并且在新版本的指标.调度.SQL 引擎等进行了一些优化,在性能和易用性上相较旧版本都有很大 ...