layui表格数据复选框回显设置方法

layui2.3版本，本身并不带有复选框回显功能，那么需要从源头解决此事，F12代码调试，找到与复选框关联的地方发现：

创新互联公司专业为企业提供祁连网站建设、祁连做网站、祁连网站设计、祁连网站制作等企业网站建设、网页设计与制作、祁连企业网站模板建站服务，十余年祁连做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

layui表格数据复选框回显设置方法

我们只需要在渲染数据回调时找到每个复选框根据数据的不同来设置回显。

layui这里有一个坑，设置class属性后会造成二次点击效果，千万不要手动修改class属性，那么应该怎么办呢？

每次**点击**其中一个复选框时都会增加一个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表格数据复选框回显设置方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持创新互联。

本文标题：layui表格数据复选框回显设置方法
文章转载：https://www.cdcxhl.com/article12/jjiidc.html

成都网站建设公司_创新互联，为您提供电子商务、做网站、动态网站、搜索引擎优化、手机网站建设、网站制作

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容