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 相关文章推荐
论坛特效代码收集(落伍转发-不错)
Dec 02 Javascript
JavaScript的21条基本知识点
Mar 04 Javascript
jQuery+ajax实现文章点赞功能的方法
Dec 31 Javascript
React组件中的this的具体使用
Feb 28 Javascript
关于vue v-for循环解决img标签的src动态绑定问题
Sep 18 Javascript
Vue页面跳转动画效果的实现方法
Sep 23 Javascript
微信小程序实现的图片保存功能示例
Apr 24 Javascript
vue中使用vue-print.js实现多页打印
Mar 05 Javascript
vue 遮罩层阻止默认滚动事件操作
Jul 28 Javascript
antd 表格列宽自适应方法以及错误处理操作
Oct 27 Javascript
JavaScript实现点击图片换背景
Nov 20 Javascript
Vue实现摇一摇功能(兼容ios13.3以上)
Jan 26 Vue.js
对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中str_replace函数使用小结
2008/10/11 PHP
php session应用实例 登录验证
2009/03/16 PHP
php_screw安装使用教程(另一个PHP代码加密实现)
2014/05/29 PHP
PHP实现压缩图片尺寸并转为jpg格式的方法示例
2018/05/10 PHP
YUI模块开发原理详解
2013/11/18 Javascript
JS动态增加删除UL节点LI及相关内容示例
2014/05/21 Javascript
javascript结合fileReader 实现上传图片
2015/01/30 Javascript
JavaScript使用yield模拟多线程的方法
2015/03/19 Javascript
jQuery热气球动画半透明背景的后台登录界面代码分享
2015/08/28 Javascript
jQuery实现进度条效果代码
2015/12/17 Javascript
JavaScript中获取纯正的undefined的方法
2016/03/06 Javascript
AngularJS页面访问时出现页面闪烁问题的解决
2016/03/06 Javascript
js 获取json数组里面数组的长度实例
2017/10/31 Javascript
Vue 引入AMap高德地图的实现代码
2019/04/29 Javascript
nodejs+express最简易的连接数据库的方法
2020/12/23 NodeJs
Python Property属性的2种用法
2015/06/21 Python
Python中str is not callable问题详解及解决办法
2017/02/10 Python
Python实现桶排序与快速排序算法结合应用示例
2017/11/22 Python
python判断计算机是否有网络连接的实例
2018/12/15 Python
WIn10+Anaconda环境下安装PyTorch(避坑指南)
2019/01/30 Python
Python实用库 PrettyTable 学习笔记
2019/08/06 Python
python爬虫爬取监控教务系统的思路详解
2020/01/08 Python
关于pytorch中全连接神经网络搭建两种模式详解
2020/01/14 Python
keras打印loss对权重的导数方式
2020/06/10 Python
python属于解释语言吗
2020/06/11 Python
Python经纬度坐标转换为距离及角度的实现
2020/11/01 Python
Jimmy Choo美国官网:周仰杰鞋子品牌
2018/06/08 全球购物
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2014/01/19 面试题
DOM和JQuery对象有什么区别
2016/11/11 面试题
委托书范文
2014/04/02 职场文书
欢迎词怎么写
2015/01/23 职场文书
上课说话检讨书
2015/01/27 职场文书
幼儿园小班工作总结2015
2015/04/25 职场文书
深入理解CSS 中 transform matrix矩阵变换问题
2021/08/30 HTML / CSS
VUE中的v-if与v-show区别介绍
2022/03/13 Vue.js
python读取并查看npz/npy文件数据以及数据显示方法
2022/04/14 Python