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 相关文章推荐
document.documentElement && document.documentElement.scrollTop
Dec 01 Javascript
读jQuery之七 判断点击了鼠标哪个键的代码
Jun 21 Javascript
jQuery中bind,live,delegate与one方法的用法及区别解析
Dec 30 Javascript
JavaScript调试技巧之console.log()详解
Mar 19 Javascript
javascritp添加url参数将参数加入到url中
Sep 25 Javascript
调试JavaScript中正则表达式中遇到的问题
Jan 27 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
Aug 19 Javascript
JQuery导航菜单选择特效
Apr 11 Javascript
AngularJs Injecting Services Into Controllers详解
Sep 02 Javascript
js构建二叉树进行数值数组的去重与优化详解
Mar 26 Javascript
微信小程序实现发微博功能的示例代码
Jun 24 Javascript
如何在vue 中使用柱状图 并自修改配置
Jan 21 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类
2006/11/27 PHP
分享下PHP register_globals 值为on与off的理解
2013/09/26 PHP
一个PHP二维数组排序的函数分享
2014/01/17 PHP
Laravel路由设定和子路由设定实例分析
2016/03/30 PHP
浅析PHP开发规范
2018/02/05 PHP
PHP count_chars()函数讲解
2019/02/14 PHP
在laravel框架中实现封装公共方法全局调用
2019/10/14 PHP
js 面向对象的技术创建高级 Web 应用程序
2010/02/25 Javascript
jQuery数组处理代码详解(含实例演示)
2012/02/03 Javascript
Javascript引用指针使用介绍
2012/11/07 Javascript
javaScript arguments 对象使用介绍
2013/10/18 Javascript
javascript结合CSS实现苹果开关按钮特效
2015/04/07 Javascript
jQuery无刷新分页完整实例代码
2015/10/27 Javascript
jquery实现简单的遮罩层
2016/01/08 Javascript
多种JQuery循环滚动文字图片效果代码
2020/06/23 Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
2016/08/25 Javascript
微信小程序使用video组件播放视频功能示例【附源码下载】
2017/12/08 Javascript
React中的render何时执行过程
2018/04/13 Javascript
node puppeteer(headless chrome)实现网站登录
2018/05/09 Javascript
微信小程序开发之map地图组件定位并手动修改位置偏差
2019/08/17 Javascript
Vue仿微信app页面跳转动画效果
2019/08/21 Javascript
p5.js绘制旋转的正方形
2019/10/23 Javascript
js实现QQ邮箱邮件拖拽删除功能
2020/08/27 Javascript
Python实现学生成绩管理系统
2020/04/05 Python
python模仿网页版微信发送消息功能
2018/02/24 Python
Python之循环结构
2019/01/15 Python
Pyqt5 实现跳转界面并关闭当前界面的方法
2019/06/19 Python
Flask配置Cors跨域的实现
2019/07/12 Python
pandas创建DataFrame的7种方法小结
2020/06/14 Python
澳大利亚儿童和婴儿产品在线商店:Lime Tree Kids
2017/10/05 全球购物
泰坦健身器材:Titan Fitness
2018/02/13 全球购物
日本快乐生活方式购物网站:Shop Japan
2018/07/17 全球购物
KIKO MILANO俄罗斯官网:意大利领先的化妆品和护肤品品牌
2021/01/09 全球购物
到底Java是如何传递参数的?是by value或by reference?
2012/07/13 面试题
出国留学经济担保书
2014/04/01 职场文书
企业员工集体活动方案
2014/08/17 职场文书