改变layui表格样式

改变layui表格样式

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术：MVC

作者：盘洪源

撰写时间：2019年7月17日星期三

在做到一些数据表格的时候需要各种各样的样式，比如说字体变色，隔行变色这些等等，看下图效果：

像上面这个图片显示的效果一样，我这个的效果就是合计行这里面的数如果是小于0的就把它的字体颜色改一下，这个效果是通过layui里面有一个属性templet,这个属性的详细介绍layui里面的官网有，不懂就自已去看。

然后看下面代码块：

function oness(data) {

var btn = "";

if (data.Amount <= 0) {

btn += "<span class='one'>" + data.Amount + "</span>"

} else {

btn += "<span class=''>" + data.Amount + "</span>"

}

return btn

}

首先先封装好一个方法，这个方法里面主要写什么呢？

首先这个data就是能获取到当前行数据，然后下面if语句这个里面就是条件嘛，这个条件就根据大家的需求自已更改就行。

然后就是拼接了，只要把你需要返回的数据放到拼接里面就行。然后里面这个就相当于HTML，就是放你所需要的样式就行了，然后这个把这个封装好的方法放到你的初始化 表格里面直接调用就行

{ field: 'TotalMoneys', title: '进货总金额', align: 'center', totalRow: true, templet: ones },

然后这个修改单元格字体颜色的就完成了，还有表格下面的这个合计行这个颜色，layui官方给的自定义样式，如果想改的话就需要的话就在初始化表格里面的done里面加上下面这个，改变样式，然后就可以。

done: function (res, curr, count) {

$('.layui-table-total .layui-table tbody tr').css({ 'color': 'red' });

$('.layui-table-total .layui-table tbody tr').css({ 'background-color': '#ffffb4' });