該樓層疑似違規已被系統折疊?隱藏此樓查看此樓

Layui表格好看樣式

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

開發工具與關鍵技術：web

作者：xq

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。