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获取当前屏幕的高度宽度的实现代码
Jul 12 Javascript
Javascript数组的排序 sort()方法和reverse()方法
Jun 04 Javascript
javascript 二进制运算技巧解析
Nov 27 Javascript
jquery+css3实现网页背景花瓣随机飘落特效
Aug 17 Javascript
Prototype框架详解
Nov 25 Javascript
不得不分享的JavaScript常用方法函数集(下)
Dec 25 Javascript
简介AngularJS中$http服务的用法
Feb 06 Javascript
深入浅析Vue不同场景下组件间的数据交流
Aug 15 Javascript
vue中设置、获取、删除cookie的方法
Sep 21 Javascript
validform表单验证的实现方法
Mar 08 Javascript
Flutter 超实用简单菜单弹出框 PopupMenuButton功能
Aug 06 Javascript
vue+element搭建后台小总结 el-dropdown下拉功能
Apr 10 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
正义联盟的终局之战《天启星战争》将成为DC动画宇宙的最后一部
2020/04/09 欧美动漫
JAVA/JSP学习系列之二
2006/10/09 PHP
比较全面的PHP数组的使用方法小结
2010/09/23 PHP
php读取文件内容的方法汇总
2015/01/24 PHP
Thinkphp调用Image类生成缩略图的方法
2015/03/07 PHP
关于PHP内置的字符串处理函数详解
2017/02/04 PHP
兼容FireFox 的 js 日历 支持时间的获取
2009/03/04 Javascript
JavaScript window.setTimeout() 的详细用法
2009/11/04 Javascript
TextArea 控件的最大长度问题(js json)
2009/12/16 Javascript
简单的前端js+ajax 购物车框架(入门篇)
2011/10/29 Javascript
js弹出层永远居中实现思路及代码
2013/11/29 Javascript
javascript函数重载解决方案分享
2014/02/19 Javascript
AngularJS的一些基本样式初窥
2015/07/27 Javascript
jQuery+ajax+asp.net获取Json值的方法
2016/06/08 Javascript
js实现常用排序算法
2016/08/09 Javascript
JavaScript实现AOP详解(面向切面编程,装饰者模式)
2017/12/19 Javascript
详解Vue单元测试case写法
2018/05/24 Javascript
浅谈如何使用webpack构建多页面应用
2018/05/30 Javascript
vue 设置 input 为不可以编辑的实现方法
2019/09/19 Javascript
[03:12]TI9战队档案 - Virtus Pro
2019/08/20 DOTA
linux系统使用python监测系统负载脚本分享
2014/01/15 Python
详解用TensorFlow实现逻辑回归算法
2018/05/02 Python
pygame实现雷电游戏雏形开发
2018/11/20 Python
Python 获取中文字拼音首个字母的方法
2018/11/28 Python
python 自动轨迹绘制的实例代码
2019/07/05 Python
python3 深浅copy对比详解
2019/08/12 Python
利用python在大量数据文件下删除某一行的例子
2019/08/21 Python
Python基于WordCloud制作词云图
2019/11/29 Python
解决Python数据可视化中文部分显示方块问题
2020/05/16 Python
加热夹克:RAVEAN
2018/10/19 全球购物
经典c++面试题五
2014/12/17 面试题
C#中有没有静态构造函数,如果有是做什么用的?
2016/06/04 面试题
Java的类可以定义为Protected或者Private得吗
2015/09/25 面试题
大学生求职信
2014/06/17 职场文书
活动费用申请报告
2015/05/15 职场文书
乡镇团代会开幕词
2016/03/04 职场文书