layui之table根据内容渲染行颜色

起因

最近有个webpacs项目需要在检查列表中快速判断那些人已经报告结果,未保告结果行显示为红色,已报告结果显示为蓝色,需要根据每个人的报告状态对行的数据进行判断来给行上色.

思考

由于layui的table是动态渲染,很多新手都无法对其进行更多的操作,为了能操作行的颜色改变我们需要获取页面生成的DOM,如何获取这个DOM?我们可以根据lay-id来确定是否是动态生成的table,找到table后我们就可以在table载入完成的时候用css去对行的颜色进行改变.

实现

给table行上色方法

   function Layui_SetDataTableRowColor(TabDivId, RowIndex, ColorString) {
            try {
                var div = $("[lay-id='demo'] tr:eq(" + RowIndex + ")");
                if (div != null) //找到对象了
                {
                    // console.log(div);
                    div.css("color", ColorString);

                } else {
                    console.log('没有找到对象');
                }
            } catch (e) {
                console.log(e.message);
            }
        }

table渲染方法

table.render({
            elem: '#demo'
            , url: '{:url("index/getapinfobyday")}' //数据接口
            , where: {date: '{$tdate}'}
            , height: 800
            , cols: [[ //表头

                 {field: 'xm', title: '姓名', width: 100,style:'color:#f68;'}
                , {field: 'hm', title: '号码', width: 180,style:'color:#f68;'}
                , {field: 'xb', title: '性别', width: 80}
                , {field: 'rq', title: '日期', width: 120}
                , {field: 'other', title: '联', width: 120}
                , {field: 'xxx', title: '套', width: 200 ,style:'color:#f68;font-weight:bold'}
                , {field: 'hid', title: '机', width: 100 ,style:'color:#f68;'}
                , {field: 'apd', title: '预约日期', width: 120}
                , {field: 'hxrq', title: '时间', width: 200}
                , {field: 'orderId', title: '订单号', width: 180}
                , {field: 'hOrderId', title: '订单号', width:180}
                , {fixed: 'right', field: 'captcha', title: '验证码', width: 80, minWidth: 80}
                , {fixed: 'right', field: 'tm', title: '系统条码', width: 132, minWidth: 132}
                , {fixed: 'right', field: 'flag', title: '报告状态', width: 100, minWidth: 100}
                , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 300}
            ]]
            , done: function (res, curr, count) {
				//循环表数据根据flag状态给行上色
                $.each(res['data'], function (i, j) {
                    console.log(i + ' -454- ' + j['tm']);

                    if (j['flag'] === '') {

                        // console.log(i + ' -458- ' + 'jdjg is null');
                        Layui_SetDataTableRowColor('table', i + 1, '#b1070a');
                    } else {
                        // console.log(i + ' -458- ' + 'jdjg is not null');
                        Layui_SetDataTableRowColor('table', i + 1, '#0e1ab1');
                    }

                });


            }

        });