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表格数据复选框回显设置方法
当前链接:http://hxwzsj.com/article/jjiidc.html

其他资讯

Copyright © 2025 青羊区翔捷宏鑫字牌设计制作工作室(个体工商户) All Rights Reserved 蜀ICP备2025123194号-14
友情链接: 网站设计 成都定制网站建设 手机网站制作 成都响应式网站建设公司 企业网站设计 高端定制网站设计 网站建设 高端网站设计推广 成都网站建设公司 成都品牌网站建设 成都商城网站制作 成都网站制作 企业网站制作 四川成都网站设计 专业网站设计 品牌网站建设 古蔺网站建设 成都网站建设公司 企业网站建设 成都定制网站建设 营销网站建设 营销网站建设