layui数据表格效果----满足条件的行飘红

最新推荐文章于 2022-11-28 15:57:48 发布

想出家的霸天虎

最新推荐文章于 2022-11-28 15:57:48 发布

阅读量3.1k

点赞数

文章标签： layui web前端

本文链接：https://blog.csdn.net/weixin_39815001/article/details/86609941

版权

 var table = layui.table;
    table.render({
        elem: '#test'
        ,url:'/api/order/show?state=1'
        ,toolbar: '#toolbarDemo'
        ,cols: [[
            {type:'checkbox', width:50}
             ,{field:'id', title:'ID', width:80,sort: true}
            ,{field:'order_num', title:'订单号', width:120}
            ,{field:'recipient', title:'收件人', width:80}
            ,{field:'purpose', title:'目的地', width:100}
            // ,{field:'province', title:'州/省'}
            // ,{field:'country', title:'城市', width:80, sort: true}
            ,{field:'tel', title:'电话', width:120}
            ,{field:'phone', title:'手机', width:120}
            ,{field:'sku', title:'sku', width:120}
            ,{field:'source', title:'来源', width:60}
            ,{field:'created_at', title:'创建时间', width:120,sort: true}
            ,{field:'updated_at', title:'修改时间', width:120,sort: true}
            ,{field:'pic', title:'图片', width:100,templet:function (d) {
                        return "<img style='height: 70px;' src="+d.pic+">";
                    }}
            ,{field:'right',title: '操作',align:'center', toolbar: '#barDemo'}
        ]]
        ,done: function (res, curr, count) {
        for (var i=0;i<res.data.length;i++)   //遍历返回数据
        {
            if(res.data[i].recipient>20)    //设置条件
            {
                $("table tbody tr").eq(i).css('color','red')    //改变满足条件行的颜色
            }
        }
    }
        ,page: true
    });