根据条件对表格高亮显示

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 {}}}
})();```

layui-table表格根据条件更换表格背景颜色，高亮显示相关推荐

雷林鹏分享：jQuery EasyUI 数据网格 - 条件设置行背景颜色
jQuery EasyUI 数据网格 - 条件设置行背景颜色本教程将向您展示如何根据一些条件改变数据网格(datagrid)组件的行样式.当 listprice 值大于 50 时,我们将为该行设置不 ...
html怎么设置数据条的颜色,jQuery EasyUI 数据网格 – 条件设置行背景颜色 | 菜鸟教程...
jQuery EasyUI 数据网格 - 条件设置行背景颜色本教程将向您展示如何根据一些条件改变数据网格(datagrid)组件的行样式.当 listprice 值大于 50 时,我们将为该行设置不 ...
怎么更换证件照背景颜色？
常用的证件照背景颜色有红蓝白三种颜色,各种场合需要的证件照的背景颜色不尽相同,例如四六级考试要求蓝色底的证件照,于是跑去照相馆拍了张蓝底的证件照,明天公司的入职档案又要求白底的证件照,那要怎么办呢,难 ...
点击按钮随机更换页面背景颜色
点击按钮随机更换页面背景颜色先准备一个按钮就像如图所示的那样然后获取到刚刚的按钮并为按钮绑定点击事件. 并且弹出警告框来证明获取并绑定成功按钮. 效果展示: 点击按钮即可弹出警告框. 在点击事件 ...
html table转excel单元格带背景颜色
html table转excel单元格带背景颜色在浏览器端将html的table转成Excel,可以参考下面的库 https://github.com/JackGit/table2excel.js ...
layui table 全选过滤_layui表格(表单)的全选功能
最近在使用layui这个框架,其中有用到表格的全选功能,下面记录下我的使用.html文件需要引用的是layui.js和layui.css,但是上面两个文件又会引入其他文件.,如图所示, 所以建议从la ...
html表格中如何设置thtd的边框颜色,表格Table 的Th Td 标签设置背景颜色后边框消失如何解决？...
表格Table的Th Td标签在设置背景颜色后,设置的边框消失了,出现此情况主要是因为 [background]属性与 [position:relative;]同时使用的缘故. 解决方法:对Th T ...
layui table 表头合并_layui 动态表格之合并单元格
需求: 下面用excel表格大概模拟下需求,左边是原来的,要改成右边这样的: ①第一步:再生成表格后调用此方法,以合并重复的单元格 done : function(res, curr, count) ...
ant design 的table组件中设置单元格背景颜色
有时候我们在业务中会遇到一个表格,里面有很多数据, 这时候憨憨产品跑过来说,其中一个数据需要判断, 比如 age >18 的,背景颜色要标红, 18<age> 25的背景颜色要标 ...

layui-table表格根据条件更换表格背景颜色，高亮显示

根据条件对表格高亮显示

layui表格渲染后的回调

新建DataTableExtend.js文件，引入js文件,代码如下:

layui-table表格根据条件更换表格背景颜色，高亮显示相关推荐

最新文章

热门文章