根据数据来显示数据表格的颜色

本文介绍如何使用LayUI插件根据特定字段值(如InventoryCount超过30)来改变数据表格中行或字体的颜色。通过完成数据表格的设置及利用layui的done回调函数,可以实现在数据渲染完成后对表格行背景颜色的动态调整。

(作者:饶家俊,撰写时间:2019年7月17号)

接下来是给大家介绍的在数据表格实现的操作,就让我简单的介绍一下,这个功能是要引入layui的插件,和layui的数据表格才可以实现,我们可以根据一个字段和ID,也可以是字段里面的true和false,来改变数据表格里面的颜色,也可以改变字段的颜色,下面就让我们看看吧,如何实现这样的功能的吧。
在这里插入图片描述

首先我们是根据数据表格来改变行或者字体的颜色,所以我们要先把数据表格显示出来,这样我们才可以进行下一步的操作。

这样我们就要根据主键ID和外键ID,来获取到字段和数据。获取到要在数据表格里面要显示的数据,我这里是根据这个字段InventoryCount来改变行或者字体的颜色,所以这个字段一定要获取到,在下面就是给数据表格分页。

在下面我们就要在视图里面填写字段来显示数据,在把数据表格里面的连接放上去,就可以实现数据表格了,在视图这里不一要用这个字段InventoryCount,因为我们在控制器查询到了,所以有没有这个字段我们都可以改变行或者字体的颜色。
在这里插入图片描述

在下面就是今天的重点了,我是根据layui的done 数据渲染完的回调,无论是异步请求数据,还是直接赋值数据,都会触发该回调。你可以利用该回调做一些表格以外元素的渲染。
在这里插入图片描述

下面我用的for循环,循环执行下面的代码,在用if来判断,res.data[i].InventoryCount > 30,InventoryCount的是否是大于30,如果是就在执行下面的代码,不是就不管他,在根据下面的来改变行颜色background-color #393D49是选择颜色 。
$(“table tbody tr”).eq(i).css(‘background-color’, ‘#393D49’
代码写完就来看一下效果吧,只要大于30就会改变行的颜色。
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值