layui 动态数据table 如何在表头增加 checkbox 全选
时间: 2024-04-14 13:29:15 浏览: 239
layui的table单击行勾选checkbox功能方法
5星 · 资源好评率100%
在 layui 的动态数据表格中,你可以通过自定义表头模板来实现在表头增加 checkbox 全选功能。下面是一个示例代码:
```javascript
// 渲染表格
table.render({
elem: '#demo', // 表格容器的 ID
url: '/getdata', // 数据接口
page: true, // 开启分页
cols: [[
// 自定义表头模板
{ type: 'checkbox', fixed: 'left' }, // 添加全选的 checkbox 列
{ field: 'id', title: 'ID', width: 80 },
{ field: 'username', title: '用户名', width: 120 },
{ field: 'email', title: '邮箱', minWidth: 200 },
{ field: 'sex', title: '性别', width: 80 },
{ field: 'city', title: '城市', width: 100 },
{ field: 'sign', title: '签名', minWidth: 200 },
{ field: 'experience', title: '经验值', width: 100 },
{ field: 'score', title: '分数', width: 100 },
{ fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150 }
]]
});
```
在上述代码中,我们使用了 `type: 'checkbox'` 来添加一个 checkbox 列,并且通过 `fixed: 'left'` 来将该列固定在左侧。这样就实现了在表头增加 checkbox 全选的功能。
请注意,上述示例中的数据接口和列定义需要根据你的实际情况进行修改。同时,你还需要在 HTML 中定义一个表格容器和一个操作模板,以及引入 layui 的相关资源文件。
希望对你有帮助!如果还有其他问题,请随时提问。
阅读全文