layui怎么獲取表格選中的數(shù)據(jù)

小億
703
2024-01-13 17:40:14

在layui中，可以通過監(jiān)聽表格的checkbox選擇框的change事件來(lái)獲取表格選中的數(shù)據(jù)。具體步驟如下：

  1. 給表格的checkbox選擇框添加一個(gè)lay-filter屬性，用于標(biāo)識(shí)該選擇框的名稱，例如lay-filter=“check”;
  2. 在JavaScript代碼中，通過layui的form模塊監(jiān)聽checkbox選擇框的change事件；
  3. 在change事件的回調(diào)函數(shù)中，可以通過layui的table模塊的checkStatus方法獲取表格選中的數(shù)據(jù)。

下面是一個(gè)示例代碼：

HTML代碼：

<table class="layui-table">
  <thead>
    <tr>
      <th><input type="checkbox" lay-filter="check" /></th>
      <th>姓名</th>
      <th>年齡</th>
      <th>性別</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" lay-filter="check" /></td>
      <td>張三</td>
      <td>20</td>
      <td>男</td>
    </tr>
    <tr>
      <td><input type="checkbox" lay-filter="check" /></td>
      <td>李四</td>
      <td>22</td>
      <td>女</td>
    </tr>
  </tbody>
</table>

JavaScript代碼：

layui.use(['form', 'table'], function() {
  var form = layui.form;
  var table = layui.table;

  // 監(jiān)聽checkbox選擇框的change事件
  form.on('checkbox(check)', function(data) {
    // 獲取表格選中的數(shù)據(jù)
    var checkStatus = table.checkStatus('tableId');  // tableId為表格的id
    var data = checkStatus.data;  // 獲取選中的數(shù)據(jù)
    console.log(data);
  });
});

在上述代碼中，當(dāng)選擇框的狀態(tài)發(fā)生改變時(shí)，會(huì)觸發(fā)change事件的回調(diào)函數(shù)。在回調(diào)函數(shù)中，通過table.checkStatus方法獲取表格選中的數(shù)據(jù)，并將其輸出到控制臺(tái)上。

0 踩