使用layui做界面,有时候需要对某行标背景颜色,比如紧急、标重点等。
下面是简要代码
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 标签
最新评论