Layer动态设置每一行的背景色

                                                                      Layer动态设置每一行的背景色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
<script>
    table.render({
        elem: '#table_id'   //表格ID
        ,url: '/.../.../...'    //请求数据地址
        ,where:  {type : '1', name: 'hello'}//默认传参,可不设置
        ,cols: [[   //列字段设置
            ,{field: 'hobby', width:'30%', title: '爱好'}
            ,{field: 'create_time', title: '时间'}
            ...
        ]]
        ,text: {
            none: '暂无相关数据!' //没有数据默认展示内容
        }
        ,page: false    //是否开启分页
        ,parseData: function(res) {//数据显示
            return {
                code: res.code,
                msg: res.msg,
                count: res.count,
                data: res.data
            }
        }
        ,done(res, curr, count){
            let data = res.data;
            data.forEach((value, i) => {
                let index = data[i]['LAY_TABLE_INDEX'];

                //根据每一行的status字段,设置当前行的背景颜色
                if (value.status == 1 ) {
                    $('.layui-table tr[data-index="' + index + '"]').css({ 'background-color': '#FFFFFF' });
                } else if ( value.status == 2 ) {
                    $('.layui-table tr[data-index="' + index + '"]').css({ 'background-color': 'blue' });
                } else{
                    $('.layui-table tr[data-index="' + index + '"]').css({ 'background-color': '#' });
                }

            });
        }
    });
</script>
</html>
发布了223 篇原创文章 · 获赞 36 · 访问量 15万+

猜你喜欢

转载自blog.csdn.net/qq_36025814/article/details/104864328