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 相关文章推荐
Js数组的操作push,pop,shift,unshift等方法详细介绍
Dec 28 Javascript
技术男用来对妹子表白的百度首页
Jul 23 Javascript
jQuery使用之处理页面元素用法实例
Jan 19 Javascript
AngularJS  $modal弹出框实例代码
Aug 24 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
Dec 26 Javascript
原生js实现淘宝放大镜效果
Oct 28 Javascript
写gulp遇到的ES6问题详解
Dec 03 Javascript
搭建一个Koa后端项目脚手架的方法步骤
May 30 Javascript
javascript实现导航栏分页效果
Jun 27 Javascript
Jquery Datatables的使用详解
Jan 30 jQuery
微信小程序学习总结(四)事件与冒泡实例分析
Jun 04 Javascript
Node.js 中如何收集和解析命令行参数
Jan 08 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
全国FM电台频率大全 - 10 江苏省
2020/03/11 无线电
解析:通过php socket并借助telnet实现简单的聊天程序
2013/06/18 PHP
thinkPHP5项目中实现QQ第三方登录功能
2017/10/20 PHP
PHP实现会员账号单唯一登录的方法分析
2019/03/07 PHP
jQuery EasyUI 的EasyLoader功能介绍
2010/09/12 Javascript
jquery调取json数据实现省市级联的方法
2015/01/29 Javascript
浅谈javascript语法和定时函数
2015/05/03 Javascript
js控制TR的显示隐藏
2016/03/04 Javascript
Windows系统下安装Node.js的步骤图文详解
2016/11/15 Javascript
Vue 去除路径中的#号
2018/04/19 Javascript
详解创建自定义的Angular Schematics
2018/06/06 Javascript
webpack公共组件引用路径简化小技巧
2018/06/15 Javascript
JQuery常用选择器功能与用法实例分析
2019/12/23 jQuery
关于引入vue.js 文件的知识点总结
2020/01/28 Javascript
js实现弹窗猜数字游戏
2020/11/26 Javascript
Python断言assert的用法代码解析
2018/02/03 Python
Python控制台输出时刷新当前行内容而不是输出新行的实现
2020/02/21 Python
Python+Dlib+Opencv实现人脸采集并表情判别功能的代码
2020/07/01 Python
Python常用数据分析模块原理解析
2020/07/20 Python
中外合拍动画首获奥斯卡提名,“上海出品”《飞奔去月球》能否拿下最终大奖?
2021/03/16 国漫
IE下实现类似CSS3 text-shadow文字阴影的几种方法
2011/05/11 HTML / CSS
德国家具在线:Fashion For Home
2017/03/11 全球购物
美国木工工具和用品商店:Woodcraft
2019/10/30 全球购物
数据库笔试题
2013/05/09 面试题
MYSQL基础面试题
2012/05/13 面试题
电气自动化自荐信
2013/10/10 职场文书
档案接收函范文
2014/01/10 职场文书
工程技术员岗位职责
2014/03/02 职场文书
美德少年事迹材料1000字
2014/08/21 职场文书
党员创先争优心得体会
2014/09/11 职场文书
财务工作犯错检讨书
2014/10/07 职场文书
挂职锻炼个人总结
2015/03/05 职场文书
2015年办公室人员工作总结
2015/05/15 职场文书
预备党员入党感想
2015/08/10 职场文书
2016关于预防职务犯罪的心得体会
2016/01/21 职场文书
中国古代史学名著《战国策》概述
2019/08/09 职场文书