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 相关文章推荐
获取Javscript执行函数名称的方法
Dec 22 Javascript
用CSS+JS实现的进度条效果效果
Jun 05 Javascript
Javascript 设计模式(二) 闭包
May 26 Javascript
javascript面向对象编程代码
Dec 19 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
Apr 12 Javascript
jQuery中removeData()方法用法实例
Dec 27 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
Feb 28 Javascript
javascript跑马灯抽奖实例讲解
Apr 17 Javascript
javascript检查某个元素在数组中的索引值
Mar 30 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
Oct 26 Javascript
在Vue项目中取消ESLint代码检测的步骤讲解
Jan 27 Javascript
openlayers实现地图测距测面
Sep 25 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
IIS php环境配置PHP5 MySQL5 ZendOptimizer phpmyadmin安装与配置
2008/11/18 PHP
WordPress分页伪静态加html后缀
2016/06/08 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
WordPress伪静态规则设置代码实例
2020/12/10 PHP
浅析jQuery对select操作小结(遍历option,操作option)
2013/07/04 Javascript
代码触发js事件(click、change)示例应用
2013/12/13 Javascript
jQuery中[attribute]选择器用法实例
2014/12/31 Javascript
JS实现图片产生波纹一样flash效果的方法
2015/02/27 Javascript
jQuery事件绑定on()、bind()与delegate() 方法详解
2015/06/03 Javascript
详解jQuery Mobile自定义标签
2016/01/06 Javascript
分析js闭包引起的事件注册问题
2016/03/29 Javascript
Jquery删除css属性的简单方法
2016/12/04 Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
2019/01/29 Javascript
JS window对象简单操作完整示例
2020/01/14 Javascript
[01:35]辉夜杯战队访谈宣传片—iG.V
2015/12/25 DOTA
从零学python系列之从文件读取和保存数据
2014/05/23 Python
Python-基础-入门 简介
2014/08/09 Python
Python Tkinter GUI编程入门介绍
2015/03/10 Python
Python中列表元素转为数字的方法分析
2016/06/14 Python
详解Python map函数及Python map()函数的用法
2017/11/16 Python
matplotlib savefig 保存图片大小的实例
2018/05/24 Python
Python中的heapq模块源码详析
2019/01/08 Python
解决pycharm的Python console不能调试当前程序的问题
2019/01/20 Python
pytorch 自定义参数不更新方式
2020/01/06 Python
利用pandas向一个csv文件追加写入数据的实现示例
2020/04/23 Python
解决keras,val_categorical_accuracy:,0.0000e+00问题
2020/07/02 Python
python缩进长度是否统一
2020/08/02 Python
CSS3 media queries + jQuery实现响应式导航
2016/09/30 HTML / CSS
Hunkemöller瑞士网上商店:欧洲最大的内衣品牌之一
2018/12/03 全球购物
Brasty波兰:香水、化妆品、手表网上商店
2019/04/15 全球购物
材料成型专业个人求职信范文
2013/09/25 职场文书
2015元旦节寄语
2014/12/08 职场文书
2014年科协工作总结
2014/12/09 职场文书
2015年个人剖析材料范文
2014/12/29 职场文书
客服专员岗位职责范本
2015/04/07 职场文书
穷人该怎么创业?谨记以下几点
2019/07/11 职场文书