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，否则显示为白色。

Layui表格好看样式相关推荐

php表格好看样式,怎么用css制作好看的表格？【示例】
本篇文章将要给大家详细介绍如何用css制作出好看又简洁的HTML表格.相信大家在接触过HTML相关知识后,或多或少都会自己写点小代码,写个小效果.就比如table表格,我们在浏览各个网站时,总能看到各 ...
layui表头样式_layui表格的样式设置
该楼层疑似违规已被系统折叠隐藏此楼查看此楼 layui表格的样式设置 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...
layui 表格字体_Layui表格自定义表格字体样式
该楼层疑似违规已被系统折叠隐藏此楼查看此楼 Layui表格中单元格样式可通过templet-自定义模板改变单元格内容样式: 在默认情况下,单元格的内容是完全按照数据接口返回的content原样输出的 ...
layui表格单元格样式自定义
layui表格单元格样式自定义在表格渲染完的回调done中操作: 1.匹配行,根据样式进行匹配,可F12查看(最终目的是只匹配到数据行) 2.匹配列,匹配成功后,就可以确定到某个单元格,获取行对应的 ...
layui表格使用复选框批量删除_word表格技巧：如何对表格进行样式批处理
编按:相信许多小伙伴都有过一次性需要编辑几十个甚至上百个表格的经历,当时可能就是一个个地调整,劳心劳力还劳神-今天小编就教大家2个Word VBA小技巧,几秒钟就能帮助大家搞定上百个表格,赶紧和小编一 ...
layui根据条件显示列_templet渲染layui表格数据的三种方式
layui前端框架是我一直在使用,也很好用. 今天记录一下,templet渲染layui表格数据的三种方式. 第一种:直接渲染(对于表格数据样式要求不高) 直接在动态表格字段声明,添加templet属 ...
layui表格使用：经验总结（含案例、代码、截图）
文章目录 layui表格使用:经验总结(含案例.代码.截图) 一.原生table案例 1.1. 原生table案例 · 效果截图: 1.2. 原生table案例 · 代码示下: 二.案例转化:layu ...
layui表格展示数据时：返回的数据不符合规范，正确的成功状态码应为：code: 0
1.今天,用django和layui结合,处理表格展示数据时,有数据的表格能正常显示列表,无数据的表格却提示了:返回的数据不符合规范,正确的成功状态码应为:"code": 0,于是 ...
设置Layui表格字段的字体颜色
设置Layui表格字段的字体颜色开发工具与关键技术:VS MVC 作者:木林森撰写时间:2019年 7 月 26 日我们在使用layui表格对的时候,经常会有特殊字段需要显示出来,比如金额.状态 ...

Layui表格好看样式

Layui表格好看样式相关推荐

最新文章

热门文章