Layui Table 复选框选中行数据获取方法

作者:阿沐时间:2026-10-23 11:04:08浏览:624

本文介绍如何在 Layui 表格中通过复选框获取选中行的数据。利用 table.checkStatus 方法,无需遍历表格即可直接获取全选或部分选中的行数据对象,适用于项目提交等场景。

Layui Table 复选框选中行数据获取方法

项目需求中,允许用户通过复选框勾选特定的项目进行提交,具体效果如下表所示。


<table class="layui-table" lay-data="{url:'******', id:'test3'}" lay-filter="test3">

  <thead>
  <tr>
    <th lay-data="{type:'checkbox'}">ID</th>
    <th lay-data="{field:'id', width:80}">ID</th>
    <th lay-data="{field:'t1'}">测试项</th>
    <th lay-data="{field:'t2', edit: 'text'}">标定参数</th>
    <th lay-data="{field:'t3'}">标定值</th>
  </tr>
  </thead>
</table>

Layui Table 复选框选中行数据获取方法

Layui Table 复选框选中行数据获取方法

我们可以在获取表中所有行数据的基础上,实现全选或部分选中的功能,无需通过遍历复选框的方式来获取数据。


table.on('checkbox(test3)', function(obj){
      var checkStatus = table.checkStatus('test3');
      console.log(checkStatus.data)//选中行数据
      console.log(checkStatus.data.length)
      
      })
      
$('.ttes').click(function () {
      var index = parent.layer.getFrameIndex(window.name);
      var checkStatus = table.checkStatus('test3');
      console.log(checkStatus.data)//选中行数据
      var items = checkStatus.data;

以上关于 Layui 表格复选框选中行数据获取的示例内容到此结束,希望能为读者提供参考,并欢迎大家继续支持本站。

作者最新文章