layui table 渲染后改变背景色或颜色

一、table列表渲染

1、jsp

    <div class="main_list" id="main_list">
        <table class="layui-hide" id="table_list" lay-filter="table_list"></table>
    </div>

2、js

function query() {

    var querystr = "page_goto=1";
    querystr += "&page_size=8";
    querystr += "&event_id="+event_id;
    querystr += "&update_time="+update_time;
    layui.use('table', function(){
        var table = layui.table;
        //第一个实例
        table.render({
            elem: '#table_list'
            ,url: sys_ctx + '/baseloginfo/default.do?method=getEventLogDetail&'+ querystr
            ,cols: [[ //表头
                {field: 'column_name', title: '字段名称', width:'13%'},
                {field: 'field_before', title: '修改前', width:'25%',templet:function (d) {
                        var tmp = "";
                        if(d.column_name=="上报图片"){
                            tmp="查看图片";
                        } else {
                            tmp=d.field_before;
                        }
                        return tmp;
                    }},
                {field: 'field_after', title: '修改后', width:'25%',templet:function (d) {
                        var tmp = "";
                        if(d.column_name=="上报图片"){
                            tmp="查看图片";
                        } else {
                            tmp=d.field_after;
                        }
                        return tmp;
                    }},
                {field: 'update_name', title: '修改人', width:'15%'},
                {field: 'create_date', title: '修改时间', width:'20%'}
            ]],done:function (res, curr, count) {
                //判断某一列是图片的话,给下划线
                var re = res.data;
                if(re.length>0){
                    $.each(re,function (ii,dd) {
                        if(dd.column_name=="上报图片"){
                            $($(".layui-table-body.layui-table-main tr")[ii]).css("text-decoration", "underline");
                            $($("div .layui-table-fixed.layui-table-fixed-l .layui-table-body tr")[ii]).css("text-decoration", "underline");
                        }

                    })

                }

            }
            ,page:false

        });
        //监听行单击事件(单击事件为:rowDouble)
        table.on('row(table_list)', function(obj){
            var data = obj.data;
            var name = JSON.stringify(data.column_name);
            var column_name = name.replace(/"/g,"");
            var field_before = rep(JSON.stringify(data.field_before));
            var field_after = rep(JSON.stringify(data.field_after));
       //判断如果table行是图片的话,可点击事件
if(column_name=="上报图片"){ window.top.layer.open({ type : 2, title : "图片查看", shadeClose : true, shade : 0.8, zIndex : window.top.layer.zIndex, area: ['668px', '398px'], content : sys_ctx + '/base/system/baseloginfo/logEventDetail/logEventFJ.jsp?field_before='+field_before+'&field_after='+field_after, end: function(){ } }); } return false; //标注选中样式 obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click'); }); }); }

3、列表效果图

猜你喜欢

转载自www.cnblogs.com/w-yu-chen/p/11842801.html