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

 

posted @ 2022-11-30 14:06  ggtc  阅读(459)  评论(0编辑  收藏  举报
//右下角目录