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 相关文章推荐
用jscript实现新建和保存一个word文档
Jun 15 Javascript
鼠标移动到图片名上,显示图片的简单实例
Jul 14 Javascript
jQuery ajax提交Form表单实例(附demo源码)
Apr 06 Javascript
HTML5 js实现拖拉上传文件功能
Nov 20 Javascript
JavaScript使用delete删除数组元素用法示例【数组长度不变】
Jan 17 Javascript
jq stop()和:is(:animated)的用法及区别(详解)
Feb 12 Javascript
angular.extend方法的具体使用
Sep 14 Javascript
element ui 对话框el-dialog关闭事件详解
Feb 26 Javascript
详解angular分页插件tm.pagination二次触发问题解决方案
Jul 20 Javascript
javascript和php使用ajax通信传递JSON的实例
Aug 21 Javascript
vue cli 3.x 项目部署到 github pages的方法
Apr 17 Javascript
微信小程序实现列表的横向滑动方式
Jul 15 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数据库初学者使用指南
2006/11/16 PHP
php去掉URL网址中带有PHPSESSID的配置方法
2014/07/08 PHP
php实现仿写CodeIgniter的购物车类
2015/07/29 PHP
yii2整合百度编辑器umeditor及umeditor图片上传问题的解决办法
2016/04/20 PHP
PHP回调函数简单用法示例
2019/05/08 PHP
基于jQuery的图片剪切插件
2011/08/03 Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
2014/12/20 Javascript
jQuery Position方法使用和兼容性
2017/08/23 jQuery
bootstrap3中container与container_fluid外层容器的区别讲解
2017/12/04 Javascript
vue组件详解之使用slot分发内容
2018/04/09 Javascript
详解微信JS-SDK选择图片遇到的坑
2018/08/15 Javascript
Vue.js子组件向父组件通信的方法实例代码详解
2018/12/10 Javascript
jQuery实现的别踩白块小游戏完整示例
2019/01/07 jQuery
原生js代码能实现call和bind吗
2019/07/31 Javascript
JS中的算法与数据结构之队列(Queue)实例详解
2019/08/20 Javascript
使用Vue-cli 中为单独页面设置背景图片铺满全屏
2020/07/17 Javascript
[02:47]DOTA2亚洲邀请赛 HR战队出场宣传片
2015/02/07 DOTA
python递归查询菜单并转换成json实例
2017/03/27 Python
Python中如何优雅的合并两个字典(dict)方法示例
2017/08/09 Python
python+pillow绘制矩阵盖尔圆简单实例
2018/01/16 Python
python requests post多层字典的方法
2018/12/27 Python
Pandas读取并修改excel的示例代码
2019/02/17 Python
django model object序列化实例
2020/03/13 Python
python爬虫今日热榜数据到txt文件的源码
2021/02/23 Python
墨西哥运动服饰和鞋网上商店:Netshoes墨西哥
2016/07/28 全球购物
加拿大女装网上购物:Reitmans
2016/10/20 全球购物
英国豪华装饰照明品牌的在线零售商:Inspyer Lighting
2019/12/10 全球购物
物流经理自我评价
2013/09/23 职场文书
2013年高中生自我评价
2013/10/23 职场文书
初三化学教学反思
2014/01/23 职场文书
学习雷锋活动总结
2014/04/29 职场文书
建筑工地文明标语
2014/10/09 职场文书
岳麓书院导游词
2015/02/03 职场文书
2015年学校党建工作总结
2015/05/19 职场文书
教师教育心得体会
2016/01/19 职场文书
TV动画《间谍过家家》公开PV
2022/03/20 日漫