设置数据表格中某行的颜色

                            设置数据表格中某行的颜色

当我们想在网页上用表格表达数据时，layui是table模块是个很好的选择。它用于对表格进行一些列功能和动态化数据操作，涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右，支持拖拽改变列宽度，支持排序，支持多级表头，支持单元格的自定义模板，支持对表格重载（比如搜索、条件筛选等），支持复选框，支持分页，支持单元格编辑等等一些列功能。

为了更好的一眼看过去的就能判别该行的数据，我们就要在某一行中设置字体颜色，或者背景颜色。如下图：

该图的寓意是：当停诊是true时。背景颜色该变为粉色。

接下里认识一下，使表行达到该效果的参数done。

无论是异步请求数据，还是直接赋值数据，都会触发该回调。都可以利用该回调做一些表格以外元素的渲染。我们就可以通过这样，设置它的条件，当满足条件时，使行的颜色改变。

Done的使用也很简单，

table.render({ //其它参数在此省略
done: function(res, curr, count){
//如果是异步请求数据方式，res即为你接口返回的信息。
//如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
console.log(res);
//得到当前页码
console.log(curr);
//得到数据总量
console.log(count);
}
});

res即为：{data: [], count: 99} data为当前页数据。我们可以通过这句话里使某行的改变颜色。既然是某行，就是我们不知道到底哪行的数据，所以就要使用for循环去遍历整一个数据表格。

Cols表头的代码：{ field: ‘StopExamineNo’, title: ‘停诊’, align: ‘center’, width: 75 },

Done回调函数：
done:

 function (res, curr, count){for (var i = 0; i < res.data.length; i++) {if (res.data[i].StopExamineNo) {$("table tbody tr").eq(i).css('background-color', 'rgb(239, 181, 181)')}}}

If语句的判断条件里默认是true，所以省略掉 == true。

设置数据表格中某行的颜色相关推荐

layui修改table中的按钮_layui数据表格中如何设置按钮切换（是否置顶）与分页居中...
手记1 一.数据表格中按钮切换(置顶与取消) 在layUI数据表格中是可以使用toolbar设置表格内的按钮使用laytel语法置顶 {{# if(d.order>0){ }} 取消 {{ ...
设置数据表格的各种功能
开发工具与关键技术:Visual Studio + C# + Layui 撰写时间:2019.6.27 在我们使用Layui table数据表格的时候,经常会遇到各种各样的需求功能,用于对表格进行一些 ...
layui单元格鼠标样式_Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法...
如下所示: var tableIns = window.demoTable = table .render({ elem : '#idTest', id : 'idTest', url : '/par ...
layui数据表格中导出所有数据的简易解决办法
layui数据表格中导出所有数据的简易解决办法官方文档的困惑解决办法官方文档的困惑首先要说明的是:layui在 table 的工具栏内置了数据导出按钮,如果你是用它内置的导出按钮来导出数据,是 ...
layui数据表格中加入二维码
最近在做一个后端项目时,需要在表格中展示二维码,但是在layui表格渲染时无法获取元素id,下面就将我出现的问题记录下,并提供解决方案供大家查看. jq插件qrcode引入和下载 qrcode其实是通 ...
用VBA得到EXCEL表格中的行数和列数
用VBA得到EXCEL表格中的行数和列数每种方法中上面的是Excel的行数,下面的是Excel的列数. 方法1: ActiveSheet.UsedRange.Rows.Count ActiveShe ...
layui table数据表格中数据返回成功，但页面不显示数据内容问题
layui table数据表格中数据返回成功,但页面不显示数据内容问题. 这是我做毕业设计的时候自己遇到的问题,后来查看了网上的一些技术贴子而得到解决,所以便想总结一个大概的方法,供大家参考! 一般导 ...
layui数据表格中包含图片的处理方式
layui数据表格中包含图片时,图片可能显示不全. 搜索后网上的解决方法: <style>.layui-table-cell {height: 100%;max-width: 100%;} ...
layui 数据表格下拉框_LayUi数据表格中嵌套下拉框
layui嵌套下拉框实用方法(附效果图) 在做项目时遇到一个问题,在layui 的数据表格table里面如何做一个下拉框呢?效果图如下: 这样的效果想必是最理想的了思路分析: 我们可以通过layui ...
(转贴)用VBA得到EXCEL表格中的行数和列数
<script type="text/javascript"></script> <script src="http://pagead2.g ...

设置数据表格中某行的颜色

设置数据表格中某行的颜色相关推荐

最新文章

热门文章