登录  /  注册

layui动态表格之合并单元格

发布: 2019-11-22 17:28:09
转载
5355人浏览过

layui动态表格之合并单元格

 需求:

下面用excel表格大概模拟下需求,左边是原来的,要改成右边这样的:

1.jpg

①第一步:再生成表格后调用此方法,以合并重复的单元格

done : function(res, curr, count) {
        merge(res);
 }
登录后复制

②第二步:编写这个方法:

function merge(res) {            
        var data = res.data;        var mergeIndex = 0;//定位需要添加合并属性的行数
        var mark = 1; //这里涉及到简单的运算,mark是计算每次需要合并的格子数
        var columsName = ['id','name'];//需要合并的列名称
        var columsIndex = [0,1];//需要合并的列索引值
    
        for (var k = 0; k < columsName.length; k++) { //这里循环所有要合并的列
            var trArr = $(".<a style='color:#f60; text-decoration:underline;' href="https://www.php.cn/zt/18036.html" target="_blank">layui</a>-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就需要重新计算                    }
                }
            mergeIndex = 0;
            mark = 1;
        }
    }
登录后复制

更多layui框架知识请关注layui框架

以上就是layui动态表格之合并单元格的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
相关标签:
来源:博客园网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
关于CSS思维导图的课件在哪? 课件
凡人来自于2024-04-16 10:10:18
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号