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]) }