layuiでリストデータをフィルターする方法

レイアウトのtableモジュールのfilter()メソッドでリストデータの絞り込みを実施できます。

具体的な手順は以下の通りです。

1. HTMLでテーブルを定義し、各行に、各行のデータを識別するためのclass属性を追加する。

<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>

1. JavaScriptのfilter()メソッドを使用してリストデータをフィルタリングし、フィルタリングされた結果をテーブルにレンダリングする。

layui.use('table', function(){
var table = layui.table;
table.on('tool(demo)', function(obj){
var data = obj.data; //获取当前行的数据
if (data) {
// 筛选条件
var filterData = $('.data').filter(function(){
return $(this).find('td').eq(2).text() === '男'; //筛选性别为男的数据
});
// 渲染筛选结果
$('#demo tbody').html(filterData);
table.render();
}
});
});

注意してください

1. Layuiのtableモジュールを読み込む必要がある場合は、layui.use(‘table’, function(){})を使用して使用できます。
2. テーブルの操作イベントをリッスンするには、table.on(‘tool(demo)’, function(obj){}) を使用します。必要に応じて、リッスンするイベントを選択できます。
3. class=”data”とタグ付けされた行をjQueryの$(‘.data’).filter(function(){})でフィルタリングし、特定の必要に応じてフィルタリング条件をカスタマイズします。
4. $(‘#demo tbody’).html(filterData) でフィルタリングした結果をテーブルに描画
5. フィルタの結果を反映させるには、table.render() を使用してテーブルを再レンダリングします。