7万好友、984个群聊一键全选群发，这么便捷你不试试？

### Layui 表格筛选功能实现一键全选 在Layui框架中，表格组件提供了丰富的交互功能，其中包括复选框的选择操作。为了实现在表格筛选条件下的全选按钮功能，可以通过监听`lay-filter`事件并结合JavaScript逻辑来完成。 #### HTML结构定义 首先，在页面上创建带有复选框的表格，并设置好相应的过滤器名称以便后续JS代码调用： ```html <table id="demo" lay-filter="test"></table> ``` #### JavaScript初始化配置 接着通过`layui.table.render()`方法渲染表格的同时指定工具栏选项，其中包含了自定义的一键全选按钮： ```javascript layui.use(['table'], function(){ var table = layui.table; // 渲染表格 table.render({ elem: '#demo' ,url:'/your/server/api' // 数据接口地址 ,cols: [[ {type:'checkbox', fixed: 'left'} ,{field:'id', title:'ID', width:80, sort:true} ,// ...更多列定义... ]] ,toolbar: '#toolbarDemo' // 工具条模板选择器 ,page: true // 开启分页 }); }); ``` #### 自定义工具条中的全选按钮 在HTML文档内编写一段用于放置于顶部作为批量操作区域的内容，这里加入了一个名为“全选”的按钮： ```html <script type="text/html" id="toolbarDemo"> <div class="layui-btn-container"> <button class="layui-btn layui-btn-sm" lay-event="allSelect">全选</button> </div> </script> ``` #### 绑定点击事件处理函数 最后一步也是最关键的一步就是给这个新添加的全选按钮绑定响应动作，当用户触发该按钮时能够遍历当前显示的数据行并将它们全部勾选起来： ```javascript table.on('tool(test)', function(obj){ var data = obj.data; // 获取当前行数据对象 if (obj.event === 'allSelect') { var checkStatus = table.checkStatus('demo'); // 获得选中状态的对象 var rows = checkStatus.data; $.each(rows,function(index,item){ item.LAY_CHECKED=true; // 设置每一项为已选中 }); table.reload('demo',{where:{}, page:{curr:1}}); // 刷新表格视图以反映最新的选中情况 } }); ``` 以上即是在Layui表格插件里集成一键全选特性的基本流程[^1]。