layui table刷新checkbox选择框渲染
时间: 2024-10-20 15:10:20 浏览: 36
layui默认选中table的CheckBox复选框方法
layui表格(table)中的checkbox选择框默认渲染是在初次加载数据时完成的。如果你需要在某些操作后刷新表格并保持之前的选中状态,可以使用layui提供的API来实现动态更新。
首先,你需要在初始化表格时,设置`check`属性来启用复选框,并提供`radio`选项表示单选模式:
```html
<table lay-filter="yourTable" lay-data="yourData">
<thead>
<tr>
<th lay-check="title"></th> <!-- checkbox列 -->
<!-- 其他列... -->
</tr>
</thead>
</table>
<script>
layui.use('laytable', function() {
var laytable = layui.laytable;
// 初始化表格并开启checkbox
laytable.render({
elem: '#yourTable',
data: yourData,
check: {
radio: 'single' // 如果你想启用单选模式
},
// 其他配置...
});
});
</script>
```
当你需要刷新表格并且保留选中项时,可以先获取当前选中的行数据,然后通过`reload()`方法传入这个数据作为参数,同时指定`check`选项的`sync`参数为true,以便同步之前的选择状态:
```javascript
// 获取当前选中的行数据
var selectedRows = laytable.getChecked();
// 刷新表格
laytable.reload('yourTable', {
data: refreshedData, // 新的数据源
check: { sync: true } // 同步之前的选中状态
}, 'page') // 如果你希望基于当前页进行刷新,可以添加'table'或'page'
```
阅读全文