layui列表改变行或者列以及单元格的背景色

代码如下
在这里插入图片描述

table.render({
            elem: '#test'
            , url: "接口地址"
            , toolbar: '#toolbarDemo' //开启头部工具栏,并为其绑定左侧模板
            , defaultToolbar: ['filter']
            , height: 'full-200'
            , width: 1650
            , limits: [10, 30, 50]
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增
            , text: {
                none: '暂无相关数据' //默认:无数据。注:该属性为 layui 2.2.5 开始新增
            }
            , page: { //支持传入 laypage 组件的所有参数(某些参数除外,如:jump/elem) - 详见文档
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                //,curr: 5 //设定初始在第 5 页
                , groups: 5 //只显示 1 个连续页码
                , first: false //不显示首页
                , last: false //不显示尾页

            }

            , cols: [[
                {field: 'phone', width: 130, title: '电话', toolbar: '#phone', event: 'phones', fixed: 'left'}
                ,{field: 'name', width: 86, title: '姓名', toolbar: "#name"}
                , {field: 'wx_name', title: '微信号', toolbar: "#wx_name"}
                , {field: 'province', width: 130, title: '省市', toolbar: '#provice', event: 'provice'}
                , {field: 'reg_data', width: 130, title: '注册时间', sort: true, toolbar: "#reg_data"}
                , {field: 'cate_name', width: 130, title: '考试类别', toolbar: "#category", event: 'see'}
                , {field: 'other_info', width: 130, title: '其他信息'}
                , {field: 'f_level', width: 300, title: '标签', toolbar: '#biaoqian'}
                , {field: 'next_time', width: 130, title: '下次回访', sort: true, toolbar: "#next_time"}
                , {field: 'visit_num', width: 130, title: '回访次数', sort: true, toolbar: "#visit_num"}
                ,{field:'import_source',width:130, title: '推广活动来源',toolbar:"#import_source"}
                ,{field:'userChannels',width:130, title: '渠道'}
                , {field: 'channel_name', width: 130, title: '所属渠道',toolbar:"#channel_name"}
                , {field: 'last_login_time', width: 130, title: '最后登录时间', sort: true, toolbar: "#last_login_time"}
                , {field: 'is_old_user', width: 130, title: '激活用户', toolbar: "#old_user"}
                , {field: 'caozuo', width: 500, title: '操作', toolbar: '#barDemo', fixed: 'right'}
            ]]
            , done: function (res) {
                hoverOpenImg();//显示大图
                dbclickPhone();//双击显示用户记录
                $("#target").html(res.target);
                $("#sumPaymentAll").html(res.sumPaymentAll);
                $("#amountperformance").html(res.amountperformance);
                $("#sumPaymentMonth").html(res.sumPaymentMonth);
                $("#clientValue").html(res.clientValue);
                $("#non_payment").html(res.non_payment);
                $("#count").html(res.count);
                $('td[data-field="caozuo"]').css({"background-color": "#ffffff"});
                // console.log(res);
                $.each(res.data, function (i, val) {
                    if (val.pid && val.first_pid && val.pid == val.first_pid && val.visit_num == "0") {		//是否首咨
                        $('tr[data-index="' + i + '"]').css({"background-color": "#F09CA8"});
                        // $('tr[data-index="' + i + '"] td[data-field="name"]').css({"background-color": "#F09CA8"});单元格变色
                    }
                    if (val.is_disuse && val.is_disuse == 4) {		//是否在废号池
                        $('tr[data-index="' + i + '"]').css({"background-color": "#e0e0eb"});
                    }
                    if (val.allot_list_id && val.allot_list_id > 0) {		//是否在废号池
                        $('tr[data-index="' + i + '"]').css({"background-color": "#b3ffb3"});
                    }
                    if (val.channel_type && val.channel_type == 2 && val.pid && val.first_pid && val.pid != val.first_pid && val.visit_num == "0") {		//添加付费渠道指定颜色
                        $('tr[data-index="' + i + '"]').css({"background-color": "#e8e6a8"});
                    }
                })
            }
            , id: 'testReload'
        });
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值