Layui 数据表格合并单元格

参考了原博主文章:https://www.cnblogs.com/Kingram/p/9781682.html

效果:

Layui 数据表格合并单元格_第1张图片

一、先引入此方法

/**
 * 合并列方法
 * @param res
 * @param columsName 需要合并的列名称,示例:columsName = ['序号']
 * @param columsIndex 需要合并的列索引值,示例:columsIndex = [1]
 */
function merge(res, columnsName = [], columnsIndex = []) {
  var data = res.data;
  var mergeIndex = 0; //定位需要添加合并属性的行数
  var mark = 1; //这里涉及到简单的运算,mark是计算每次需要合并的格子数
  for (var k = 0; k < columnsName.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(columnsIndex[k]); //获取当前行的当前列
      var tdPreArr = trArr.eq(mergeIndex).find("td").eq(columnsIndex[k]); //获取相同列的第一列

      if (data[i][columnsName[k]] === data[i - 1][columnsName[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;
  }
}

二、调用

// 在done函数里调用
done: function(res, curr, count){
	merge(res,['序号'],[1])
}

你可能感兴趣的:(JavaScript,layui,前端,javascript)