请问想让当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. Codeforces Round #469 (Div. 2)

    Codeforces Round #469 (Div. 2) 难得的下午场,又掉分了.... Problem A: 怎么暴力怎么写. #include<bits/stdc++.h> #de ...

  2. Codeforces Round #437 (Div. 2, based on MemSQL Start[c]UP 3.0 - Round 2)

    Problem A Between the Offices 水题,水一水. #include<bits/stdc++.h> using namespace std; int n; ]; i ...

  3. CSS 2. 盒模型|浮动

    1.盒模型 盒模型: 在网页中 基本上都会显示一些方方正正的盒子,这种盒子就被我们称为盒模型.重要的属性: width,height,padding,border, margin 盒子模型通过四个边界 ...

  4. 配置CentOS6.5的yum源

    系统yum源(源,英文repository,就是资源库的意思:yum,全称Yellow dog Updater, Modified,是centos的软件包管理器.基于RPM包管理,能够从指定的服务器自 ...

  5. python爬虫之下载文件的方式总结以及程序实例

    python爬虫之下载文件的方式以及下载实例 目录 第一种方法:urlretrieve方法下载 第二种方法:request download 第三种方法:视频文件.大型文件下载 实战演示 第一种方法: ...

  6. 浅谈vue之动态路由匹配

    在日常开发过程中,可能会遇到一些类似于新闻详情页的内容,需要把所有详情页映射到同一组件上,这是动态路由匹配的应用场景之一.在使用的过程中,也遇到过一些小坑,此篇做个简要的总结说明: 基本使用 { pa ...

  7. 程序猿(媛)的葵花宝典-- 必备idea 插件plugins 提高编码效率

    最近发现了几个非常好用   提高编码效率 的idea 插件 跟大家分享一下,,,不用谢我!!!!!!!!!!!!! 因为idea自带的插件下载可能连接不上服务器而导致插件下载失败,所以这里推荐使用引入 ...

  8. 洛谷.3807.[模板]卢卡斯定理(Lucas)

    题目链接 Lucas定理 日常水题...sublime和C++字体死活不同步怎么办... //想错int范围了...不要被longlong坑 //这个范围现算阶乘比预处理快得多 #include &l ...

  9. Python3绘图库Matplotlib(01)

    1 First plots with Matplotlib 简单的绘图1 简单的绘图2 简单的绘图3 2 网格 = grid 3 设置坐标轴的取值范围 = axis xlim ylim 方法1:整体设 ...

  10. CentOS+Nginx+PHP 前端部署

    都说Nginx比Apache性能优越,一直没有时间装测试,今天终于有时间装上试试性能了,其实Nginx的安装非常简单,具体流水步骤记录如下: 1.系统环境: ===================== ...