layui合并相同单元格数据，并根据合并单元格中风险值最大的颜色进行单元格上色

注：此处只贴重要代码，本项目的需求是将基地、部门、车间值一样的合并，根据合并单元格中最大的风险值进行上色，其他的单元格根据本行数据的风险值进行上色

table.render({
      elem: '#tableView'
      , url: url
      , method: 'post'
      , where: where
      , headers: headers
      , toolbar: '#toolbar' //开启头部工具栏，并为其绑定左侧模板
      , defaultToolbar: ['filter', {title: '刷新', layEvent: 'refresh', icon: 'layui-icon-refresh'}]
      , title: '四色图'
      , height: 'full-80'
      , cols: [[
        // {type: 'numbers', fixed: 'left'},
        {field: 'companyName', title: '基地', minWidth: 100, align: "center"}
        , {field: 'possessionDepName', title: '部门', minWidth: 110,align: "center"}
        , {field: 'workshopName', title: '车间', minWidth: 110,align: "center"}
        , {
          field: 'post',
          title: '岗位',
          minWidth: 110,
          align: "center",
          sort: true,
          templet: function (d) {
            if (d.post !== "" && d.post !== null) {
              return getCodeToName(d.post, 71);
            } else {
              return "";
            }
          }
        }
        , {field: 'riskValue', title: '风险值', minWidth: 80, align: "center"}
        , {field: 'hazardnum', title: '危险源数量', minWidth: 100, align: "center"}
        , {field: 'dangercounts', title: '待整改隐患数量', minWidth: 120, align: "center"}
        , {field: 'improvenum', title: '超期待整改隐患数量', minWidth: 120, align: "center"}
        , {field: 'proportion', title: '当月隐患排查完成比例', minWidth: 120, align: "center"}
        , {field: 'jobtickets', title: '当日正在执行的作业数量', minWidth: 120, align: "center"}
      ]]
      , page: true
      , done: function (res, curr, count) {
        res.data.forEach(function (item, index) {//修改单元格颜色
          if (item.riskValue > 320) {
            $(".layui-table-body tbody tr[data-index='" + index + "'] td").css({'background-color': "#CF1900",'color':'white'});
          } else if (item.riskValue > 160) {
            $(".layui-table-body tbody tr[data-index='" + index + "'] td").css({'background-color': "#f78b1f"});
          } else if (item.riskValue >= 70) {
            $(".layui-table-body tbody tr[data-index='" + index + "'] td").css({'background-color': "yellow"});
          } else {
            $(".layui-table-body tbody tr[data-index='" + index + "'] td").css({'background-color': "#0000FF",'color':'white'});
          }
        });

        merge(res);//合并单元格
      }
    });

在表格渲染完成后先根据风险值将每一个单元格上色，此时不考率合并问题。

/**
     * 合并单元格，并根据不同条件给合并后的单元格上色
     * @param res  传入的数据
     */
    function merge(res) {
      var data = res.data;
      var mergeIndex = 0;//定位需要添加合并属性的行数
      var mark = 1; //这里涉及到简单的运算，mark是计算每次需要合并的格子数
      // var columsName = ['company','possessionDep','workshop','post','hazardnum','dangercounts','improvenum','proportion','jobtickets'];//需要合并的列名称
      var columsName = ['companyName', 'possessionDepName', 'workshopName'];//需要合并的列名称
      var columsIndex = [0, 1, 2];//需要合并的列索引值
      var m = 0;//合并单元格首行的index，从 0 开始

      for (var k = 0; k < columsName.length; k++) { //这里循环所有要合并的列

        var trArr = $(".layui-table-body>.layui-table").find("tr");//所有行
        var riskValueArr = [];//定义一个存放合并单元格里的数据的 riskValue 值的数组
        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]]) { //后一行的值与前一行的值做比较，相同就需要合并

            for (var h = i - 1; h <= i; h++) { //将合并的单元格里的 riskValue 存放到数组（这一步的操作是为了找出合并单元格行数据中 riskValue 的最大值）
              riskValueArr.push(parseInt(data[h].riskValue));
            }

            mark += 1;
            tdPreArr.each(function () {//相同列的第一列增加rowspan属性
              $(this).attr("rowspan", mark);
            });
            tdCurArr.each(function () {//当前行隐藏
              $(this).css("display", "none");
            });
            
            var riskValueMax = Math.max(...riskValueArr); //获得合并单元格行数据 riskValue 的最大值
            if (riskValueMax > 320) { //根据最大风险值给合并后的单元格上色
              $(".layui-table-body tbody tr[data-index='" + m + "'] td[data-field='" + columsName[k] + "']").css({'background-color': "#CF1900",'color':'white'});
            } else if (riskValueMax > 160) {
              $(".layui-table-body tbody tr[data-index='" + m + "'] td[data-field='" + columsName[k] + "']").css({'background-color': "#f78b1f"});
            } else if (riskValueMax >= 70) {
              $(".layui-table-body tbody tr[data-index='" + m + "'] td[data-field='" + columsName[k] + "']").css({'background-color': "yellow"});
            } else {
              $(".layui-table-body tbody tr[data-index='" + m + "'] td[data-field='" + columsName[k] + "']").css({'background-color': "#0000FF",'color':'white'});
            }
          } else { //后一行的值与前一行的值做比较，不同时
            m = m + mark;//每次的合并单元格首行的 index 等于上一个并单元格首行的 index 加上合并的格子数
            riskValueArr = []; //当该值只有一个没有行数据要与其合并时，riskValueArr 只存放此行的 riskValue
            riskValueArr.push(parseInt(data[i].riskValue));
            mergeIndex = i;
            mark = 1;//一旦前后两行的值不一样了，那么需要合并的格子数mark就需要重新计算
          }
        }
        mergeIndex = 0;
        mark = 1;
        m = 0;//合并下一个需要合并值的格子时，m 恢复初始值
      }
    }
  });

此处代码功能为：合并单元格，并将合并的单元格根据最大风险值进行上色。
主要思路为：获取所有表格数据，定义需要合并的数据，当前数据与上一条数据对比…
注意：这种方法对后台返回的数据有要求，后台返回的数据需是已经按规则排序好的（如：按基地、部门、车间进行排序）