该楼层疑似违规已被系统折叠 隐藏此楼查看此楼

Layui表格好看样式

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

开发工具与关键技术：web

作者：xq

撰写时间：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-boxtbody 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，否则显示为白色。