本文介绍在layui 2.3版本中实现表格复选框回显的方法。通过数据回调遍历数据,利用点击方法而非手动修改class属性来选中复选框,从而避免手动添加layui-form-checked类引发的二次点击Bug。
layui表格复选框回显实现方案
在layui 2.3版本中,系统并未内置复选框的回显功能。为解决这一问题,需要通过F12开发者工具进行代码调试,定位到与复选框交互关联的代码逻辑。

解决思路是在数据渲染完成的回调函数中,遍历每条数据,并根据具体数据值来设置对应复选框的选中状态。
这里存在一个需要注意的细节:如果直接手动修改复选框的class属性,会导致点击行为异常,即产生二次点击效果。因此,应避免直接操作class属性。
当用户点击复选框时,系统会自动为其添加一个class属性;再次点击时,该属性会被移除。这种自动机制是layui处理选中状态的方式。
避免手动修改class导致的二次点击问题
table.render({
elem: '#LAY_table_topic',
url: '/admin/topicHandle/getTopicList',
height: 600,
done:function(result,currPage,count){//数据回调方法
var data = result.data;
data.forEach(function(value, key) {
//这里必须选择点击方法,不知为何添加layui-form-checked class属性会造成二次点击(即下次点击必须点击两下才能生效)bug,
//所有类似的手动修改class貌似都会造成二次效果
if(value.read_total > 10){
$("div[lay-id='topicList'] td .layui-form-checkbox").eq(key).click();
}
})
},
cols: [[
{ type:'checkbox'},
{ field:'id', title: '话题ID', width: 80 },
{ field:'image_url', title: '图片', width: 100 , templet:"#showPic"},
{ field:'content', title: '话题内容', width: 260 },
{ field:'read_total', title: '阅读次数', width: 100 , sort:true},
]],
id: 'topicList',
page: true
});
以上即为layui表格数据复选框回显的具体设置方法,供参考使用。