上面这段代码如何实现全选功能
时间: 2023-10-02 17:14:04 浏览: 165
要实现全选功能,你需要借助 layui 的 form 模块和 jQuery。以下是修改后的示例代码:
```javascript
// 渲染表格
var tableIns = 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 }
]],
done: function(res, curr, count) {
// 渲染完表格后的回调函数
// 获取表格容器内的 checkbox 元素
var checkStatus = table.checkStatus('demo'); // demo 为表格容器的 ID
var checkbox = $('.layui-table-fixed-l').find('.layui-form-checkbox');
// 全选按钮的事件监听
$('#checkAll').on('click', function() {
var isChecked = $(this).prop('checked');
checkbox.each(function() {
$(this).attr('class', 'layui-form-checkbox ' + (isChecked ? 'layui-form-checked' : ''));
$(this).find('input[type="checkbox"]').prop('checked', isChecked);
});
form.render('checkbox');
});
// 表格容器内 checkbox 的事件监听
checkbox.on('click', function() {
var isCheckedAll = checkbox.length === checkbox.filter('.layui-form-checked').length;
$('#checkAll').prop('checked', isCheckedAll);
});
}
});
```
在上述代码中,我们通过 `table.checkStatus` 方法获取表格容器内的 checkbox 元素,并通过 jQuery 绑定全选按钮和表格容器内 checkbox 的事件监听。当全选按钮的状态改变时,会将所有的 checkbox 状态同步;当表格容器内 checkbox 的状态改变时,会判断是否需要将全选按钮的状态改变。
请确保在 HTML 中定义了一个 id 为 "checkAll" 的全选按钮,并且引入了 layui 的 form 模块和 jQuery。
希望可以帮到你!如果还有其他问题,请随时提问。
阅读全文