随着技术的提示,用户对页面的品质也越来越严格,普通的layui表格样式已经无法满足人们对页面的需求。例如以下的一些数据,一眼看上去并不能分辨出它们的类型,细看下才会发现,这里有应收和应付两个类型的数据,第一眼看上去并不能明显的分辩出来,此时
如果它们颜色不一样就会很容易的区分出来。
效果图:加了颜色之后能让用户有一种明显的美感和对他们进行初步的区分。
那么要如何做到给数据表格的字体改变颜色呢,这就要使用到layui数据表格里的一个表格参数done,这个参数是用于数据渲染完成后的回调。回调函数里有三个参数。
res:res的内容分为两种,如果是异步请求数据方式,res即为你接口返回的信息;如果是直接赋值的方式,res即为:{data: [], count: 99} data为当前页数据、count为数据总长度
curr:得到当前页码。
count:得到数据总量。
因为我这里没有分页,所有只用到了第一个参数。表格数据的字体也不能乱这改变,要有一定的依据,在这里就是通过应收或者应付来决定该行数据的颜色。这就要获取到表格里的数据,
因为数据存放的形式是数组的形式,所以要获取每一行数据时就要用一个循环来获取。
通过这个方法获取到数据表格里的收付款类型,判断该收付款类型如果为应收就把字体该行的字体颜色改为绿色,否则该为红色(收付款类型只有两种,应收、应付)。
在这里要注意一个问题,tr[data-index='" + i + "']选中的是所有表格的第i行,如果使用这个方法的页面有多个表格那就要通过某一个选择器限制一下。
在这里面其实还可以实现很多操作,例如计算一些费用。这就是通过应收应付类型计算出应收应付的费用以及利润。而且一加载完成就可以完成计算,不用再另外写计算的触发事件,用着更加方便。