Layui 数据表格合并单元格

参考了原博主文章：https://www.cnblogs.com/Kingram/p/9781682.html

效果：

一、先引入此方法

/*** 合并列方法* @param res* @param columsName 需要合并的列名称,示例：columsName = ['序号']* @param columsIndex 需要合并的列索引值,示例：columsIndex = [1]*/
function merge(res, columnsName = [], columnsIndex = []) {var data = res.data;var mergeIndex = 0; //定位需要添加合并属性的行数var mark = 1; //这里涉及到简单的运算，mark是计算每次需要合并的格子数for (var k = 0; k < columnsName.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(columnsIndex[k]); //获取当前行的当前列var tdPreArr = trArr.eq(mergeIndex).find("td").eq(columnsIndex[k]); //获取相同列的第一列if (data[i][columnsName[k]] === data[i - 1][columnsName[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;}
}

二、调用

// 在done函数里调用
done: function(res, curr, count){merge(res,['序号'],[1])
}

Layui 数据表格合并单元格相关推荐

layui实现表格合并单元格，设置不同背景色
最近在使用layui的过程中,遇到了表格合并单元格,设置不同背景色的问题. 在此总结,大家一起学习. 同一组新闻的底色相同,效果如下: 实现代码: <script>layui.config ...
Easyui数据表格合并单元格
合并与不合并的数据在同一个表中: $('#table_id').datagrid({title: '标题',collapsible: true,singleSelect:true,nowrap: tr ...
layui 动态表格合并单元格
效果图代码放置位置 done : function(res, curr, count) {merge(res);}function merge(res) {var data = res.data;v ...
layui表格合并单元格
思想:layui表格合并单元格,layui并没有给出相应的解决办法:那么我们可以在前端使用js将相邻并相同的单元格合并: 1.页面代码: <!DOCTYPE html> <html ...
记一次用iview实现表格合并单元格的具体操作
记一次用iview实现表格"合并"单元格的具体操作最近做项目使用iview框架做后台管理系统,第一次使用iview遇到过很多问题,有些小坑也都在网上找到解决方案了,可作为一个通用 ...
springboot中使用poi-tl导出word（包含表格合并单元格）实例
一.背景在业务开发过程中,遇到有需要生成包含表格的word文档,且一部分表格需要动态生成,且需要根据数据来合并单元格,最后呈现的方式如下图: 一开始想到的解决方案是通过freemarker来生成,但 ...
jquery操作表格合并单元格
$('#table_2').mergeCell({cols: [7,8,9] ///参数为要合并的列,例如[0,5],表示第0和第5列});/** * 操作表格合并单元格行 * 2016年12月1 ...
html在线编辑器合并单元格,Bootstrap实现的表格合并单元格示例
本文实例讲述了Bootstrap实现的表格合并单元格.分享给大家供大家参考,具体如下: 1.问题背景利用Bootstrap设计表格,并且表格需要合并单元格 2.实现源码 Bootstrap-表格合并 ...
【markdown】表格合并单元格
[markdown]表格合并单元格 DEMO DEMO 效果参考链接 :[markdown]表格合并单元格 DEMO <table><tr><th>属性</ ...
elementUI 表格合并单元格-多层级-合并行
elementUI 表格合并单元格-多层级-合并行需求:使用vue + elementUI 实现如下表格: 省份城市区域人口贵州遵义汇川区 100 红花岗区 100 播州区 100 贵阳 ...

Layui 数据表格合并单元格

效果：

一、先引入此方法

二、调用

Layui 数据表格合并单元格相关推荐

最新文章

热门文章