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

曾经终败给现在 2022-04-23 03:12 535阅读 0赞

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
        });

发表评论取消回复

表情：

评论列表（有 0 条评论，535人围观）

还没有评论，来说两句吧...

相关阅读

相关 layui根据条件修改表格固定行的颜色

按钮样式存在 “noedit”时，该行变灰色 var data=\{ table :\{ id:'userlist-ta...

拼搏现实的明天。/ 2024年04月18日 16:28/ 0 赞/ 77 阅读

相关 layui数据表格合计行

在日常的学习或开发中，关于后台管理这一块的都会使用到layui.table数据表格，只要用到layui.table数据表格一般就会用到数据表格合计行。在layui官方文档数

谁践踏了优雅/ 2024年03月25日 16:43/ 0 赞/ 97 阅读

相关 layui数据表格点击编辑行数据事件

<table class="layui-hide" id="LAY_table_user" lay-filter="user"></table> 注意：单元格编辑事件

清疚/ 2023年06月06日 10:47/ 0 赞/ 53 阅读

相关 layui数据表格自动换行解决办法

问题背景不是所有的列表都是一行就搞定，如果遇到`layui.table`需要支持`自动换行`的情况，这个时候就需要改造layui的数据表格，支持自动换行。想要实现的

墨蓝/ 2023年03月04日 09:06/ 0 赞/ 29 阅读

相关 Layui数据表格换行

1.添加<br> 2.添加样式 .layui-table-cell { height: auto; } 效果如下： ![70][] [70

小咪咪/ 2022年05月20日 09:07/ 0 赞/ 523 阅读

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

var table = layui.table; table.render({ elem: 'test'

曾经终败给现在/ 2022年04月23日 03:12/ 0 赞/ 536 阅读

相关 layui按条件隐藏表格列

直接上关键代码： layui.use(['table','form','laypage'], function() { var table = layui

谁践踏了优雅/ 2022年04月22日 02:56/ 0 赞/ 653 阅读

相关《layUI 的数据表格》

1.Action private t_book_vo bookvo = new t_book_vo(); private bookDao_vo bdv =

亦凉/ 2022年04月18日 05:24/ 0 赞/ 531 阅读

相关 layui数据表格的使用

代码清单 welcom.html <!DOCTYPE html> <html> <head> <meta charset="utf-8

矫情吗；*/ 2021年12月10日 03:35/ 0 赞/ 469 阅读

相关 layui数据表格

快速使用创建一个table实例最简单的方式是，在页面放置一个元素 `<table id="demo"></table>`，然后通过 table.render() 方法指

约定不等于承诺〃/ 2021年06月24日 16:11/ 0 赞/ 841 阅读