layui合并单元格
在别人的基础上解决了多列合并和同一个页面多个表格的问题
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]) }
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾(3.3-3.9)
· winform 绘制太阳,地球,月球 运作规律