layui數(shù)據(jù)表格的

3 種方式?

方法渲染

<table id="demo2"></table>table.render({elem:"#demo2",// elem 屬性用來綁定容器的 id 屬性值url:"js/province.json",// 數(shù)據(jù)接口height:315,page:true,cols:[[{field:'code',title:'code',sort:true,width:100},{field:'name',title:'name',width:200}]],});

自動(dòng)渲染

? ? ? ? ? ? ?1) 帶有 class="layui-table" 的 <table> 標(biāo)簽。
?? ??? ??? ? ? ?2) 對(duì)標(biāo)簽設(shè)置屬性 lay-data="" 用于配置一些基礎(chǔ)參數(shù)
?? ??? ??? ? ? ?3) 在 <th> 標(biāo)簽中設(shè)置屬性lay-data=""用于配置表頭信息?

<table class="layui-table" lay-data="{height:315, url:'js/province.json', page:true}" lay-filter="test"><thead><tr><th lay-data="{field:'code', width:80, sort: true}">ID</th><th lay-data="{field:'name', width:80}">用戶名</th></tr></thead></table>

轉(zhuǎn)換靜態(tài)數(shù)據(jù)表格

<table lay-filter="demo">
?? ??? ??? ?<thead>
?? ??? ??? ??? ?<tr>
?? ??? ??? ??? ??? ?<th lay-data="{field:'username', width:100}">昵稱</th>
?? ??? ??? ??? ??? ?<th lay-data="{field:'experience', width:80, sort:true}">積分</th>
?? ??? ??? ??? ??? ?<th lay-data="{field:'sign'}">簽名</th>
?? ??? ??? ??? ?</tr>
?? ??? ??? ?</thead>
?? ??? ??? ?<tbody>
?? ??? ??? ??? ?<tr>
?? ??? ??? ??? ??? ?<td>賢心1</td>
?? ??? ??? ??? ??? ?<td>66</td>
?? ??? ??? ??? ??? ?<td>人生就像是一場(chǎng)修行a</td>
?? ??? ??? ??? ?</tr>
?? ??? ??? ??? ?<tr>
?? ??? ??? ??? ??? ?<td>賢心2</td>
?? ??? ??? ??? ??? ?<td>88</td>
?? ??? ??? ??? ??? ?<td>人生就像是一場(chǎng)修行b</td>
?? ??? ??? ??? ?</tr>
?? ??? ??? ??? ?<tr>
?? ??? ??? ??? ??? ?<td>賢心3</td>
?? ??? ??? ??? ??? ?<td>33</td>
?? ??? ??? ??? ??? ?<td>人生就像是一場(chǎng)修行c</td>
?? ??? ??? ??? ?</tr>
?? ??? ??? ?</tbody>
?? ??? ?</table>

總結(jié)

以上是生活随笔為你收集整理的Layui数据表格的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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