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的动态删除Table表格的行和列的代码
May 12 Javascript
js+css实现的简单易用兼容好的分页
Dec 30 Javascript
jQuery使用removeClass方法删除元素指定Class的方法
Mar 26 Javascript
jquery实现超简洁的TAB选项卡效果代码
Aug 28 Javascript
用JS动态改变表单form里的action值属性的两种方法
May 25 Javascript
jQuery轮播图效果精简版完整示例
Sep 04 Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
Aug 14 Javascript
vue.js删除列表中的一行
Jun 30 Javascript
layui 实现table翻页滚动条位置保持不变的例子
Sep 05 Javascript
js get和post请求实现代码解析
Feb 06 Javascript
Vue+Openlayers自定义轨迹动画
Sep 24 Javascript
微信小程序自定义modal弹窗组件的方法详解
Dec 20 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易混淆知识整理笔记
2015/09/24 PHP
PHP的Laravel框架中使用AdminLTE模板来编写网站后台界面
2016/03/21 PHP
CI框架实现优化文件上传及多文件上传的方法
2017/01/04 PHP
php对xml文件的增删改查操作实现方法分析
2017/05/19 PHP
基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)
2010/07/26 Javascript
Jquery中Ajax 缓存带来的影响的解决方法
2011/05/19 Javascript
前端开发过程中浏览器版本的两种判定方法
2013/10/30 Javascript
jQuery之Deferred对象详解
2014/09/04 Javascript
js入门之Function函数的使用方法【新手必看】
2016/11/22 Javascript
Bootstrap php制作动态分页标签
2016/12/23 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
2017/01/23 Javascript
jQuery实现鼠标跟随效果
2017/02/20 Javascript
纯jQuery实现前端分页功能
2017/03/23 jQuery
js控制文本框禁止输入特殊字符详解
2017/04/07 Javascript
JS实现简单抖动效果
2017/06/01 Javascript
AngularJS的$location使用方法详解
2017/10/19 Javascript
Angular 容器部署的方法
2018/04/17 Javascript
在小程序中使用Echart图表的示例代码
2018/08/02 Javascript
利用angular自动编译andriod APK的绕坑经历分享
2019/03/08 Javascript
深入了解JavaScript 私有化
2019/05/30 Javascript
40行代码把Vue3的响应式集成进React做状态管理
2020/05/20 Javascript
vue实现日历表格(element-ui)
2020/09/24 Javascript
python实现TCP服务器端与客户端的方法详解
2015/04/30 Python
Python 正则表达式的高级用法
2016/12/04 Python
Pycharm导入Python包,模块的图文教程
2018/06/13 Python
浅谈Python3中strip()、lstrip()、rstrip()用法详解
2019/04/29 Python
使用sklearn的cross_val_score进行交叉验证实例
2020/02/28 Python
Django 多对多字段的更新和插入数据实例
2020/03/31 Python
python 递归相关知识总结
2021/03/03 Python
Jones Bootmaker官网:优质靴子和鞋子在线
2020/11/30 全球购物
科颜氏香港官方网店:Kiehl’s香港
2021/03/07 全球购物
小学学校评估方案
2014/06/08 职场文书
授权委托书样本及填写说明
2014/09/19 职场文书
党员个人剖析材料(四风问题)
2014/10/07 职场文书
巾帼文明岗事迹材料
2014/12/24 职场文书
安全先进个人材料
2014/12/29 职场文书