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 標籤

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章