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 相关文章推荐
JavaScript Cookie的读取和写入函数
Dec 08 Javascript
jQuery语法总结和注意事项小结
Nov 11 Javascript
jQuery控制TR显示隐藏的几种方法
Jun 18 Javascript
使用javascript实现json数据以csv格式下载
Jan 09 Javascript
使用angular写一个hello world
Jan 23 Javascript
jquery中attr和prop的区别分析
Mar 16 Javascript
jQuery实现简单隔行变色的方法
Feb 20 Javascript
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法
Nov 27 Javascript
微信小程序实现打开内置地图功能【附源码下载】
Dec 07 Javascript
jQuery实现遍历XML节点和属性的方法示例
Apr 29 jQuery
Vue修改项目启动端口号方法
Nov 07 Javascript
解决vue组件销毁之后计时器继续执行的问题
Jul 21 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 5.3新特性命名空间规则解析及高级功能
2010/03/11 PHP
php 提速工具eAccelerator 配置参数详解
2010/05/16 PHP
PHP操作mysql函数详解,mysql和php交互函数
2011/05/19 PHP
php页面缓存ob系列函数介绍
2012/10/18 PHP
php简单创建zip压缩文件的方法
2016/04/30 PHP
thinkPHP5框架auth权限控制类与用法示例
2018/06/12 PHP
laravel返回统一格式错误码问题
2019/11/04 PHP
Javascript学习笔记2 函数
2010/01/11 Javascript
javascript中"/"运算符常见错误
2010/10/13 Javascript
自用js开发框架小成 学习js的朋友可以看看
2010/11/16 Javascript
javascript使用activex控件的代码
2011/01/27 Javascript
Jquery公告滚动+AJAX后台得到数据
2011/04/14 Javascript
关于setInterval、setTimeout在jQuery中的使用注意事项
2011/09/28 Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
2015/12/04 Javascript
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
2016/08/15 Javascript
Javascript中从学习bind到实现bind的过程
2018/01/05 Javascript
使用Vue.js和Element-UI做一个简单登录页面的实例
2018/02/23 Javascript
Vue登录注册并保持登录状态的方法
2018/08/17 Javascript
Vue 进阶之路(三)
2019/04/18 Javascript
layui下拉列表select实现可输入查找的方法
2019/09/28 Javascript
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
2019/12/21 Javascript
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
2020/02/14 Javascript
详解JavaScript之Array.reduce源码解读
2020/11/01 Javascript
vue 使用rules对表单字段进行校验的步骤
2020/12/25 Vue.js
Python实现绘制双柱状图并显示数值功能示例
2018/06/23 Python
python 循环读取txt文档 并转换成csv的方法
2018/10/26 Python
python爬虫线程池案例详解(梨视频短视频爬取)
2021/02/20 Python
纯CSS3制作漂亮带动画效果的主机价格表
2015/04/25 HTML / CSS
CSS3 input框的实现代码类似Google登录的动画效果
2020/08/04 HTML / CSS
荷兰皇家航空公司中国官网:KLM中国
2017/12/13 全球购物
职高毕业生自我鉴定
2013/10/21 职场文书
党课学习思想汇报
2014/01/02 职场文书
捐款倡议书范文
2014/02/02 职场文书
“四风”问题整改措施和努力方向
2014/09/20 职场文书
解决mysql:ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO/YES)
2021/06/26 MySQL
开机音效回归! Windows 11重新引入开机铃声
2021/11/21 数码科技