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