layui怎么获取表格选中的数据-开发者知识库平台

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

layui

750

2023/12/28 17:40:14

栏目: 编程语言

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

给表格的checkbox选择框添加一个lay-filter属性，用于标识该选择框的名称，例如lay-filter=“check”;
在JavaScript代码中，通过layui的form模块监听checkbox选择框的change事件；
在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方法获取表格选中的数据，并将其输出到控制台上。

辰迅云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>

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

最新知识库

相关标签