layui渲染表格时给某一行标背景色

忘是亡心i 2023-06-15 11:21 120阅读 0赞

**有些业务需要对某种特殊情况的行数标背景颜色，比如告警的，超标的，黑名单等等**  
**底下是截取出来的简短模板**

table.render({ 
            elem: '#table-id',
            url: "http://......",
            method: 'GET',
            page: true, //开启分页
            request: {  // 自定义分页参数
              pageName: 'pageNo',
              limitName: 'pageSize'
            },
            loading: true,
            parseData: function (res) {  
            //将原始数据解析成 table 组件所规定的数据
              if ('200' === res.code) { 
                return { 
                  "code": res.code, //解析接口状态
                  "msg": res.message, //解析提示文本
                  "count": res.data.Count, //解析数据长度
                  "data": res.data.Whites //解析数据列表
                };
              }
            },
            cols: [
              [
                { 
                  type: 'numbers'
                }
              ]
            ],
            done: function (res, curr, count) { 
              // layer.close(load);
              //如果是异步请求数据方式，res即为你接口返回的信息。
       		 //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
    	    console.log(res);
    	    //得到当前页码
    	    console.log(curr); 
    	    //得到数据总量
    	    console.log(count);
    		// 根据条件判断加背景色
    		 $.each(res.data, function (index, item) { 
                 if (item.flag == true) { 
                 // 法1
                  $("#table-id").next().find('tbody tr[data-index="' + index +
                  '"]').css("background-color", "#FFA07A");
                // 法2
                // var i = index + 1;
                // $('tr').eq(i).css("background-color", "#FF5722");
                  }
              });	    
            }
          });

**加背景色，只要在表格渲染完之后，在 done 处理即可，这里顺便提一下根据自己测试，两种方法的不同，没有理论，就是自己测试的结果**

*  如果该页面只有这一个表格渲染和字段属性中没有 fixed 标签，那用法2基本可以满足，如不是，你可以试一下，可以看到其他效果，比如  
    某一个字段加了fixed标签，那这个字段就不会加入背景色
 *  法1 的话，一整行都会变色，不管是否设置了 fixed 标签