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 克隆数组最简单的方法
Feb 12 Javascript
JSQL 批量图片切换的实现代码
May 05 Javascript
重写javascript中window.confirm的行为
Oct 21 Javascript
js调用css属性写法
Sep 21 Javascript
javascript从定义到执行 你不知道的那些事
Jan 04 Javascript
vue.js入门教程之基础语法小结
Sep 01 Javascript
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
Nov 07 Javascript
浅谈vue项目重构技术要点和总结
Jan 23 Javascript
AngularJS ui-router刷新子页面路由的方法
Jul 23 Javascript
Vue.js 中的 v-cloak 指令及使用详解
Nov 19 Javascript
echarts实现晶体球面投影的实例教程
Oct 10 Javascript
ant design vue 表格table 默认勾选几项的操作
Oct 31 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 分页类
2006/10/09 PHP
php zip文件解压类代码
2009/12/02 PHP
CI框架学习笔记(二) -入口文件index.php
2014/10/27 PHP
java微信开发之上传下载多媒体文件
2016/06/24 PHP
PHP类和对象相关系统函数与运算符小结
2016/09/28 PHP
asp函数split()对应php函数explode()
2019/02/27 PHP
[Web]防止用户复制页面内容和另存页面的方法
2009/02/06 Javascript
IE8下关于querySelectorAll()的问题
2010/05/13 Javascript
jQuery实现长文字部分显示代码
2013/05/13 Javascript
javascript中clone对象详解
2014/12/03 Javascript
jQuery中:first选择器用法实例
2014/12/30 Javascript
使用npm发布Node.JS程序包教程
2015/03/02 Javascript
jQuery实现渐变下拉菜单的简单方法
2015/03/11 Javascript
jQuery实现Select左右复制移动内容
2016/08/05 Javascript
jQuery操作之效果详解
2017/05/19 jQuery
详解nodejs实现本地上传图片并预览功能(express4.0+)
2017/06/28 NodeJs
jQuery - AJAX load() 实例用法详解
2019/08/27 jQuery
老生常谈python函数参数的区别(必看篇)
2017/05/29 Python
Python实现按当前日期(年、月、日)创建多级目录的方法
2018/04/26 Python
python中的文件打开与关闭操作命令介绍
2018/04/26 Python
python进行OpenCV实战之画图(直线、矩形、圆形)
2020/08/27 Python
使用django自带的user做外键的方法
2020/11/30 Python
css3实现小箭头各种图形效果
2020/07/08 HTML / CSS
戴森美国官网:Dyson美国
2016/09/11 全球购物
英国品牌男装折扣网站:Brown Bag
2018/03/08 全球购物
新西兰Bookabach:查找全球度假屋
2020/12/03 全球购物
英国领先的在线鱼贩:The Fish Society
2020/08/12 全球购物
捷科时代的软件测试笔试题
2015/11/09 面试题
利用promise及参数解构封装ajax请求的方法
2021/03/24 Javascript
岗位职责的构建方法
2014/02/01 职场文书
中青班党性分析材料
2014/02/16 职场文书
企业法人代表授权委托书
2014/10/02 职场文书
党员批评与自我批评材料
2014/10/14 职场文书
2014年学前班工作总结
2014/12/08 职场文书
《植物妈妈有办法》教学反思
2016/02/23 职场文书
Python pandas之求和运算和非空值个数统计
2021/08/07 Python