zoukankan      html  css  js  c++  java
  • Layui 数据表格特定数据行变色

    前言:

            1、个人转码小说网站:友书-绿色、纯净、无广告,欢迎广大小说阅读爱好者同行来本网站看小说

            2、书友交流群:580462139(群主及管理均为资深90后程序猿,也欢迎诸位刚毕业的小白入群咨询编程、面试、就业等各方面问题哦)

            3、对外承接app API开发、网站建设、系统开发,联系方式于文章最下方

    前端样式界面截图:

    前端代码:

    //方法级渲染
                table.render({
                    elem: '#bindTableData'
                    , method: 'post'
                    , url: '这里是请求地址'
                    , where: { accessToken: accessToken, type: 'all' }
                    , toolbar: '#toolbarDemo'
                    , cols: [[
                        { checkbox: true, fixed: true, field: 'Id',  '4%' }
                        , { field: 'ComplaintNo', title: '投诉编号',  '9%', align: 'center' }
                        , { field: 'ComplaintPatient', title: '投 诉 人',  '6%', align: 'center' }
                        , { field: 'Relation', title: '患者关系',  '6%', align: 'center' }
                        , { field: 'Contact', title: '联系电话',  '7%', align: 'center' }
                        , { field: 'ComplaintSource', title: '投诉来源',  '6%', align: 'center' }
                        , { field: 'ComplaintLevel', title: '投诉级别',  '6%', align: 'center' }
                        , { field: 'Department', title: '被投诉科室', align: 'center' }
                        , { field: 'Complainant', title: '被投诉人',  '6%', align: 'center' }
                        , { field: 'ReceptionDepartment', title: '接待科室',  '10%', align: 'center' }
                        , { field: 'RegistDate', title: '投诉日期',  '7%', align: 'center' }
                        , { field: 'Contents', title: '投诉内容',  '11%', align: 'center' }
                        , { field: 'Address', title: '投诉状态',  '6%', align: 'center' }
                        , { field: 'score', title: '操作',  '10%', align: 'center', toolbar: '#barDemo' }
                    ]]
                    , id: 'TableReload'
                    , page: true
                    , done: function (res, curr, count) {
                        var that = this.elem.next();
                        res.data.forEach(function (item, index) {
                            if (item.ComplaintLevel === "严重") {
                                var tr = that.find(".layui-table-box tbody tr[data-index='" + index + "']");
                                tr.css("background-color", "#FF5722");
                                tr.css("color", "white");
                            }
                        });
                    }, parseData: function (res) {
                        if (res.code == -1) {
                            layuiHelp.AlertMsg(res.msg, res.icon);
                        }
                    }
                });

    注解:

    done:数据渲染完的回调

    parseData-拿取原始数据

    文档截图:

      1、parseData:

    2、done:

     原文:https://blog.csdn.net/m0_37781450/article/details/103908272

  • 相关阅读:
    Vue2 后台管理系统解决方案
    vuejs 和 element 搭建的一个后台管理界面
    Composer 是什么
    解决无限 This file is indented with tabs instead of 4 spaces
    (七)boost库之单例类
    (六)boost库之内存管理shared_ptr
    (五)boost库之随机数random
    (四)boost库之正则表达式regex
    (二)boost库之字符串格式化
    (一)boost库之日期、时间
  • 原文地址:https://www.cnblogs.com/T8888/p/14134532.html
Copyright © 2011-2022 走看看