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 相关文章推荐
比较简单实用的使用正则三种版本的js去空格处理方法
Nov 18 Javascript
利用jquery包将字符串生成二维码图片
Sep 12 Javascript
js关于字符长度限制的问题示例探讨
Jan 24 Javascript
node.js中的querystring.escape方法使用说明
Dec 10 Javascript
JavaScript获取当前日期是星期几的方法
Apr 06 Javascript
js调出上下文菜单的实例
Dec 17 Javascript
JavaScript与jQuery实现的闪烁输入效果
Feb 18 Javascript
layui点击按钮添加可编辑的一行方法
Aug 15 Javascript
实现Vue的markdown文档可以在线运行的方法示例
Dec 11 Javascript
40行代码把Vue3的响应式集成进React做状态管理
May 20 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
Jul 27 Javascript
JavaScript实现图片放大预览效果
Nov 02 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下封装较好的数字分页方法
2010/11/23 PHP
php漏洞之跨网站请求伪造与防止伪造方法
2013/08/15 PHP
php中session与cookie的比较
2015/01/27 PHP
解决Yii2邮件发送结果返回成功,但接收不到邮件的问题
2017/05/23 PHP
javascript  Error 对象 错误处理
2008/05/18 Javascript
JavaScript在for循环中绑定事件解决事件参数不同的情况
2014/01/20 Javascript
JQuery中extend使用介绍
2014/03/13 Javascript
Jquery给基本控件的取值、赋值示例
2014/05/23 Javascript
Bootstrap对话框使用实例讲解
2016/09/24 Javascript
Javascript的动态增加类的实现方法
2016/10/20 Javascript
基于Bootstrap仿淘宝分页控件实现代码
2016/11/07 Javascript
BootStrap整体框架之基础布局组件
2016/12/15 Javascript
利用JavaScript在网页实现八数码启发式A*算法动画效果
2017/04/16 Javascript
微信小程序 wx:for的使用实例详解
2017/04/27 Javascript
微信小程序开发中的疑问解答汇总
2017/07/03 Javascript
Vue-Router的使用方法
2018/09/05 Javascript
vue根据条件不同显示不同按钮的操作
2020/08/04 Javascript
使用JavaScript和MQTT开发物联网应用示例解析
2020/08/07 Javascript
[10:49]2014国际邀请赛 叨叨刀塔第二期为真正的电竞喝彩
2014/07/21 DOTA
centos下更新Python版本的步骤
2013/02/12 Python
Python中列表、字典、元组、集合数据结构整理
2014/11/20 Python
python字典基本操作实例分析
2015/07/11 Python
Matplotlib 生成不同大小的subplots实例
2018/05/25 Python
python实现弹窗祝福效果
2019/04/07 Python
关于tensorflow的几种参数初始化方法小结
2020/01/04 Python
Python3.7将普通图片(png)转换为SVG图片格式(网站logo图标)动起来
2020/04/21 Python
Python 生成短8位唯一id实战教程
2021/01/13 Python
HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canvas 绘制精美的图
2015/08/31 HTML / CSS
输入N,打印N*N矩阵
2012/02/20 面试题
高中生校园生活自我评价
2013/09/19 职场文书
医学专业职业生涯规划范文
2014/02/05 职场文书
宣传活动总结范文
2014/07/01 职场文书
尊老爱幼演讲稿
2014/09/04 职场文书
早安问候语大全
2015/11/10 职场文书
vue封装数字翻牌器
2022/04/20 Vue.js
Android开发手册TextInputLayout样式使用示例
2022/06/10 Java/Android