改变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' });