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