温馨提示×

layui怎么获取表格选中的数据

小亿
720
2024-01-13 17:40:14
栏目: 编程语言

在layui中,可以通过监听表格的checkbox选择框的change事件来获取表格选中的数据。具体步骤如下:

  1. 给表格的checkbox选择框添加一个lay-filter属性,用于标识该选择框的名称,例如lay-filter=“check”;
  2. 在JavaScript代码中,通过layui的form模块监听checkbox选择框的change事件;
  3. 在change事件的回调函数中,可以通过layui的table模块的checkStatus方法获取表格选中的数据。

下面是一个示例代码:

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;

  // 监听checkbox选择框的change事件
  form.on('checkbox(check)', function(data) {
    // 获取表格选中的数据
    var checkStatus = table.checkStatus('tableId');  // tableId为表格的id
    var data = checkStatus.data;  // 获取选中的数据
    console.log(data);
  });
});

在上述代码中,当选择框的状态发生改变时,会触发change事件的回调函数。在回调函数中,通过table.checkStatus方法获取表格选中的数据,并将其输出到控制台上。

0