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

曾经终败给现在 2022-04-23 03:12 510阅读 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 条评论，510人围观）

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

相关阅读

相关 layui数据表格合计行

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

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

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

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

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

相关 Layui数据表格换行

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

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

相关 LayUi 之数据表格

我们在平常做项目的过程中，如果想使用数据表格的话，一般都是动态数据的处理，而且一般如果我们数据表格不加分页的话，还是很容易做的，但是加了数据表格的话，如果是前端分页，那也好说，

￡神魔★判官ぃ/ 2022年05月20日 04:27/ 0 赞/ 342 阅读

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

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

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

相关 layui按条件隐藏表格列

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

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

相关《layUI 的数据表格》

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

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

相关 Layui数据表格的构建

开发工具与关键技术：VS ；单表的linq语句作者：刘佳明撰写时间：2019年 4 月 14 日（注：源代码及资料，插件来源于老师的课件！！！！）构建数据

客官°小女子只卖身不卖艺/ 2022年02月20日 15:21/ 0 赞/ 411 阅读

相关 layui数据表格的使用

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

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

相关 layui数据表格

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

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