導讀:后端開發后端開發layui的table模塊是一個重頭，在基礎參數方面盡可能地做到友好，即：保證功">

layui 的 table模塊是一個重頭，在基礎參數方面盡可能地做到友好，即：保證功能的前提而又避免過于繁雜的配置?；A參數一般出現在以下幾種場景中：

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

接下來看一下基礎元素有哪些？

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

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

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

JS： table.render({ cols: [[ //標題欄 {checkbox: true} ,{field: 'id', title: 'ID', width: 80} ,{field: 'username', title: '用戶名', width: 120} ]] }); 它等價于： <table class="layui-table" lay-data="{基礎參數}" 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>

下面是一個二級表頭的例子：

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

關鍵詞標簽: 模塊 參數 后端開發