layui：数据表格如何合并单元格

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73

layui.use('table', function () { var table = layui.table;   table.render({ elem: '#applyTab' , url: '${cxt}/yptPreferentialApply/detail_data?id=${detailId}' , cols: [[ {field: 'goodsName', title: '产品名称'} , { field: 'priceType', title: '价格类型', templet: function (d) { switch (d.priceType) { case "0": return "免费"; case "1": return "按次"; case "2": return "包天"; case "3": return "包月"; case "4": return "包年"; case "5": return "包时"; } } } , {field: 'price', title: '单价'} , {field: 'discount', title: '折扣(%)'} , {field: 'preferentialPrice', title: '优惠价格'} , {field: 'chargeUnit', title: '计价单位'} ]] , done: function (res, curr, count) { merge(res, curr, count); } });   });   /** * 合并单元格 * @param res 表格数据 * @param curr 当前页 * @param count 总数 */ function merge(res, curr, count) { var data = res.data; var mergeIndex = 0;//定位需要添加合并属性的行数 var mark = 1; //这里涉及到简单的运算，mark是计算每次需要合并的格子数 var columsName = ['goodsName'];//需要合并的列名称 var columsIndex = [0];//需要合并的列索引值   for (var k = 0; k < columsName.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(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就需要重新计算 } } } }

 

多列合并：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65

/**         * 合并单元格         * @param res 表格数据         * @param curr 当前页         * @param count 总数         */         function merge(res, curr, count) {             var data = res.data;             //alert(JSON.stringify(data));             var mergeIndex = 0;//定位需要添加合并属性的行数             var mark = 1; //这里涉及到简单的运算，mark是计算每次需要合并的格子数             var columsName = ['CusID'];//需要合并的列名称             var columsIndex = [0];//需要合并的列索引值             for (var k = 0; k < columsName.length; k++)//这里循环所有要合并的列             {                 mark = 1;                 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(columsIndex[k]);//获取当前行的当前列                     var tdPreArr = trArr.eq(mergeIndex).find("td").eq(columsIndex[k]);//获取相同列的第一列                       if (data[i][columsName[k]] === data[i - 1][columsName[k]]) { //后一行的值与前一行的值做比较，相同就需要合并                        // alert(data[i][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; //这里涉及到简单的运算，mark是计算每次需要合并的格子数             columsName = ['CusName'];//需要合并的列名称             columsIndex = [1];//需要合并的列索引值             for (var k = 0; k < columsName.length; k++)//这里循环所有要合并的列             {                 mark = 1;                 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(columsIndex[k]);//获取当前行的当前列                     var tdPreArr = trArr.eq(mergeIndex).find("td").eq(columsIndex[k]);//获取相同列的第一列                       if (data[i][columsName[k]] === data[i - 1][columsName[k]]) { //后一行的值与前一行的值做比较，相同就需要合并                         // alert(data[i][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就需要重新计算                     }                 }             }         }