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 相关文章推荐
stream.js 一个很小、完全独立的Javascript类库
Oct 28 Javascript
关于火狐(firefox)及ie下event获取的两种方法
Dec 27 Javascript
jquery网页元素拖拽插件效果及实现
Aug 05 Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
Sep 23 Javascript
半个小时学json(json传递示例)
Dec 25 Javascript
Vue 2.0 服务端渲染入门介绍
Mar 29 Javascript
JavaScript数据结构中串的表示与应用实例
Apr 12 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
Dec 09 Javascript
vue操作动画的记录animate.css实例代码
Apr 26 Javascript
微信小程序wepy框架学习和使用心得详解
May 24 Javascript
vue实现简易的双向数据绑定
Dec 29 Vue.js
微信小程序onShareTimeline()实现分享朋友圈
Jan 07 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惯例配置文件详解
2014/07/14 PHP
PHP_SELF,SCRIPT_NAME,REQUEST_URI区别
2014/12/24 PHP
php截取中文字符串函数实例
2015/02/23 PHP
js event事件的传递与冒泡处理
2009/12/06 Javascript
HTML页面滚动时获取离页面顶部的距离2种实现方法
2013/09/05 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
2015/03/20 Javascript
jQuery关键词说明插件cluetip使用指南
2015/04/21 Javascript
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
2016/08/06 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
2017/07/31 Javascript
JavaScript DOM元素常见操作详解【添加、删除、修改等】
2018/05/09 Javascript
可能被忽略的一些JavaScript数组方法细节
2019/02/28 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
2019/08/17 Javascript
Layui表格行工具事件与数据回填方法
2019/09/13 Javascript
jquery实现简单拖拽效果
2020/07/20 jQuery
JavaScript数组常用的增删改查与其他属性详解
2020/10/13 Javascript
微信小程序用户登录和登录态维护的实现
2020/12/10 Javascript
浅谈Python中数据解析
2015/05/05 Python
使用Python写个小监控
2016/01/27 Python
python xml解析实例详解
2016/11/14 Python
Python基于ThreadingTCPServer创建多线程代理的方法示例
2018/01/11 Python
Python+Django搭建自己的blog网站
2018/03/13 Python
Python实现 PS 图像调整中的亮度调整
2019/06/28 Python
给大家整理了19个pythonic的编程习惯(小结)
2019/09/25 Python
香港个人化生活购物网站:Ballyhoo Limited
2016/09/10 全球购物
abstract 可以和 virtual 一起使用吗?可以和 override 一起使用吗?
2012/10/15 面试题
优秀应届生推荐信
2013/11/09 职场文书
应届毕业生求职信
2013/11/30 职场文书
电脑专业个人求职信范文
2014/02/04 职场文书
高一数学教学反思
2014/02/07 职场文书
三年级评语大全
2014/04/23 职场文书
幼儿园教研活动总结
2014/04/30 职场文书
幼儿园健康教育方案
2014/06/14 职场文书
2014年国庆节活动总结
2014/08/26 职场文书
学习教师敬业奉献模范事迹材料思想汇报
2014/09/19 职场文书
年会主持人开场白台词
2015/05/29 职场文书
学习计划是什么
2019/04/30 职场文书