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动态添加与删除select中的Option对象(示例代码)
Dec 20 Javascript
jquery 绑定回车动作扑捉回车键触发的事件
Mar 26 Javascript
js在数组中删除重复的元素自保留一个(两种实现思路)
Aug 22 Javascript
JavaScript使用slice函数获取数组部分元素的方法
Apr 06 Javascript
js实现点击获取验证码倒计时效果
Jan 28 Javascript
鼠标悬停小图标显示大图标
Jan 22 Javascript
AngularJS基础 ng-keypress 指令简单示例
Aug 02 Javascript
JavaScript实现图片轮播组件代码示例
Nov 22 Javascript
解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题
Nov 28 Javascript
vue表单自定义校验规则介绍
Aug 28 Javascript
JS实现换肤功能的方法实例详解
Jan 30 Javascript
基于vue和websocket的多人在线聊天室
Feb 01 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
通过JavaScript或PHP检测Android设备的代码
2011/03/09 PHP
php cookie中点号(句号)自动转为下划线问题
2014/10/21 PHP
PHP封装的字符串加密解密函数
2015/12/18 PHP
php 中的信号处理操作实例详解
2020/03/04 PHP
javascript 简单高效判断数据类型 系列函数 By shawl.qiu
2007/03/06 Javascript
js判断浏览器类型的方法
2013/08/07 Javascript
jquery组件使用中遇到的问题整理及解决
2014/02/21 Javascript
中文输入法不触发onkeyup事件的解决办法
2014/07/09 Javascript
探析浏览器执行JavaScript脚本加载与代码执行顺序
2016/01/12 Javascript
深入理解JS继承和原型链的问题
2016/12/17 Javascript
jQuery仿写百度百科的目录树
2017/01/03 Javascript
关于Stream和Buffer的相互转换详解
2017/07/26 Javascript
深入理解Vue 的钩子函数
2018/09/05 Javascript
使用Vue开发自己的Chrome扩展程序过程详解
2019/06/21 Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
2019/09/17 Javascript
jQuery AJAX应用实例总结
2020/05/19 jQuery
jQuery插件实现图片轮播效果
2020/10/19 jQuery
python BeautifulSoup使用方法详解
2013/11/21 Python
python控制台英汉汉英电子词典
2020/04/23 Python
使用Python构建Hopfield网络的教程
2015/04/14 Python
1分钟快速生成用于网页内容提取的xslt
2018/02/23 Python
Python实现针对给定字符串寻找最长非重复子串的方法
2018/04/21 Python
Python中的函数作用域
2018/05/07 Python
python 实现将字典dict、列表list中的中文正常显示方法
2018/07/06 Python
深入浅析Python传值与传址
2018/07/10 Python
django利用request id便于定位及给日志加上request_id
2018/08/26 Python
Python之时间和日期使用小结
2019/02/14 Python
Python3.5 Pandas模块之DataFrame用法实例分析
2019/04/23 Python
flask框架url与重定向操作实例详解
2020/01/25 Python
如何用Python编写一个电子考勤系统
2021/02/08 Python
《赶海》教学反思
2014/04/20 职场文书
节约用水的口号
2014/06/20 职场文书
招商银行工作证明
2015/06/17 职场文书
go 原生http web 服务跨域restful api的写法介绍
2021/04/27 Golang
我对PyTorch dataloader里的shuffle=True的理解
2021/05/20 Python
python数字图像处理之图像的批量处理
2022/06/28 Python