没有技术的文章
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' });
}
});
代码就这么点，接下来看图：
没设置样式前：
设置样式后：
好了没了。