zoukankan      html  css  js  c++  java
  • layui table 根据条件改变更换表格颜色 高亮显示 数据筛选

    请问想让当layui表格的某个字段符合某个条件的时候,让该行变颜色。这样可以实现么。

    layui数据表格怎么更换表格颜色

    layui表格 通过判断某一行中的某一列的值进行设置这一行的颜色

    LayUI之table数据表格获取行、行高亮等相关操作

    能够根据相关条件进行数据筛选、进行高亮显示
    对符合条件的行进行高亮显示

               , done: function (res, curr, count) {// 表格渲染完成之后的回调
                    // $(".layui-table th").css("font-weight", "bold");// 设定表格标题字体加粗
                    LayUIDataTable.SetJqueryObj($);// 第一步:设置jQuery对象
                    var currentRowDataList = LayUIDataTable.ParseDataTable(function (index, currentData, rowData) {
                    })
                    LayUIDataTable.HideField('mk2');// 隐藏列-单列模式
                    // 对相关数据进行判断处理--此处对mk2大于30的进行高亮显示
                    $.each(currentRowDataList, function (index, obj) {
                        if (obj['mk2'] && obj['mk2'].value == '1') {
                            obj['mk2'].row.css({"background-color": "#009966", 'color': '#99CCCC'});
                        }
                        if (obj['mk2'] && obj['mk2'].value == '2') {
                            obj['mk2'].row.css({"background-color": "#F7B940", 'color': '#CCFFFF'});
                        }
                    })
                }// end done

    所用的库

    新建JavaScript文件,例如新建一个《DataTableExtend.js》的文件,代码如下:

    var LayUIDataTable = (function () {
        var rowData = {};
        var $;
    
        function checkJquery () {
            if (!$) {
                console.log("未获取jquery对象,请检查是否在调用ConvertDataTable方法之前调用SetJqueryObj进行设置!")
                return false;
            } else return true;
        }
    
        /**
         * 转换数据表格。
         * @param callback 双击行的回调函数,该回调函数返回三个参数,分别为:当前点击行的索引值、当前点击单元格的值、当前行数据
         * @returns {Array} 返回当前数据表当前页的所有行数据。数据结构:<br/>
         * [
         *      {字段名称1:{value:"当前字段值",cell:"当前字段所在单元格td对象",row:"当前字段所在行tr对象"}}
         *     ,{字段名称2:{value:"",cell:"",row:""}}
         * ]
         * @constructor
         */
        function ConvertDataTable (callback) {
            if (!checkJquery()) return;
            var dataList = [];
            var rowData = {};
            var trArr = $(".layui-table-body.layui-table-main tr");// 行数据
            if (!trArr || trArr.length == 0) {
                console.log("未获取到相关行数据,请检查数据表格是否渲染完毕!");
                return;
            }
            $.each(trArr, function (index, trObj) {
                var currentClickRowIndex;
                var currentClickCellValue;
    
                $(trObj).dblclick(function (e) {
                    var returnData = {};
                    var currentClickRow = $(e.currentTarget);
                    currentClickRowIndex = currentClickRow.data("index");
                    currentClickCellValue = e.target.innerHTML
                    $.each(dataList[currentClickRowIndex], function (key, obj) {
                        returnData[key] = obj.value;
                    });
                    callback(currentClickRowIndex, currentClickCellValue, returnData);
                });
                var tdArrObj = $(trObj).find('td');
                rowData = {};
                //  每行的单元格数据
                $.each(tdArrObj, function (index_1, tdObj) {
                    var td_field = $(tdObj).data("field");
                    rowData[td_field] = {};
                    rowData[td_field]["value"] = $($(tdObj).html()).html();
                    rowData[td_field]["cell"] = $(tdObj);
                    rowData[td_field]["row"] = $(trObj);
    
                })
                dataList.push(rowData);
            })
            return dataList;
        }
    
        return {
            /**
             * 设置JQuery对象,第一步操作。如果你没有在head标签里面引入jquery且未执行该方法的话,ParseDataTable方法、HideField方法会无法执行,出现找不到 $ 的错误。如果你是使用LayUI内置的Jquery,可以
             * var $ = layui.jquery   然后把 $ 传入该方法
             * @param jqueryObj
             * @constructor
             */
            SetJqueryObj: function (jqueryObj) {
                $ = jqueryObj;
            }
    
            /**
             * 转换数据表格
             */
            , ParseDataTable: ConvertDataTable
    
            /**
             * 隐藏字段
             * @param fieldName 要隐藏的字段名(field名称)参数可为字符串(隐藏单列)或者数组(隐藏多列)
             * @constructor
             */
            , HideField: function (fieldName) {
                if (!checkJquery()) return;
                if (fieldName instanceof Array) {
                    $.each(fieldName, function (index, field) {
                        $("[data-field='" + field + "']").css('display', 'none');
                    })
                } else if (typeof fieldName === 'string') {
                    $("[data-field='" + fieldName + "']").css('display', 'none');
                } else {
    
                }
            }
        }
    })();

    转: https://blog.csdn.net/moli8314/article/details/83544791

    转 : https://www.cnblogs.com/geekworld/p/8794150.html

  • 相关阅读:
    转载-HTTP
    程序员如何写出杀手级的简历
    23 岁的你,曾处于什么样的状态?现在呢?
    IntelliJ IDEA 14 java项目中添加jar包
    BNR Android Demo学习笔记(一)——CrimeIntent
    Android高仿微信(一)——如何消除启动时的白屏
    Swift2.1 语法指南——高级操作符
    Swift2.1 语法指南——访问控制
    Swift2.1 语法指南——泛型
    Swift2.1 语法指南——协议
  • 原文地址:https://www.cnblogs.com/fps2tao/p/10477588.html
Copyright © 2011-2022 走看看