有些業務需要對某種特殊情況的行數標背景顏色,比如告警的,超標的,黑名單等等
底下是截取出來的簡短模板
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 標籤