首页 动态 > 科技 > 正文

🌟layui默认选中table的CheckBox复选框✨

导读 在使用layui框架时,有时我们需要让表格中的某些复选框默认处于选中状态,这在数据初始化或批量操作时非常实用。例如,当你加载一个表格页...

在使用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的行的复选框将自动被选中。这种方法不仅高效,还能灵活适应不同的需求。😎

掌握这项技能后,你可以轻松地优化你的项目界面,让交互更加流畅自然!🚀

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。