在使用layui框架时,有时我们需要让表格中的某些复选框默认处于选中状态,这在数据初始化或批量操作时非常实用。例如,当你加载一个表格页面时,默认勾选某些行,可以大大提升用户体验。那么,如何实现这一功能呢?💡
首先,确保你的layui表格配置正确,并且数据已成功加载到表格中。然后,在`done`回调函数中处理默认选中逻辑。比如,假设你希望ID为1和3的行默认被选中,可以通过以下代码实现:
```javascript
table.render({
elem: 'yourTableId',
url: '/your/data/url',
cols: [[
{type: 'checkbox', fixed: 'left'},
{field: 'id', title: 'ID', width: 80},
{field: 'name', title: 'Name', width: 120}
]],
done: function(res, curr, count){
// 默认选中ID为1和3的行
var checkStatus = table.checkStatus('yourTableId');
checkStatus.data.forEach(function(item){
if(item.id === 1 || item.id === 3){
$(`yourTableId input[value="${item.id}"]`).prop('checked', true);
}
});
}
});
```
这样设置后,当表格加载完成后,ID为1和3的行的复选框将自动被选中。这种方法不仅高效,还能灵活适应不同的需求。😎
掌握这项技能后,你可以轻松地优化你的项目界面,让交互更加流畅自然!🚀