请问想让当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

layui table 根据条件改变更换表格颜色 高亮显示 数据筛选的更多相关文章

  1. layui table动态表头 改变表格头部 重新加载表格

    改变头部原理: 删除原来表格, 重新建立DOM元素, 重新加载table,实现表头改变 明白了原理, 我相信大家都能写出来了, table.reload(ID, options)目前好像还不支持con ...

  2. Layui table 组件的使用:初始化加载数据、数据刷新表格、传参数

    背景 笔者之前一直使用 bootstrap table ,因为当前项目中主要使用 Layui 框架,于是也就随了 Layui table ,只是在使用的时候出现了一些问题,当然也是怪自己不熟悉的锅吧! ...

  3. JS实现页面table鼠标移动改变tr行颜色,单击tr选中复选框功能

    JS源代码: //需要设置tr背景颜色 var highlightcolor='#bfecfc'; //设置背景颜色 function changeto(index){ var tr1 = docum ...

  4. layui table表格详解

    上次做table有些东西 忘记了 这次当作来个分析总结一下  跟大家共同学习 闲话不多说 直接上例子   代码: <form id="form1" runat="s ...

  5. DevExpress控件-GridControl根据条件改变单元格(Dev GridControl 单元格着色)

    DevExpress控件-GridControl根据条件改变单元格颜色,如下图: 解决办法:可以参考:http://www.cnblogs.com/zeroone/p/4311191.html 第一步 ...

  6. layui 学习笔记一:layui table 查询、新增、编辑、删除

    一.table数据的呈现(对应查询) 页面代码: @{ ViewBag.Title = "TableGrid"; } @section styles{ <link href= ...

  7. layui table数据表格reload where参数保留问题

    layui table数据表格reload where参数保留问题 在使用layui过程中多多少少会遇到些问题 table reload 有个坑:reload时where参数会保留上次的参数,如果用 ...

  8. layui table 表格查询无效问题

    [热身话题] 在开发的过程中,大量数据的展示大多采用表格的方式,直观,清晰.在这里,我也使用过一些框架Bootstrap.table ,Dev table ,layui table.本次采用的layu ...

  9. layui table 表格上添加日期控件

    方法一: var tableInit = table.render({ elem: '#tbtxrz' , method: 'post' , data: jsonData , height: &quo ...

随机推荐

  1. Python windows安装MYSQL_db

    转自:https://www.cnblogs.com/gbx-bo/p/5993190.html

  2. 文档工具GitBook使用

    一.登陆注册 地址:https://www.gitbook.com/ 1.gitbook可使用github账号登录,如果已经注册github可以直接使用github账号登录 2.如果是github账号 ...

  3. golang编译源代码和交叉编译方法

    目录 golang编译源代码和交叉编译方法 编译源代码 编译go1.4 编译go1.12 交叉编译 golang编译源代码和交叉编译方法 编译源代码 golang编译其实很简单,下载一份最新的源代码后 ...

  4. 【*】CAS 是什么,Java8是如何优化 CAS 的

    文章结构 前言 想要读懂 Java 中的并发包,就是要先读懂 CAS 机制,因为 CAS 是并发包的底层实现原理.本文主要讨论  CAS 是如何保证操作的原子性的  Java8 对 CAS 进行了哪些 ...

  5. 模拟ajax接口返回的数据

    { "status": 0, "hasError": false, "success": true, "errno": ...

  6. 电商sku商品推荐

    1.逻辑回归LR进行实时离线三级品类训练. 2.通过用户对于实时.离线三级品类的偏好进行召回. 3.通过人的特征.sku特征.人sku交互特征.以及位置手机特征通过gbdt模型进行点击量预估.

  7. BZOJ 4552 [Tjoi2016&Heoi2016]排序 线段树的分裂和合并

    https://www.lydsy.com/JudgeOnline/problem.php?id=4552 https://blog.csdn.net/zawedx/article/details/5 ...

  8. HDU3915 Game 高斯消元

    题目链接 HDU3915 Game 高斯消元 题解 求异或方程组自由元的子集个数 高斯消元求秩,内存溢出好神 代码 #include<bitset> #include<cstdio& ...

  9. django——inclusion_tag

    inclusion_tag() 原型: django.template.Library.inclusion_tag() 主要作用:通过渲染一个模板来显示一些数据. 例如,Django的Admin界面使 ...

  10. bootStrap中的ul导航2

    <!doctype html><html > <head> <meta charset="utf-8"> <link rel= ...