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 无提示关闭窗口脚本
Aug 17 Javascript
xss文件页面内容读取(解决)
Nov 28 Javascript
理解JSON:3分钟课程
Oct 28 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
Jan 02 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
Mar 04 Javascript
jQuery实现新消息在网页标题闪烁提示
Jun 23 Javascript
JavaScript Math 对象常用方法总结
Apr 28 Javascript
移动端 一个简单易懂的弹出框
Jul 06 Javascript
jQuery实现鼠标跟随效果
Feb 20 Javascript
vue模仿网易云音乐的单页面应用
Apr 24 Javascript
javascript导出csv文件(excel)的方法示例
Aug 25 Javascript
ant-design-vue按需加载的坑的解决
May 14 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
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
PHP设计模式之模板方法模式定义与用法详解
2018/04/02 PHP
javascript 冒号 使用说明
2009/06/06 Javascript
JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
2010/11/09 Javascript
表格奇偶行设置不同颜色的核心JS代码
2013/12/24 Javascript
浅谈javascript的分号的使用
2015/05/12 Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
2015/11/17 Javascript
详解maxlength属性在textarea里奇怪的表现
2015/12/27 Javascript
全面理解闭包机制
2016/07/11 Javascript
JS制作图形验证码实现代码
2020/10/19 Javascript
jQuery根据ID、CLASS、等获取对象的实例
2016/12/04 Javascript
vue.js如何更改默认端口号8080为指定端口的方法
2017/07/14 Javascript
关于Vue的路由权限管理的示例代码
2018/03/06 Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
2018/06/01 Javascript
vue使用ElementUI时导航栏默认展开功能的实现
2018/07/04 Javascript
vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单
2018/11/29 Javascript
小程序跨页面交互的作用与方法详解
2020/01/07 Javascript
在vue中实现echarts随窗体变化
2020/07/27 Javascript
vue项目中播放rtmp视频文件流的方法
2020/09/17 Javascript
[02:46]完美世界DOTA2联赛PWL DAY4集锦
2020/11/03 DOTA
python实现2048小游戏
2015/03/30 Python
python实现人人自动回复、抢沙发功能
2018/06/08 Python
我们为什么要减少Python中循环的使用
2019/07/10 Python
Django项目基础配置和基本使用过程解析
2019/11/25 Python
python列表推导式操作解析
2019/11/26 Python
微软俄罗斯官方网站:Microsoft俄罗斯
2016/09/18 全球购物
德国购买踏板车网站:Microscooter
2019/10/14 全球购物
阿玛尼美妆俄罗斯官网:Giorgio Armani Beauty RU
2020/07/19 全球购物
养成教育经验材料
2014/05/26 职场文书
酒店节能减排方案
2014/05/26 职场文书
职工年度考核评语
2014/12/31 职场文书
公司回复函格式
2015/07/14 职场文书
演讲稿之感恩老师(三篇范文)
2019/09/06 职场文书
Mysql 如何批量插入数据
2021/04/06 MySQL
详解Flask开发技巧之异常处理
2021/06/15 Python
帮你提高开发效率的JavaScript20个技巧
2021/06/18 Javascript