導(dǎo)讀:后端開發(fā)后端開發(fā)layui的table模塊是一個(gè)重頭，在基礎(chǔ)參數(shù)方面盡可能地做到友好，即：保證功">

layui 的 table模塊是一個(gè)重頭，在基礎(chǔ)參數(shù)方面盡可能地做到友好，即：保證功能的前提而又避免過于繁雜的配置。基礎(chǔ)參數(shù)一般出現(xiàn)在以下幾種場(chǎng)景中：

場(chǎng)景一：下述 lay-data 里面的內(nèi)容即為基礎(chǔ)參數(shù)項(xiàng)，切記：值要用單引號(hào) <table lay-data="{height:300, url:'/api/data'}" lay-filter="demo"> …… </table> 場(chǎng)景二：下述方法中的鍵值即為基礎(chǔ)參數(shù)項(xiàng) table.render({ height: 300 ,url: '/api/data' }); 更多場(chǎng)景：下述options即為含有基礎(chǔ)參數(shù)項(xiàng)的對(duì)象 > table.init('filter', options); //轉(zhuǎn)化靜態(tài)表格 > var tableObj = table.render({}); tableObj.reload(options); //重載表格

接下來看一下基礎(chǔ)元素有哪些？

1、elem - 綁定元素是指定原始table容器，只適用于 table.render()的渲染方式

HTML： <table id="test"></table> JS： table.render({ //其它參數(shù)在此省略 elem: '#test' //或 elem: document.getElementById('test') 等 });

2、設(shè)置表頭，這里包含很多值，是一個(gè)二維數(shù)組。如果你采用表格的“方法級(jí)渲染”，那么你需要借助該參數(shù)來設(shè)定表格。如：

JS： table.render({ cols: [[ //標(biāo)題欄 {checkbox: true} ,{field: 'id', title: 'ID', width: 80} ,{field: 'username', title: '用戶名', width: 120} ]] }); 它等價(jià)于： <table class="layui-table" lay-data="{基礎(chǔ)參數(shù)}" lay-filter="test"> <thead> <tr> <th lay-data="{checkbox:true}"></th> <th lay-data="{field:'id', width:80}">ID</th> <th lay-data="{field:'username', width:180}">用戶名</th> </tr> </thead> </table>

下面是一個(gè)二級(jí)表頭的例子：

JS： table.render({ cols: [[ //標(biāo)題欄 {field: 'username', title: '聯(lián)系人', width: 80, rowspan: 2} //rowspan即縱向跨越的單元格數(shù) ,{field: 'amount', title: '金額', width: 80, rowspan: 2} ,{align: 'center', title: '地址', colspan: 3} //colspan即橫跨的單元格數(shù)，這種情況下不用設(shè)置field和width ], [ {field: 'province', title: '省', width: 80} ,{field: 'city', title: '市', width: 120} ,{field: 'county', title: '詳細(xì)', width: 300} ]] }); 它等價(jià)于： <table class="layui-table" lay-data="{基礎(chǔ)參數(shù)}"> <thead> <tr> <th lay-data="{field:'username', width:80}" rowspan="2">聯(lián)系人</th> <th lay-data="{field:'amount', width:120}" rowspan="2">金額</th> <th lay-data="{align:'center'}" colspan="3">地址</th> </tr> <tr> <th lay-data="{field:'province', width:80}">省</th> <th lay-data="{field:'city', width:120}">市</th> <th lay-data="{field:'county', width:300}">詳細(xì)</th> </tr> </thead> </table>

關(guān)鍵詞標(biāo)簽: 模塊 參數(shù) 后端開發(fā)