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


Posted in Javascript onSeptember 13, 2019

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表格数据复选框回显设置方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
Mar 18 Javascript
理解Javascript_09_Function与Object
Oct 16 Javascript
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
Jul 02 Javascript
深入理解JavaScript编程中的同步与异步机制
Jun 24 Javascript
jQuery实现带渐显效果的人物多级关系图代码
Oct 16 Javascript
JS实现页面载入时随机显示图片效果
Sep 07 Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
Jan 20 Javascript
vue中遇到的坑之变化检测问题(数组相关)
Oct 13 Javascript
vue router-link传参以及参数的使用实例
Nov 10 Javascript
微信小程序图表插件wx-charts用法实例详解
May 20 Javascript
微信小程序 冒泡事件原理解析
Sep 27 Javascript
angular *Ngif else用法详解
Dec 15 Javascript
对layui初始化列表的CheckBox属性详解
Sep 13 #Javascript
vue cli3 调用百度翻译API翻译页面的实现示例
Sep 13 #Javascript
使用VScode 插件debugger for chrome 调试react源码的方法
Sep 13 #Javascript
layui实现把数据表格时间戳转换为时间格式的例子
Sep 12 #Javascript
深入了解JavaScript 防抖和节流
Sep 12 #Javascript
layer.msg()去掉默认时间,实现手动关闭的方法
Sep 12 #Javascript
使用layer.msg 时间设置不起作用的解决方法
Sep 12 #Javascript
You might like
php 静态化实现代码
2009/03/20 PHP
判断PHP数组是否为空的代码
2011/09/08 PHP
php使用Swoole实现毫秒级定时任务的方法
2020/09/04 PHP
js压缩利器
2007/02/20 Javascript
用prototype实现的简单小巧的多级联动菜单
2007/03/24 Javascript
在jQuery 1.5中使用deferred对象的代码(翻译)
2011/03/10 Javascript
javascript 全选与全取消功能的实现代码
2012/12/23 Javascript
jQuery学习笔记之 Ajax操作篇(二) - 数据传递
2014/06/23 Javascript
jQuery实现流动虚线框的方法
2015/01/29 Javascript
js绘制圆形和矩形的方法
2015/08/05 Javascript
jQuery+css实现的蓝色水平二级导航菜单效果代码
2015/09/11 Javascript
jQuery复制表单元素附源码分享效果演示
2015/09/30 Javascript
jQuery实现区域打印功能代码详解
2016/06/17 Javascript
修改jquery中dialog的title属性方法(推荐)
2016/08/26 Javascript
jQuery使用方法
2017/02/04 Javascript
Angular2搜索和重置按钮过场动画
2017/05/24 Javascript
Vue Socket.io源码解读
2018/02/07 Javascript
ionic2中使用自动生成器的方法
2018/03/04 Javascript
json前后端数据交互相关代码
2018/09/19 Javascript
es6数值的扩展方法
2019/03/11 Javascript
JavaScript随机数的组合问题案例分析
2020/05/16 Javascript
js实现扫雷源代码
2020/11/27 Javascript
[01:01]青春无憾,一战成名——DOTA2全国高校联赛开启
2018/02/25 DOTA
Python使用Srapy框架爬虫模拟登陆并抓取知乎内容
2016/07/02 Python
Python3 requests文件下载 期间显示文件信息和下载进度代码实例
2019/08/16 Python
新手学python应该下哪个版本
2020/06/11 Python
TensorFlow Autodiff自动微分详解
2020/07/06 Python
[原创]赚疯了!转手立赚800+?大佬的python「抢茅台脚本」使用教程
2021/01/12 Python
Python使用paramiko连接远程服务器执行Shell命令的实现
2021/03/04 Python
Simons官方网站:加拿大时尚零售商
2020/02/20 全球购物
迪士尼法国在线商店:shopDisney FR
2020/12/03 全球购物
自考生自我鉴定范文
2013/10/01 职场文书
《这儿真好》教学反思
2014/02/22 职场文书
六年级学生评语大全
2014/12/26 职场文书
2015年十月一日放假通知
2015/08/18 职场文书
研究生学习计划书应该怎么写?
2019/09/10 职场文书