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中Math对象使用说明
Jan 16 Javascript
javascript Event对象详解及使用示例
Nov 22 Javascript
自己动手实现jQuery Callbacks完整功能代码详解
Nov 25 Javascript
jQuery拖拽div实现思路
Feb 19 Javascript
JavaScript对Json的增删改属性详解
Jun 02 Javascript
VUE axios发送跨域请求需要注意的问题
Jul 06 Javascript
webpack4.x开发环境配置详解
Aug 04 Javascript
Next.js项目实战踩坑指南(笔记)
Nov 29 Javascript
微信打开网址添加在浏览器中打开提示的办法
May 20 Javascript
详解新手使用vue-router传参时注意事项
Jun 06 Javascript
Angular8 Http拦截器简单使用教程
Aug 20 Javascript
JavaScript在web自动化测试中的作用示例详解
Aug 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
PHP 反射(Reflection)使用实例
2015/05/12 PHP
简要剖析PHP的Yii框架的组件化机制的基本知识
2016/03/17 PHP
在jQuery 1.5中使用deferred对象的代码(翻译)
2011/03/10 Javascript
JS增加行复制行删除行的实现代码
2013/11/09 Javascript
只需一行代码,轻松实现一个在线编辑器
2013/11/12 Javascript
浅谈checkbox的一些操作(实战经验)
2013/11/20 Javascript
探讨JavaScript中声明全局变量三种方式的异同
2013/12/03 Javascript
javascript中attribute和property的区别详解
2014/06/05 Javascript
jQuery实现购物车多物品数量的加减+总价计算
2014/06/06 Javascript
java和javascript获取word文档的书签位置对比
2014/06/19 Javascript
node.js [superAgent] 请求使用示例
2015/03/13 Javascript
jQuery的end()方法使用详解
2015/07/15 Javascript
总结JavaScript中布尔操作符||与&&的使用技巧
2015/11/17 Javascript
Javascript 使用ajax与C#获取文件大小实例详解
2017/01/13 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)
2017/01/21 Javascript
ES6数组的扩展详解
2017/04/25 Javascript
ES6 系列之 WeakMap的使用示例
2018/08/06 Javascript
Nodejs实现多文件夹文件同步
2018/10/17 NodeJs
浅谈vue3中effect与computed的亲密关系
2019/10/10 Javascript
Python基于pygame实现的font游戏字体(附源码)
2015/11/11 Python
python编程线性回归代码示例
2017/12/07 Python
1分钟快速生成用于网页内容提取的xslt
2018/02/23 Python
Python3.5文件修改操作实例分析
2019/05/01 Python
pyqt 实现在Widgets中显示图片和文字的方法
2019/06/13 Python
HTML5 Canvas实现360度全景图的示例代码
2018/01/29 HTML / CSS
canvas中普通动效与粒子动效的实现代码示例
2019/01/03 HTML / CSS
日本钓鱼渔具和户外用品网上商店:naturum
2016/08/07 全球购物
英国优质家居用品网上品牌:URBANARA
2018/06/01 全球购物
linux面试题参考答案(6)
2016/06/23 面试题
西北政法大学自主招生自荐信
2014/01/29 职场文书
股份转让协议书
2014/04/12 职场文书
新年寄语大全
2014/04/12 职场文书
中学生爱国演讲稿
2014/09/05 职场文书
模范班主任事迹材料
2014/12/17 职场文书
民事纠纷协议书
2016/03/23 职场文书
使用tensorflow 实现反向传播求导
2021/05/26 Python