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 相关文章推荐
javascript基础知识大全 便于大家学习,也便于我自己查看
Aug 17 Javascript
Java 正则表达式学习总结和一些小例子
Sep 13 Javascript
实现高性能JavaScript之执行与加载
Jan 30 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
Dec 18 Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
Mar 10 Javascript
详解angular2实现ng2-router 路由和嵌套路由
Mar 24 Javascript
jquery select插件异步实时搜索实例代码
Oct 20 jQuery
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
Jul 16 Javascript
Vue 中 a标签上href无法跳转的解决方式
Nov 12 Javascript
Threejs实现滴滴官网首页地球动画功能
Jul 13 Javascript
基于react项目打包css引用路径错误解决方案
Oct 28 Javascript
Vue 修改网站图标的方法
Dec 31 Vue.js
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模板类代码
2008/09/07 PHP
对淘宝URL中ID提取的PHP代码
2013/09/01 PHP
PHP读取大文件的多种方法介绍
2016/04/04 PHP
PHP fprintf()函数用法讲解
2019/02/16 PHP
Laravel Validator自定义错误返回提示消息并在前端展示
2019/05/09 PHP
Javascript 写的简单进度条控件
2008/01/22 Javascript
javascript json 新手入门文档
2009/12/03 Javascript
js 如何实现对数据库的增删改查
2012/11/23 Javascript
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
2013/05/17 Javascript
jQuery中focus事件用法实例
2014/12/26 Javascript
jQuery中eq()方法用法实例
2015/01/05 Javascript
JavaScript实现的SHA-1加密算法完整实例
2016/02/02 Javascript
Node.js返回JSONP详解
2016/05/18 Javascript
easyui messager alert 三秒后自动关闭提示的实例
2016/11/07 Javascript
vue-dialog的弹出层组件
2020/05/25 Javascript
详解nodejs爬虫程序解决gbk等中文编码问题
2017/04/06 NodeJs
Ionic2调用本地SQlite实例
2017/04/22 Javascript
浅谈webpack下的AOP式无侵入注入
2017/11/12 Javascript
vue实现提示保存后退出的方法
2018/03/15 Javascript
解决Mac node版本升级失败的问题
2018/05/16 Javascript
vue-cli的工程模板与构建工具详解
2018/09/27 Javascript
JSON生成Form表单的方法示例
2018/11/21 Javascript
layer弹出子iframe层父子页面传值的实现方法
2018/11/22 Javascript
python实现定时同步本机与北京时间的方法
2015/03/24 Python
Python实现1-9数组形成的结果为100的所有运算式的示例
2017/11/03 Python
在Python 不同级目录之间模块的调用方法
2019/01/19 Python
Python 如何在字符串中插入变量
2020/08/01 Python
CSS3制作半透明边框(Facebox)类似渐变
2012/12/09 HTML / CSS
澳大利亚在线床零售商:Bedworks
2020/09/01 全球购物
人力资源部培训专员岗位职责
2014/01/02 职场文书
计算机应届毕业生自荐信范文
2014/02/23 职场文书
企业安全标语
2014/06/07 职场文书
大学学雷锋活动总结
2014/06/26 职场文书
司法局2014法制宣传日活动总结
2014/11/01 职场文书
教师节班会主持词
2015/07/06 职场文书
Nginx防盗链与服务优化配置的全过程
2022/01/18 Servers