該樓層疑似違規(guī)已被系統(tǒng)折疊?隱藏此樓查看此樓

Layui表格好看樣式

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

開發(fā)工具與關(guān)鍵技術(shù)：web

作者：xq

撰寫時(shí)間：2019.7.27

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

Layui表格的運(yùn)用至今已經(jīng)很廣了，如需要以下樣式的請(qǐng)繼續(xù)往下看哦，如圖一為layui表格的樣式效果圖，主要與layui的數(shù)據(jù)表格默認(rèn)的樣式不同的地方就是表頭的顏色不同，和數(shù)據(jù)的顏色相間當(dāng)為數(shù)為偶數(shù)時(shí)顏色為白色，除了偶數(shù)就是奇數(shù)，奇數(shù)顯示為灰色，合計(jì)為黃色，而且表格高度固定，當(dāng)數(shù)據(jù)條數(shù)過多，自動(dòng)添加滾動(dòng)條合計(jì)是固定在表格最下方。

看效果圖：

(圖一)

實(shí)現(xiàn)代碼如下：

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: " 合計(jì):", rowspan: 2 },

{ title: '商品編碼(條碼)', field:'CommodityCode', align: 'center', rowspan: 2 },

{ title: '商品名稱',field: 'CommodityName', align: 'center', rowspan: 2 },

{ title: '款號(hào)',field: 'CommodityStyleNumber', align: 'center', rowspan: 2 },

{ title: '顏色',field: 'ColorName', align: 'center', rowspan: 2 },

{ title: '尺碼',field: 'SizeName', align: 'center', rowspan: 2 },

{ title: '吊牌價(jià)',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: '數(shù)量',field: 'shuliang', align: 'center', totalRow: 'true', },

{ title: '單價(jià)',field: 'CountPrice', align: 'center' },

{ title: '合計(jì)',field: 'Price', align: 'center' },

{ title: '單價(jià)',field: 'chengben', align: 'center' },

{ title: '合計(jì)',field: 'chengbenall', align: 'center' },

{ title: '單號(hào)',field: 'SellNumber', align: 'center' },

{ title: '日期',field: 'danjuriqi', align: 'center' },

]],

page: { limit: 1000,//指定每頁顯示的條數(shù)limits: [1000, 100, 50],//每頁條數(shù)的選擇項(xiàng)

}, //開啟分頁

data: [],//加載本地?cái)?shù)據(jù)

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表示每列顯示的數(shù)據(jù)

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表頭參數(shù)，可以改變表頭的大小號(hào)，totalRow是開啟統(tǒng)計(jì)的參數(shù)true表示開啟，再在需要統(tǒng)計(jì)的字段上加totalRow：truez就可以統(tǒng)計(jì)了， height:385,這是設(shè)置了表格的高度，th表頭背景顏色為#bdccea，字體顏色為黑色，字體粗細(xì)為500，tr同理,最后判段數(shù)據(jù)是否為偶數(shù)行，為偶數(shù)行顯示為灰色也就是#ecedff，否則顯示為白色。

總結(jié)

以上是生活随笔為你收集整理的layui表头样式_Layui表格好看样式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。