layui表格分页 记录勾选的实例


Posted in Javascript onSeptember 02, 2019

layui 分页之后没有记录之前勾选项的功能 , 自己写了一个 , 主要点就是表格的done 函数 ,每次渲染完成之后做表格勾选操作。然后需要一个全局变量记录所有已经勾选的项 。下面是自己的代码 。

首先,监听表格的复选框点击事件 , 将单选或全选全部记录下来

var checkArray = new Array();
 // 当前页数据
 var currentArray ;
   //监听行单击事件(单击事件为:rowDouble)
   table.on('checkbox(test)', function(obj){
    var checkData = obj.data ;
    // 如果是全选中
    if(obj.type == 'all' && obj.checked == true){
     var checkStatus = table.checkStatus('demo')
      ,data = checkStatus.data;

     for(var i in data){
      // 如果包含就去掉 ,不包含就添加
      if(checkArray.indexOf(data[i].eventTypeName) > -1){
      }else {
       checkArray.push(data[i].eventTypeName) ;
      }
     }
    }
    // 全不选中
    else if(obj.type == 'all' && obj.checked == false){

     for(var i in currentArray){
      checkArray.remove(currentArray[i].eventTypeName) ;
     }
    }
    // 如果是单选
    else {
     var eventTypeName = checkData.eventTypeName ;
     // 如果包含就去掉 ,不包含就添加
     if(checkArray.indexOf(eventTypeName) > -1){
      checkArray.remove(eventTypeName) ;
     }else {
      checkArray.push(eventTypeName) ;
     }
    }
   });

然后 ,

done: function(res, curr, count){
     //如果是异步请求数据方式,res即为你接口返回的信息。
     //如果是直接赋值的方式,res即为:{data: [], count: 99} data为当前页数据、count为数据总长度
     currentArray = res.data ;

     //.假设你的表格指定的 id="maintb",找到框架渲染的表格
     var tbl = $('#demo').next('.layui-table-view');

     // 渲染选择框
     for(var i in currentArray){

      for(var j in checkArray){
       if(currentArray[i].eventTypeName == checkArray[j]){
        tbl.find('table>tbody>tr').eq(i).find('td').eq(0).find('input[type=checkbox]').prop('checked', true);
       }
      }
     }

     form.render('checkbox');
    }

以上这篇layui表格分页 记录勾选的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
csdn 博客中实现运行代码功能实现
Aug 29 Javascript
js中for in的用法示例解析
Dec 25 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
Jan 12 Javascript
jQuery实现放大镜效果实例代码
Mar 17 Javascript
深入浅析JavaScript中的constructor
Apr 19 Javascript
JavaScript的MVVM库Vue.js入门学习笔记
May 03 Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
Aug 09 Javascript
Angular.js之作用域scope'@','=','&'实例详解
Feb 28 Javascript
微信小程序图片宽100%显示并且不变形
Jun 21 Javascript
vue.draggable实现表格拖拽排序效果
Dec 01 Javascript
element-ui 中使用upload多文件上传只请求一次接口
Jul 19 Javascript
VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析
Dec 02 Javascript
layui radio点击事件实现input显示和隐藏的例子
Sep 02 #Javascript
layui复选框的全选与取消实现方法
Sep 02 #Javascript
解决Vue调用springboot接口403跨域问题
Sep 02 #Javascript
layui 动态设置checbox 选中状态的例子
Sep 02 #Javascript
layui之table checkbox初始化时选中对应选项的方法
Sep 02 #Javascript
微信小程序 简易计算器实现代码实例
Sep 02 #Javascript
vue日历/日程提醒/html5本地缓存功能
Sep 02 #Javascript
You might like
PHP中使用gettext来支持多语言的方法
2011/05/02 PHP
PHP类的静态(static)方法和静态(static)变量使用介绍
2012/02/19 PHP
php生成图片验证码
2015/06/09 PHP
PHP number_format函数原理及实例解析
2020/07/14 PHP
JavaScript 动态添加表格行 使用模板、标记
2009/10/24 Javascript
不同浏览器的怪癖小结
2010/07/11 Javascript
JS中图片缓冲loading技术的实例代码
2013/08/29 Javascript
javascript中hasOwnProperty() 方法使用指南
2015/03/09 Javascript
AngularJS实现星星等级评分功能
2016/09/24 Javascript
JS中的phototype详解
2017/02/04 Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
2017/02/05 Javascript
JavaScript结合HTML DOM实现联动菜单
2017/04/05 Javascript
详解vue前后台数据交互vue-resource文档
2017/07/19 Javascript
jQuery中 DOM节点操作方法大全
2017/10/12 jQuery
浅析node.js的模块加载机制
2018/05/25 Javascript
微信小程序实现弹出菜单功能
2018/06/12 Javascript
浅析Vue.js 中的条件渲染指令
2018/11/19 Javascript
vue-for循环嵌套操作示例
2019/01/28 Javascript
原生JS实现图片懒加载之页面性能优化
2019/04/26 Javascript
Cython 三分钟入门教程
2009/09/17 Python
Python实现读取文件最后n行的方法
2017/02/23 Python
彻底搞懂python 迭代器和生成器
2020/09/07 Python
python 带时区的日期格式化操作
2020/10/23 Python
python list的index()和find()的实现
2020/11/16 Python
VSCode 自定义html5模板的实现
2019/12/05 HTML / CSS
Omio意大利:全欧洲低价大巴、火车和航班搜索和比价
2017/12/02 全球购物
英国健身专家:WIT Fitness
2021/02/09 全球购物
北京鼎普科技股份有限公司软件测试面试题
2012/04/07 面试题
普师专业个人自荐信范文
2013/11/26 职场文书
商场中秋节广播稿
2014/01/17 职场文书
工作室成员个人发展规划范文
2014/01/24 职场文书
暑期培训班策划方案
2014/08/26 职场文书
党员个人总结自评
2015/02/14 职场文书
2015年班组工作总结
2015/04/20 职场文书
2015年幼儿园中班开学寄语
2015/05/27 职场文书
Alexa停服!网站排名将何去何从?目前还没有替代品。
2022/04/15 杂记