layui表格合并

遇到一个需求，layui合并表格，发现同事在一个项目里有写，就lou一下，做个记录，哈哈哈哈
先看效果：

实现方法如下
一、自定义一个modul，用来合并表格，然后对需要合并的列，加个merge属性，设置为true

  // 自定义模块
  layui.config({
    base: 'module/'
  }).extend({
    tableMerge: 'tableMerge'
  });
    /**
   * 合并单元格 
   */
  function merge(myTable) {
    var tableBox = $(myTable.elem).next().children('.layui-table-box'),
      $main = $(tableBox.children('.layui-table-body').children('table').children('tbody').children('tr').toArray().reverse()),
      $fixLeft = $(tableBox.children('.layui-table-fixed-l').children('.layui-table-body').children('table').children('tbody').children('tr').toArray().reverse()),
      $fixRight = $(tableBox.children('.layui-table-fixed-r').children('.layui-table-body').children('table').children('tbody').children('tr').toArray().reverse()),
      cols = myTable.cols[0], mergeRecord = {};

    for (let i = 0; i < cols.length; i++) {
      var item3 = cols[i], field = item3.field;
      if (item3.merge) {
        var mergeField = [field];
        if (item3.merge !== true) {
          if (typeof item3.merge == 'string') {
            mergeField = [item3.merge]
          } else {
            mergeField = item3.merge
          }
        }
        mergeRecord[i] = {mergeField: mergeField, rowspan: 1}
      }
    }

    $main.each(function (i) {

      for (var item in mergeRecord) {
        if (i == $main.length - 1 || isMaster(i, item)) {
          $(this).children('[data-key$="-' + item + '"]').attr('rowspan', mergeRecord[item].rowspan).css('position', 'static');
          $fixLeft.eq(i).children('[data-key$="-' + item + '"]').attr('rowspan', mergeRecord[item].rowspan).css('position', 'static');
          $fixRight.eq(i).children('[data-key$="-' + item + '"]').attr('rowspan', mergeRecord[item].rowspan).css('position', 'static');
          mergeRecord[item].rowspan = 1;
        } else {
          $(this).children('[data-key$="-' + item + '"]').remove();
          $fixLeft.eq(i).children('[data-key$="-' + item + '"]').remove();
          $fixRight.eq(i).children('[data-key$="-' + item + '"]').remove();
          mergeRecord[item].rowspan += 1;
        }
      }
    })

    function isMaster(index, item) {
      var mergeField = mergeRecord[item].mergeField;
      var dataLength = layui.table.cache[myTable.id].length;
      for (var i = 0; i < mergeField.length; i++) {

        if (layui.table.cache[myTable.id][dataLength - 2 - index][mergeField[i]]
          !== layui.table.cache[myTable.id][dataLength - 1 - index][mergeField[i]]) {
          return true;
        }
      }
      return false;
    }
  }
  //调用，合并[只贴重要部分]
   table.render({
      id: 'agriculturalAcreageTable',
      elem: '#agriculturalAcreageTable',
      even: true,
      height: 'full',
      url: url,
      method: 'GET',
      page: false, //开启分页
      cols: [[
        {
          field: 'year',
          title: '年份',
          align: 'center',
          merge:true,   //对指定的列开启合并功能
          width: 100,
        }, 
        {  
        }, 
       // ...省略
      ]],
      //...
      done:function (res,curr,count) {
        merge(this); //调用合并表格的方法
      }
    });

二、第二种方法合并表格，根据field来自动合并

/**
 * 合并方法
 * */
  var execRowspan = function (fieldName, index, flag) {
    // 1为不冻结的情况，左侧列为冻结的情况
    let fixedNode = index == "1" ? $(".layui-table-body")[index - 1] : (index == "3" ? $(".layui-table-fixed-r") : $(".layui-table-fixed-l"));
    // 左侧导航栏不冻结的情况
    let child = $(fixedNode).find("td");
    let childFilterArr = [];
    // 获取data-field属性为fieldName的td
    for (let i = 0; i < child.length; i++) {
      if (child[i].getAttribute("data-field") == fieldName) {
        childFilterArr.push(child[i]);
      }
    }
    // 获取td的个数和种类
    let childFilterTextObj = {};
    for (let i = 0; i < childFilterArr.length; i++) {
      let childText = flag ? childFilterArr[i].innerHTML : childFilterArr[i].textContent;
      if (childFilterTextObj[childText] == undefined) {
        childFilterTextObj[childText] = 1;
      } else {
        let num = childFilterTextObj[childText];
        childFilterTextObj[childText] = num * 1 + 1;
      }
    }
    let canRowspan = true;
    let maxNum = 9999;
    for (let i = 0; i < childFilterArr.length; i++) {
      maxNum = $(childFilterArr[i]).prev().attr("rowspan") && fieldName != "8" ? $(childFilterArr[i]).prev().attr("rowspan") : maxNum;
      let key = flag ? childFilterArr[i].innerHTML : childFilterArr[i].textContent;
      let tdNum = childFilterTextObj[key];
      let curNum = maxNum < tdNum ? maxNum : tdNum;
      let nextKey;

      for (let j = 1; j < curNum && (i + j < childFilterArr.length); j++) {
        nextKey = flag ? childFilterArr[i + j].innerHTML : childFilterArr[i + j].textContent;
        if (key != nextKey && curNum > 1) {
          canRowspan = true;
          curNum = j;
        }
      }
      if (canRowspan) {
        childFilterArr[i].setAttribute("rowspan", curNum);
        if ($(childFilterArr[i]).find("p.rowspan").length > 0) {//设置td内的p.rowspan高度适应合并后的高度
          $(childFilterArr[i]).find("p.rowspan").parent("p.layui-table-cell").addClass("rowspanParent");
          $(childFilterArr[i]).find("p.layui-table-cell")[0].style.height = curNum * 38 - 10 + "px";
        }
        canRowspan = false;
      } else {
        childFilterArr[i].style.display = "none";
      }
      if (maxNum) {
        maxNum--;
      }
      if (--childFilterTextObj[key] == 0 || maxNum == 0 || (nextKey != undefined && key != nextKey)) {
        canRowspan = true;
      }
    }
  };
  var layuiRowspan = function (fieldNameTmp, index, flag) {
    let fieldName = [];
    if (typeof fieldNameTmp == "string") {
      fieldName.push(fieldNameTmp);
    } else {
      fieldName = fieldName.concat(fieldNameTmp);
    }
    for (let i = 0; i < fieldName.length; i++) {
      execRowspan(fieldName[i], index, flag);
    }
  };

 //调用，合并[只贴重要部分]
   table.render({
      id: 'agriculturalAcreageTable',
      elem: '#agriculturalAcreageTable',
      even: true,
      height: 'full',
      url: url,
      method: 'GET',
      page: false, //开启分页
      cols: [[
        {
          field: 'year',
          title: '年份',
          align: 'center',
          width: 100,
        }, 
        {  
        }, 
       // ...省略
      ]],
      //...
      done:function (res,curr,count) {
         layuiRowspan('year',1); //调用合并表格的方法
         //layuiRowspan(["field1",'field12',······],1);//支持数组
      }
    });