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中的parseInt和parseFloat区别
Jul 12 Javascript
javascript模拟枚举的简单实例
Mar 06 Javascript
jQuery多级弹出菜单插件ZoneMenu
Dec 18 Javascript
AngularJS基础 ng-focus 指令简单示例
Aug 01 Javascript
Input文本框随着输入内容多少自动延伸的实现
Feb 15 Javascript
浅谈Angular路由守卫
Aug 26 Javascript
详解ES6之async+await 同步/异步方案
Sep 19 Javascript
Javascript防止图片拉伸的自适应处理方法
Dec 26 Javascript
vue2.5.2使用http请求获取静态json数据的实例代码
Feb 27 Javascript
详解angular2如何手动点击特定元素上的点击事件
Oct 16 Javascript
微信小程序canvas开发水果老虎机的思路详解
Feb 07 Javascript
Vue 使用typescript如何优雅的调用swagger API
Sep 01 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
基于mysql的论坛(6)
2006/10/09 PHP
PHP 判断变量类型实现代码
2009/10/23 PHP
php字符串操作针对负值的判断分析
2016/07/28 PHP
PHP数组遍历的几种常见方式总结
2019/02/15 PHP
PHP抽象类和接口用法实例详解
2019/07/20 PHP
关于Javascript 的 prototype问题。
2007/01/03 Javascript
Jquery颜色选择器ColorPicker实现代码
2012/11/14 Javascript
基于jquery的文章中所有图片width大小批量设置方法
2013/08/01 Javascript
jquery 延迟执行实例介绍
2013/08/20 Javascript
js 鼠标移动显示图片的简单实例
2013/12/25 Javascript
关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器
2014/02/11 Javascript
JQuery控制radio选中和不选中方法总结
2015/04/15 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
2015/09/09 Javascript
原生javascript实现自动更新的时间日期
2016/02/12 Javascript
jQuery的promise与deferred对象在异步回调中的作用
2016/05/03 Javascript
Node.js读取文件内容示例
2017/03/07 Javascript
详解node+express+ejs+bootstrap构建项目
2017/09/27 Javascript
ES6之模版字符串的具体使用
2018/05/17 Javascript
每天学点Vue源码之vm.$mount挂载函数
2019/03/11 Javascript
Vue事件修饰符native、self示例详解
2019/07/09 Javascript
Python网络爬虫实例讲解
2016/04/28 Python
Python实现变量数值交换及判断数组是否含有某个元素的方法
2017/09/18 Python
使用python编写简单的小程序编译成exe跑在win10上
2018/01/15 Python
Django基础知识与基本应用入门教程
2018/07/20 Python
python实现电子书翻页小程序
2019/07/23 Python
pytorch判断是否cuda 判断变量类型方式
2020/06/23 Python
Web Service面试题:如何搭建Axis2的开发环境
2012/06/20 面试题
竞选班委演讲稿
2014/04/28 职场文书
答谢会策划方案
2014/05/12 职场文书
学习考察心得体会
2014/09/04 职场文书
预备党员期盼十八届四中全会召开思想汇报
2014/10/17 职场文书
迟到检讨书
2015/01/26 职场文书
2016大一新生军训感言
2015/12/08 职场文书
position:sticky 粘性定位的几种巧妙应用详解
2021/04/24 HTML / CSS
Windows11插耳机没反应怎么办? win11耳机没声音的多种解决办法
2021/11/21 数码科技
javascript之Object.assign()的痛点分析
2022/03/03 Javascript