layui表格复选框回显实现:避免手动修改class导致的二次点击问题

作者:工具松鼠时间:2026-10-23 11:04:10浏览:662

本文介绍在layui 2.3版本中实现表格复选框回显的方法。通过数据回调遍历数据,利用点击方法而非手动修改class属性来选中复选框,从而避免手动添加layui-form-checked类引发的二次点击Bug。

layui表格复选框回显实现方案

在layui 2.3版本中,系统并未内置复选框的回显功能。为解决这一问题,需要通过F12开发者工具进行代码调试,定位到与复选框交互关联的代码逻辑。

layui表格复选框回显实现方案

解决思路是在数据渲染完成的回调函数中,遍历每条数据,并根据具体数据值来设置对应复选框的选中状态。

这里存在一个需要注意的细节:如果直接手动修改复选框的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表格数据复选框回显的具体设置方法,供参考使用。

作者最新文章