Layui表格好看样式

Layui表格好看样式

开发工具与关键技术：web
作者：熊琪
撰写时间：2019.7.27

Layui表格的运用至今已经很广了，如需要以下样式的请继续往下看哦，如图一为layui表格的样式效果图，主要与layui的数据表格默认的样式不同的地方就是表头的颜色不同，和数据的颜色相间当为数为偶数时颜色为白色，除了偶数就是奇数，奇数显示为灰色，合计为黄色，而且表格高度固定，当数据条数过多，自动添加滚动条合计是固定在表格最下方。
看效果图：

(图一)
实现代码如下：
layui.use([‘layer’, ‘table’], function () {
layer = layui.layer, layuiTable = layui.table;
TabSalesDetail = layuiTable.render({
elem: ‘#SalesDetail’, size: ‘sm’,
totalRow: true, height:385,
cols: [[
{ type: ‘numbers’, title: ‘’, totalRowText: " 合计:", rowspan: 2 },
{ title: ‘商品编码(条码)’, field:‘CommodityCode’, align: ‘center’, rowspan: 2 },
{ title: ‘商品名称’, field: ‘CommodityName’, align: ‘center’, rowspan: 2 },
{ title: ‘款号’, field: ‘CommodityStyleNumber’, align: ‘center’, rowspan: 2 },
{ title: ‘颜色’, field: ‘ColorName’, align: ‘center’, rowspan: 2 },
{ title: ‘尺码’, field: ‘SizeName’, align: ‘center’, rowspan: 2 },
{ title: ‘吊牌价’, field: ‘TagPrice’, align: ‘center’, rowspan: 2 },
{ title: ‘单位’, field: ‘UnitName’, align: ‘center’, rowspan: 2 },
{ title: ‘销售’, align: ‘center’, colspan: 2 },{ title: ‘金额’, align: ‘center’, colspan: 2 },{ title: ‘成本’, align: ‘center’, colspan: 2 },{ title: ‘小票’, align: ‘center’, colspan: 2 },
],
[{ title: ‘折扣’, field: ‘Discount’, align: ‘center’ },
{ title: ‘数量’, field: ‘shuliang’, align: ‘center’, totalRow: ‘true’, },
{ title: ‘单价’, field: ‘CountPrice’, align: ‘center’ },
{ title: ‘合计’, field: ‘Price’, align: ‘center’ },
{ title: ‘单价’, field: ‘chengben’, align: ‘center’ },
{ title: ‘合计’, field: ‘chengbenall’, align: ‘center’ },
{ title: ‘单号’, field: ‘SellNumber’, align: ‘center’ },
{ title: ‘日期’, field: ‘danjuriqi’, align: ‘center’ },
]],
page: { limit: 1000,//指定每页显示的条数limits: [1000, 100, 50],//每页条数的选择项
}, //开启分页
data: [],//加载本地数据
done: function (res, curr, count) {
$(‘th’).css({ ‘background-color’: ‘#bdccea’, ‘color’: ‘black’, ‘font-weight’: ‘500’ })
$(‘th’).css({ ‘background-color’: ‘#bdccea’, ‘color’: ‘black’, ‘font-weight’: ‘500’ })
$(’.layui-table-total .layui-table tbody tr’).css({ ‘color’: ‘red’ });
$(’.layui-table-total .layui-table tbody tr’).css({ ‘background-color’: ‘#ffffb4’ });
var that = this.elem.next();res.data.forEach(function (item, index) {
//console.log(item.empName);item表示每列显示的数据
if (index % 2 == 0) {var tr = that.find(".layui-table-box tbody tr[data-index=’" + index + “’]”).css(“background-color”, “#ecedff”);
} else {
var tr = that.find(".layui-table-box tbody tr[data-index=’" + index + “’]”).css(“background-color”, “white”);
} })
},
});
});
Size表头参数，可以改变表头的大小号，totalRow是开启统计的参数true表示开启，再在需要统计的字段上加totalRow：truez就可以统计了， height:385,这是设置了表格的高度，th表头背景颜色为#bdccea，字体颜色为黑色，字体粗细为500，tr同理,最后判段数据是否为偶数行，为偶数行显示为灰色也就是#ecedff，否则显示为白色。