layui怎么對(duì)列表數(shù)據(jù)進(jìn)行篩選

在Layui中，可以使用table模塊的filter()方法對(duì)列表數(shù)據(jù)進(jìn)行篩選。

具體步驟如下：

1. 在HTML中定義一個(gè)表格，并為每一行添加一個(gè)class屬性，用于標(biāo)識(shí)每一行的數(shù)據(jù)。

<table class="layui-table" id="demo">
<thead>
<tr>
<th>姓名</th>
<th>年齡</th>
<th>性別</th>
</tr>
</thead>
<tbody>
<tr class="data">
<td>張三</td>
<td>18</td>
<td>男</td>
</tr>
<tr class="data">
<td>李四</td>
<td>20</td>
<td>女</td>
</tr>
<tr class="data">
<td>王五</td>
<td>22</td>
<td>男</td>
</tr>
</tbody>
</table>

2. 在JavaScript中，使用filter()方法對(duì)列表數(shù)據(jù)進(jìn)行篩選，并將篩選結(jié)果渲染到表格中。

layui.use('table', function(){
var table = layui.table;
table.on('tool(demo)', function(obj){
var data = obj.data; //獲取當(dāng)前行的數(shù)據(jù)
if (data) {
// 篩選條件
var filterData = $('.data').filter(function(){
return $(this).find('td').eq(2).text() === '男'; //篩選性別為男的數(shù)據(jù)
});
// 渲染篩選結(jié)果
$('#demo tbody').html(filterData);
table.render();
}
});
});

注意：

• 需要引入Layui的table模塊，可以通過(guò)layui.use('table', function(){})來(lái)使用。

• 使用table.on('tool(demo)', function(obj){})監(jiān)聽(tīng)表格的操作事件，可以根據(jù)實(shí)際需要選擇監(jiān)聽(tīng)的事件。

• 使用$('.data').filter(function(){})對(duì)標(biāo)記為class="data"的行進(jìn)行篩選，可以根據(jù)具體需求自定義篩選條件。

• 使用$('#demo tbody').html(filterData)將篩選結(jié)果渲染到表格中。

• 使用table.render()重新渲染表格，使篩選結(jié)果生效。