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

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},

{ field: 'ColourName', title: '颜色', align: 'center', rowspan: 2, width: 111 },

{ field: 'SizeName', title: '尺码', align: 'center', rowspan: 2, width: 111 },

{ field: 'DropPrice', title: '吊牌价', align: 'center', rowspan: 2, width: 111 },

{ field: 'UnitName', title: '单位', align: 'center', rowspan: 2, width: 111 },

{ align: 'center', title: '销售', colspan: 2 },

{ align: 'center', title: '金额', colspan: 2 },

{ align: 'center', title: '成本', colspan: 2 }], [

{ field: 'Discount', title: '折扣', align: 'center', width: 110 },

{ field: 'Amount', title: '数量', align: 'center', totalRow: true, width: 77 },

{ field: 'Univalence', title: '单价', align: 'center', width: 110 },

{ field: 'TotalMoney', title: '合计', align: 'center', totalRow: true, width: 110 },

{ field: 'StockPrice', title: '单价', align: 'center', width: 110 },

{ field: 'Money', title: '合计', align: 'center', totalRow: true, width: 110 }

]],

page: {

limit: 10,//指定每页显示的条数

limits: [5, 10, 15, 20,25, 30, 35, 40, 45, 50],//每页条数的选择项

}, //开启分页

data: [],//加载本地数据

//toolbar:'#tabMarketDetailToolbar',

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' });

}

});

代码就这么点，接下来看图：

没设置样式前：

设置样式后：

好了没了。