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

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就需要重新计算

}

}

}

}

多列合并：

/**

* 合并单元格

* @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就需要重新计算

}

}

}

}