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

 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. SpringBoot中bean的生命周期

    目录 概述 使用场景 代码演示bean初始化 TestSupport BeanPostProcessorImpl log 代码 概述 Bean 生命周期管理是 Spring Boot 中的关键功能之一 ...

  2. 最新CAMX-python融合技术应用与大气污染来源解析方法

    大气污染问题既是局部.当地的,也是区域的,甚至是全球的.本地的污染物排放除了对当地造成严重影响外,同时还会在动力输送作用下,极大地影响下风向地区的大气环境状况.数值模式模拟是分析大气污染物时空分布和成 ...

  3. OpenGauss数据库对象属主变更后会自动调整对象权限吗?

    OpenGauss 数据库对象属主变更后会自动调整对象权限吗? OpenGauss 数据库创建了数据库对象之后,可以使用 alter 命令修改对象的属主. 以表为例,修改属主的命令如下: ALTER ...

  4. LTV预估的一些思考

    什么是LTV 用户生命周期价值(Lifetime Value, LTV)是一个非常重要的指标,定义为单个用户在某种生命周期内(i.e. 从开始使用产品到停止使用期间) 为产品创造的总价值. 比如GMV ...

  5. TeamViewer 9发布-在Linux下安装运行

    TeamViewer 9发布-在Linux下安装运行 来源:Linux中国  作者:未知 关注我们:    这篇指南介绍了怎么样在 RedHat. CentOS. Fedora 和 Debian. U ...

  6. sql 语句系列(闰年)[八百章之第十九章]

    前言 判断闰年还是挺有用的. mysql select DAY(LAST_DAY(DATE_ADD(CURRENT_DATE,INTERVAL -DAYOFYEAR(CURRENT_DATE)+1+3 ...

  7. ST语言

    CODESYS平台的ST语言笔记 前言: 基于汇川plc软件,底层是CODESYS平台.这回ST语言正儿八经要用 所以要学,做笔记是为了梳理加深基础要点印象,顺便分享交流学习.codesys平台包括汇 ...

  8. 力扣485(java)-最大连续数1的个数(简单)

    题目: 给定一个二进制数组, 计算其中最大连续 1 的个数. 示例: 输入:[1,1,0,1,1,1]输出:3解释:开头的两位和最后的三位都是连续 1 ,所以最大连续 1 的个数是 3. 提示: 输入 ...

  9. 力扣534(MySQL)-游戏玩法分析Ⅲ(中等)

    题目: 需求:请编写一个 SQL 查询,同时报告每组玩家和日期,以及玩家到目前为止玩了多少游戏.也就是说,在此日期之前玩家所玩的游戏总数.详细情况请查看示例. 查询结果格式在以下示例中: 对于 ID ...

  10. Spring Cloud Gateway一次请求调用源码解析

    简介: 最近通过深入学习Spring Cloud Gateway发现这个框架的架构设计非常简单.有效,很多组件的设计都非常值得学习,本文就Spring Cloud Gateway做一个简单的介绍,以及 ...