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 相关文章推荐
TopList标签和JavaScript结合两例
Aug 12 Javascript
js取滚动条的尺寸的函数代码
Nov 30 Javascript
解决jquery插件冲突的问题
Jan 23 Javascript
javascript获取当前的时间戳的方法汇总
Jul 26 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
Oct 16 Javascript
只需五句话搞定JavaScript作用域(经典)
Jul 26 Javascript
JavaScript编写一个简易购物车功能
Sep 17 Javascript
seajs模块之间依赖的加载以及模块的执行
Oct 21 Javascript
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 jQuery
mpvue+vuex搭建小程序详细教程(完整步骤)
Sep 30 Javascript
浅析Vue中拆分视图层代码的5点建议
Aug 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获取文件名后缀
2013/06/09 PHP
zend Framework中的Layout(模块化得布局)详解
2013/06/28 PHP
Laravel 5框架学习之Eloquent (laravel 的ORM)
2015/04/08 PHP
php使用PDO从数据库表中读取数据的实现方法(必看)
2017/06/02 PHP
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
JavaScript实现点击按钮就复制当前网址
2015/12/14 Javascript
jQuery 限制输入字符串长度
2016/06/20 Javascript
微信小程序 登录实例详解
2017/01/16 Javascript
jquery hover 不停闪动问题的解决方法(亦为stop()的使用)
2017/02/10 Javascript
React+react-dropzone+node.js实现图片上传的示例代码
2017/08/23 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
2017/09/11 Javascript
AngularJS中的路由使用及实现代码
2017/10/09 Javascript
JS代码实现电脑配置检测功能
2018/03/21 Javascript
JavaScript命名空间模式实例详解
2019/06/20 Javascript
基于ant design日期控件使用_仅月份的操作
2020/10/27 Javascript
python网络爬虫采集联想词示例
2014/02/11 Python
Python编程产生非均匀随机数的几种方法代码分享
2017/12/13 Python
tensorflow训练中出现nan问题的解决
2018/02/10 Python
在django中实现页面倒数几秒后自动跳转的例子
2019/08/16 Python
Jupyter Notebook安装及使用方法解析
2020/11/12 Python
python实现数学模型(插值、拟合和微分方程)
2020/11/13 Python
jupyter 添加不同内核的操作
2021/02/06 Python
京东港澳售:京东直邮港澳台
2018/01/31 全球购物
获取邓白氏信用报告:Dun & Bradstreet
2019/01/22 全球购物
Ever New美国:澳大利亚领先的女装时尚品牌
2019/11/28 全球购物
Shell编程面试题
2016/05/29 面试题
如何进行有效的自我评价
2013/09/27 职场文书
会计学财务管理专业个人的自我评价
2013/10/19 职场文书
网上卖盒饭创业计划书范文
2014/02/07 职场文书
食品安全责任书
2014/04/15 职场文书
群众路线查摆问题及整改措施
2014/10/10 职场文书
年终工作总结范文2014
2014/11/27 职场文书
论文答谢词
2015/01/20 职场文书
商务宴会祝酒词
2015/08/11 职场文书
原生Js 实现的简单无缝滚动轮播图的示例代码
2021/05/10 Javascript
spring注解 @PropertySource配置数据源全流程
2022/03/25 Java/Android