[JavaScript知识库]layui 动态生成表格单元格根据条件渲染背景色

一、动态表格

关键点：

1. Object.keys(data.data[0])获取所需要的表头字段；
2. colss.push({ align: ‘center’, title: arr[0], colspan: 2 });push cols 所需要的格式到数组里，其中field使用步骤1所得到的；
3. cols: [[]]根据固定格式，传入参数cols: [colss, colsData]
4. 注意步骤3，对于colspan=1的设置，需要增加空白行{ title: '', field: '', hide: true };不然会出现thead与tbody不对应；

二、单元格条件渲染

done 时渲染

1. 定位单元格，lay-id是对应table.render()中的id；
2. 动态声明变量
3. let attrName = 'role' + i;vars[attrName] = $(tr[i]).text().split('%');
4. $().css()进行渲染，多个值使用{'Cname':'value','Cname':'value'}

三、效果图

$('.layui-table-view[lay-id="dcTableFuc2"]').children('.layui-table-box').children('.layui-table-body').find('table tbody tr[data-index="0"] td')

function dcTableFuc2() {
      $.ajax({
      url: '',
      type: "",
      data: {},
      dataType: "json",
      success: function (data) {
          var colss = [];
          var colsData = [];
          //4.将数据转换为Object类型
          var keys = Object.keys(data.data[0])
          var lineOne = data.header[0];
          var dataList = data.data[0];
          var dataArr = [];
          var arr = [];
          for (var i in lineOne) {
              arr.push(lineOne[i]); //值
          }
          //5.循环数据并追加到表头数组中
          colss.push({ align: 'center', title: arr[0], colspan: 2 });
          for (let i = 1; i < arr.length; i++) {
              colss.push({ align: 'center', title: arr[i], colspan: 2 });
          }
          //data数据
          for (var i in dataList) {
              dataArr.push(dataList[i]); //值
          }
          //5.循环数据并追加到表头数组中
          colsData.push({ title: '', field: '', hide: true });
          for (let i = 0; i < dataArr.length; i++) {
              colsData.push({ field: keys[i], align: 'center', title: dataArr[i], colspan: 1 });
          }
          //0.Table初始化代码
          table.render({
              elem: '#'
              , method: ""
              , dataType: "json"
              , id: ''
              , url: '' //数据接口
              , page: false //开启分页
              , where: {}
              , cols: [colss, colsData] //初始化时cols留空\\
              , parseData: function (res) {
                  res.data.shift();
                  return {
                      "code": res.code,
                      "msg": res.msg,
                      "count": res.count,
                      "data": res.data
                  }
              },
              done: function (res, curr, count) {
                  var len = res.data.length - 1;
                  //合计行不进行单元格渲染
                  res.data.pop();
                  res.data.forEach(function (item, index) {
                      var tr = $('.layui-table-view[lay-id="dcTableFuc2"]').children('.layui-table-box').children('.layui-table-body').find('table tbody tr[data-index="' + index + '"] td');
                      var trTotal = $('.layui-table-view[lay-id="dcTableFuc2"]').children('.layui-table-box').children('.layui-table-body').find('table tbody tr[data-index="' + len + '"]');
                      trTotal.css('background-color', '#cccccc');
                      //动态生成所需要的变量名
                      let vars = [];
                      let varsText = [];
                      for (var i = 3; i < tr.length; i = i + 2) {
                          //动态生成所需要的变量名  循环遍历
                          let attrName = 'role' + i;
                          vars[attrName] = $(tr[i]).text().split('%');
                          let attrNameText = 'text' + i;
                          varsText[attrNameText] = Number(vars[attrName][0])
                          //单元格根据条件添加背景色
                          if (varsText[attrNameText] != NaN && varsText[attrNameText] >= 100) {
                          $(tr[i]).css({ 'background-color': '#00b050', 'color': 'white' });
                          } else if (varsText[attrNameText] != NaN && varsText[attrNameText] < 100) {
                              $(tr[i]).css({ 'background-color': '#e6b8b7', 'color': 'white' });
                          }
                      }
                  });
              }
          });
      },
      error: function () {}
  });
};