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 相关文章推荐
用htc组件制作windows选项卡
Jan 13 Javascript
javascript firefox不显示本地预览图片问题的解决方法
Nov 12 Javascript
js Object2String方便查看js对象内容
Nov 24 Javascript
CSS图片响应式 垂直水平居中
Aug 14 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
Sep 22 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
Nov 17 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
Dec 08 Javascript
JS实现图片高斯模糊切换效果的焦点图实例
Jan 21 Javascript
Vue filters过滤器的使用方法
Jul 14 Javascript
浅谈vue 锚点指令v-anchor的使用
Nov 13 Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
Jul 16 Javascript
vue 内联样式style中的background用法说明
Aug 05 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
Ajax PHP 边学边练 之三 数据库
2009/11/26 PHP
从PHP的源码中深入了解stdClass类
2014/04/18 PHP
Linux下创建nginx脚本-start、stop、reload…
2014/08/03 PHP
PHP实现XML与数据格式进行转换类实例
2015/07/29 PHP
PHP 数组黑名单/白名单实例代码详解
2019/06/04 PHP
一个不错的应用,用于提交获取文章内容,不推荐用
2007/03/03 Javascript
jQuery 表格工具集
2010/04/25 Javascript
详解JavaScript中setSeconds()方法的使用
2015/06/11 Javascript
JavaScript中的toDateString()方法使用详解
2015/06/12 Javascript
Angular实现form自动布局
2016/01/28 Javascript
jQuery事件绑定on()与弹窗实现代码
2016/04/28 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
2016/11/30 Javascript
JavaScript中捕获与冒泡详解及实例
2017/02/03 Javascript
基于DOM节点删除之empty和remove的区别(详解)
2017/09/11 Javascript
vue使用axios时关于this的指向问题详解
2017/12/22 Javascript
webpack实用小功能介绍
2018/01/02 Javascript
一步步教你利用webpack如何搭一个vue脚手架(超详细讲解和注释)
2018/01/08 Javascript
在create-react-app中使用css modules的示例代码
2018/07/31 Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
2020/04/11 Javascript
openlayers实现地图测距测面
2020/09/25 Javascript
jQuery实现鼠标拖动图片功能
2021/03/04 jQuery
[03:26]回顾2015国际邀请赛中国区预选赛
2015/06/09 DOTA
python网络编程之文件下载实例分析
2015/05/20 Python
python删除过期文件的方法
2015/05/29 Python
Python 使用SMTP发送邮件的代码小结
2016/09/21 Python
Python三级目录展示的实现方法
2016/09/28 Python
浅谈Python2获取中文文件名的编码问题
2018/01/09 Python
Python timer定时器两种常用方法解析
2020/01/20 Python
canvas线条的属性详解
2018/03/27 HTML / CSS
改变生活的男士内衣:SAXX Underwear
2019/08/28 全球购物
小学生成长感言
2014/01/30 职场文书
活动总结报告格式
2014/05/09 职场文书
资助贫困学生倡议书
2014/05/16 职场文书
2015社区健康教育工作总结
2015/05/20 职场文书
springboot拦截器无法注入redisTemplate的解决方法
2021/06/27 Java/Android
Python基本知识点总结
2022/04/07 Python