没有技术的文章_化学纤维's blog-CSDN博客

本文链接：https://blog.csdn.net/qq_44558009/article/details/96330167

layui表格的样式设置

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

开发工具与关键技术：Visual Studio 2015、

作者：梁柏源

撰写时间：2019/7/17

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

在做页面设计时，大家可能会遇到过这样的事情，用layui设计一个数据表格，但是因为layuiTable的默认样式让表格看起来很大，从而导致页面的美观度急剧下降，毕竟要用户用你设计的软件或者其他什么的。第一印象肯定是要有入眼的美观，如果你的页面让人看的很不舒适，即使你的功能吊炸天也没有。

所以这次要说的一点是如何设置layui表格的样式。

上代码：

done: function (res, curr, count) {

$('layui-table[lay-even] tr:nth-child(even)').css({ 'background-color': '#c3cedd' });

$('th').css({ 'background-color': '#bdccea', 'color': 'black', 'font-weight': '500', 'font-size': '12px', 'line-height': '10px' });

}

这是设置颜色的，手滑粘错了，这种才是设置高度大小等：

.layui-table-cell {

height: 15px;

font-size: 12px;

line-height: 15px;

}

至于这个，emmm，浏览器打开你的页面，F12，自己找去。

看过layui官方文档的人应该都很熟悉这个done，在官方文档里面的结算的是这样的：done：数据渲染完的回调。无论是异步请求数据，还是直接赋值数据，都会触发该回调。你可以利用该回调做一些表格以外元素的渲染，看起来很厉害，其实真的很厉害。当然更改样式又不只是这点，大多颜色都可以改，不能改的，获取它加个标签，继续改。

就比如改某个表格中的某个标签，这就用到了这个“temple”，没错，这个也是layui里面的，在官方的文档中是这样子解释滴：自定义列模板，模板遵循 laytpl 语法。这是一个非常实用的功能，你可借助它实现逻辑处理，以及将原始数据转化成其它格式，如时间戳转化为日期字符等，在默认情况下，单元格的内容是完全按照数据接口返回的content原样输出的，如果你想对某列的单元格添加链接等其它元素，你可以借助该参数来轻松实现。这是一个非常实用且强大的功能，很厉害的，这里不说。

好了，现在看一下代码：

tabDetail = layuiTable.render({

elem: "#tabDetail",//html表格id

//url: "/StatisticAnalysis/Profit/selectdetail",//数据接口

totalRow: true,

height: 400,

cols: [[ //表头

{ type: 'numbers', title: '', rowspan: 2, totalRowText: "合计" },//序号列，title设定标题名称

{ field: 'MarketDetailID', title: 'MarketDetailID', hide: true, rowspan: 2 },//hide:true 隐藏列

{ field: 'CommodityNumber', title: '商品编码（条码）', align: 'center', rowspan: 2, width: 135 },

{ field: 'ShopName', title: '商品名称', align: 'center', rowspan: 2, width: 111 },

{ field: 'StyleNumber', title: '款号', align: 'center', rowspan: 2, width: 114},