layui合并表格的单元格 合并列或行的两种方法_layui table 合并行_长着狒狒毛的程序媛的博客-程序员秘密

技术标签: layui  表格合并单元格  

注意:两种方法要求layui表格的单元格中没有使用fixed属性,不然代码不会起效
方法一:

 /**
* 合并单元格(列)
* @param res 表格数据
* @param curr 当前页
* @param count 总数
*/
function merge(res, curr, count) {
    var data = res.data;
    var mergeIndex = 0;//定位需要添加合并属性的行数
    var mark = 1; //这里涉及到简单的运算,mark是计算每次需要合并的格子数
    var columsName = ['dangci'];//需要合并的列名称
    var columsIndex = [0];//需要合并的列索引值

    for (var k = 0; k < columsName.length; k++)//这里循环所有要合并的列
    {
        var trArr = $(".layui-table-body>.layui-table").find("tr");//所有行
        for (var i = 1; i < res.data.length; i++) { 
        //这里循环表格当前的数据
            var tdCurArr = trArr.eq(i).find("td").eq(columsIndex[k]);//获取当前行的当前列
            var tdPreArr = trArr.eq(mergeIndex).find("td").eq(columsIndex[k]);//获取相同列的第一列
        
            if (data[i][columsName[k]] == data[i - 1][columsName[k]]) { 
                //后一行的值与前一行的值做比较,相同就需要合并
                mark += 1;
                tdPreArr.each(function () {
                    //相同列的第一列增加rowspan属性
                    $(this).attr("rowspan", mark);
                });
                tdCurArr.each(function () {
                    //当前行隐藏
                    $(this).css("display", "none");
                });
            }else {
                mergeIndex = i;
                mark = 1;//一旦前后两行的值不一样了,那么需要合并的格子数mark就需要重新计算
            }
        }
    }
}

方法二:

jQuery.fn.rowspan = function (colIdx) {
    return this.each(function () {
        var that;
        $('tr', this).each(function (row) {
            $('td:eq(' + colIdx + ')', this).filter(':visible').each(function (col) {
                if (that != null && $(this).html() == $(that).html()) {
                    var rowspan = $(that).attr("rowspan");
                    if (rowspan == undefined) {
                        $(that).attr("rowspan", 1);
                        rowspan = $(that).attr("rowspan");
                    }
                    rowspan = Number(rowspan) + 1;
                    $(that).attr("rowspan", rowspan);
                    $(this).hide();
                } else {
                    that = this;
                }
            });
        });
    });
};
//封装jQuery小插件用于合并相同内容单元格(列)
jQuery.fn.colspan = function (colIdx, index) { 
    return this.each(function () {
        $('tr', this).each(function (row) {
            $('td:eq(' + colIdx + ')', this).each(function (col) {
                if ($(this).text() == $(this).next().text()) {
                    $(this).attr("colspan", index);
                   // $(this).attr("colspan");
                    //$(this).text("<div class='layui-table-cel>" + $(this).text() + "</div>");
                    $(this).text($(this).text());
                    $(this).next().hide();
                }
            });
        });
    });
};

调用举例:
$('.layui-table').rowspan(0);//合并第一列中相同的行
$('.layui-table').colspan(1, 2);//合并第二行至第三行中相同的列
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_41515189/article/details/102987149

智能推荐

oracle数据库导入导出工具_oracle导库工具_欣淡定的博客-程序员秘密

早上看了一下《oracle从入门到精通》中数据的导入导出,这个之前在项目中经常用到,但是命令都是网上找的,并不了解其中的含义,现在刚好看到这,做了一些笔记94.数据导出工具 expdpexpdp是服务器端工具,只能在服务器端使用,客户端可使用exp工具expdp工具只能将导出的转储文件放在directory对象对应的目录,不能直接指定磁盘目录。因此使用expdp工具,首先建立direc...

Java多线程 -- 深入理解JMM(Java内存模型) --(四)volatile_石头dhf的博客-程序员秘密

[转载自并发编程网 – ifeve.com 原文链接:http://ifeve.com/tag/jmm/]volatile的特性当我们声明共享变量为volatile后,对这个变量的读/写将会很特别。理解volatile特性的一个好方法是:把对volatile变量的单个读/写,看成是使用同一个监视器锁对这些单个读/写操作做了同步。下面我们通过具体的示例来说明,请看下面的示例代码:[java] vie...

如何在docker中部署并启动redis_docker run -di --name redis -p 16379:6379 redis:4._浮灬夸的博客-程序员秘密

docker部署redis首先在linux中安装上Docker,然后启动Docker服务Centos7中 启动Docker systemctl start docker //启动docker systemctl stop docker //停止docker systemctl restart docker //重启docker查找想要拉取的镜像1. 直接在Linux中使用docker search 镜像名称 搜索镜像 docker search 镜像名称2.

python3字符串转为字典-Python处理json字符串转化为字典的简单实现_weixin_39968724的博客-程序员秘密

今天一个朋友给个需求:来来{&quot;isOK&quot;: 1, &quot;isRunning&quot;: None, &quot;isError&quot;: None}怎么转换成字典好,一看就是json转化很简单,开始:import jsona = &quot;{&quot;isOK&quot;: 1, &quot;isRunning&quot;: None, &quot;isErro...

MPI实例之中值滤波二_威成天下的博客-程序员秘密

前言前段时间写了“MPI实例之中值滤波”,当时测试出来的结果显示并行时间是超过串行时间的,这是因为程序在进程通信上花费太多时间。后来我将点对点通信修改为集合通信,通信时间大大减少。代码修改后的代码如下:#include &amp;lt;gdal_priv.h&amp;gt; #include &amp;lt;iostream&amp;gt;#include &quot;mpi.h&quot;using namespac...

Java Socket框架Apache MINA实现Socket服务器-客户端双向即时消息通信_apache socket_zhangphil的博客-程序员秘密

Java Socket框架Apache MINA实现Socket服务器-客户端双向即时消息通信基于Java Socket框架Apache MINA,实现一对简单的基于Socket的服务-客户端双向即时消息通信。服务器绑定本地80端口,客户端连接服务器,建立连接后,双方开始互发消息服务器端可客户端均能在控制台收发消息(控制台输入字符串然后按enter键发送)。当任意一方发送消息字符串“bye”时...

随便推点

总结一下最短路径的贝尔曼-福特算法(Bellman-Ford)及用队列优化(spfa)_队列优化的bellmanford算法的时间复杂度_zz你的名字的博客-程序员秘密

转发的一二货的:http://blog.csdn.net/riba2534/article/details/54575050 他是从《啊哈算法》上学的,本来想总结一下,一看跟他一模一样,then,,,,,,关于贝尔曼福特算法,假设有n个顶点,我们只需要遍历n-1轮就可以了,因为在一个含n个顶点的图中,任意两点之间的最短路径最多含有n-1条边, 什么原理,我就不讲了,网上大牛博客很多,我在这里上一

18_尚硅谷_Vue_使用vue-cli创建项目&&19_尚硅谷_Vue_基于脚手架编写项目_qq_34983808的博客-程序员秘密

1、使用vue-cli创建项目 参考: https://www.npmjs.com/package/vue-clihttps://github.com/vuejs/vue-cli/tree/master步骤: npm install -g vue-cli vue init webpack vue_demo cd vue_demo npm install npm run dev...

卡方检验python程序_卡方检验及其python实现_weixin_39868248的博客-程序员秘密

什么是卡方检验卡方检验是一种用途很广的基于卡方分布的假设检验方法,其根本思想就是在于比较理论频数和实际频数的吻合程度或拟合优度问题。其主要应用于分类变量,根据样本数据推断总体分布与期望分布是否有显著差异或推断两个分类变量是否相关或相互独立。卡方检验分类卡方检验步骤卡方检验可以参照一般假设检验步骤:设置原假设与备择假设设置显著性水平根据问题选择具体的假设检验方式计算统计量,并通过统计量获取P值根据P...

ajax学习笔记二:frameworks & study plan_weixin_30421809的博客-程序员秘密

I have spent two weeks on "Foundations_Of_Ajax". now I have the basic ideal about ajax.the most gai is that I have learned the advanced javascript &amp; dom.the main ajax frameworks on client side &a...

利尔达CC3200模块第一篇之-wlan_ap例程测试_weixin_30888707的博客-程序员秘密

1. 本次采用利尔达的CC3200模块,CC3200主时钟80M,内部没有flash,必须外接SPI Flash。本次测试采用利尔达科技的CC3200的底板和模块(左边)。烧写连接VCC, GND, RXD, TXD, SOP2, RST这6根线即可完成下载。串口下载的时候SOP2需要上拉,正常运行的时候SOP2留空。2. 使用IAR工具打开工程,看下main代码,其中VStartSimp...

递归入门--阶乘函数java实现_weixin_34413065的博客-程序员秘密

为什么80%的码农都做不了架构师?&gt;&gt;&gt; ...

推荐文章

热门文章

相关标签