layui表格监听全选_layui学习笔记——监听表格复选框选择

在 layui 表格中，可以通过监听复选框的选择来实现批量操作等功能。具体实现步骤如下：

1. 在表格中添加复选框列，并设置lay-skin属性为primary，表示使用layui风格的复选框。

<table class="layui-table" lay-data="{...}">
  <colgroup>
    ...
    <col width="50">
  </colgroup>
  <thead>
    ...
    <th lay-data="{field:'checkbox', width:50, templet:'#checkboxTpl'}"></th>
  </thead>
  <tbody>
    ...
  </tbody>
</table>

<script type="text/html" id="checkboxTpl">
  <input type="checkbox" lay-skin="primary">
</script>

2. 在JavaScript代码中监听复选框的选择事件，可以使用layui的form模块来实现。需要注意的是，由于表格是动态生成的，所以需要使用layui的form.render()方法重新渲染表单元素。

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

  // 监听复选框选择
  table.on('checkbox(test)', function(obj){
    console.log(obj.checked); // 当前是否选中状态
    console.log(obj.data); // 原始数据
    console.log(obj.type); // 类型，如果行选则为：row，如果全选则为：all，如果取消选择则为：uncheck
    console.log(table.checkStatus('test').data); // 获取选中行的数据
  });

  // 重新渲染表单元素
  form.render();
});

3. 表格中如果存在分页，则需要在分页时重新渲染表单元素。

table.on('page(test)', function(){
  form.render();
});

以上就是监听表格复选框选择的实现方法。需要注意的是，表格中的复选框列必须有唯一的字段名，否则无法在JavaScript代码中获取选中行的数据。