设置数据表格中某行的颜色
当我们想在网页上用表格表达数据时,layui是table模块是个很好的选择。它用于对表格进行一些列功能和动态化数据操作,涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右,支持拖拽改变列宽度,支持排序,支持多级表头,支持单元格的自定义模板,支持对表格重载(比如搜索、条件筛选等),支持复选框,支持分页,支持单元格编辑等等一些列功能。
为了更好的一眼看过去的就能判别该行的数据,我们就要在某一行中设置字体颜色,或者背景颜色。如下图:
该图的寓意是:当停诊是true时。背景颜色该变为粉色。
接下里认识一下,使表行达到该效果的参数done。
无论是异步请求数据,还是直接赋值数据,都会触发该回调。都可以利用该回调做一些表格以外元素的渲染。我们就可以通过这样,设置它的条件,当满足条件时,使行的颜色改变。
Done的使用也很简单,
-
table.render({ //其它参数在此省略
-
done: function(res, curr, count){
-
//如果是异步请求数据方式,res即为你接口返回的信息。
-
//如果是直接赋值的方式,res即为:{data: [], count: 99} data为当前页数据、count为数据总长度
-
console.log(res);
-
//得到当前页码
-
console.log(curr);
-
//得到数据总量
-
console.log(count);
-
}
-
});
res即为:{data: [], count: 99} data为当前页数据。我们可以通过这句话里使某行的改变颜色。既然是某行,就是我们不知道到底哪行的数据,所以就要使用for循环去遍历整一个数据表格。
Cols表头的代码:{ field: ‘StopExamineNo’, title: ‘停诊’, align: ‘center’, width: 75 },
Done回调函数:
done:
function (res, curr, count)
{
for (var i = 0; i < res.data.length; i++) {
if (res.data[i].StopExamineNo) {
$("table tbody tr").eq(i).css('background-color', 'rgb(239, 181, 181)')
}
}
}
If语句的判断条件里默认是true,所以省略掉 == true。