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 相关文章推荐
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
Jan 11 Javascript
js自定义事件及事件交互原理概述(一)
Feb 01 Javascript
Bootstrap每天必学之表单
Nov 23 Javascript
基于javascript实现根据身份证号码识别性别和年龄
Jan 22 Javascript
前端开发之CSS原理详解
Mar 11 Javascript
vue实现选项卡及选项卡切换效果
Apr 24 Javascript
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
May 07 Javascript
Vue父组件如何获取子组件中的变量
Jul 24 Javascript
基于JS判断对象是否是数组
Jan 10 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
May 06 Javascript
Vue 监听元素前后变化值实例
Jul 29 Javascript
js实现盒子拖拽动画效果
Aug 09 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中使用Oracle数据库(4)
2006/10/09 PHP
如何将数据从文本导入到mysql
2006/10/09 PHP
JavaScript confirm选择判断
2008/10/18 Javascript
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
2010/06/28 Javascript
JS实现遮罩层效果的简单实例
2013/11/12 Javascript
JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
2015/11/26 Javascript
浅析jquery unbind()方法移除元素绑定的事件
2016/05/24 Javascript
浅谈JavaScript for循环 闭包
2016/06/22 Javascript
js中使用使用原型(prototype)定义方法的好处详解
2016/07/04 Javascript
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
2017/04/19 Javascript
JavaScript 隐性类型转换步骤浅析
2018/03/15 Javascript
Angular6 发送手机验证码按钮倒计时效果实现方法
2019/01/08 Javascript
Vue使用v-viewer实现图片预览
2020/10/21 Javascript
如何在Express4.x中愉快地使用async的方法
2020/11/18 Javascript
windows及linux环境下永久修改pip镜像源的方法
2016/11/28 Python
Python字典中的键映射多个值的方法(列表或者集合)
2018/10/17 Python
pow在python中的含义及用法
2019/07/11 Python
Python简易版停车管理系统
2019/08/12 Python
matplotlib.pyplot画图并导出保存的实例
2019/12/07 Python
Python 批量读取文件中指定字符的实现
2020/03/06 Python
Matplotlib 折线图plot()所有用法详解
2020/07/28 Python
python urllib和urllib3知识点总结
2021/02/08 Python
CSS3区域模块region相关编写示例
2015/08/28 HTML / CSS
澳大利亚儿童鞋在线:The Trybe
2019/07/16 全球购物
Antler英国官网:购买安特丽行李箱、拉杆箱
2019/08/25 全球购物
葡萄牙航空官方网站:TAP Air Portugal
2019/10/31 全球购物
linux面试题参考答案(1)
2016/01/22 面试题
酒店办公室文员岗位职责
2013/12/18 职场文书
导游实习生自荐书
2014/01/28 职场文书
合作协议书怎么写
2014/04/18 职场文书
摄影专业毕业生求职信
2014/08/05 职场文书
2015年维修工作总结
2015/04/25 职场文书
2016社区平安家庭事迹材料
2016/02/26 职场文书
创业计划书之溜冰场
2019/10/25 职场文书
详解redis分布式锁的这些坑
2021/05/19 Redis
vue-element-admin项目导入和导出的实现
2021/05/21 Vue.js