根据条件对表格高亮显示
layui表格渲染后的回调
,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('type'); // 隐藏列-单列模式// 对相关数据进行判断处理--此处对type等于1,2的进行高亮显示$.each(currentRowDataList, function (index, obj) {if (obj['type'] && obj['type'].value == '1') {obj['type'].row.css({"background-color": "#009966", 'color': '#99CCCC'});}if (obj['type'] && obj['type'].value == '2') {obj['type'].row.css({"background-color": "#F7B940", 'color': '#CCFFFF'});}})} // end done
新建DataTableExtend.js文件，引入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 {}}}})();```
