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 相关文章推荐
破解Session cookie的方法
Jul 28 Javascript
JQuery 简便实现页面元素数据验证功能
Mar 24 Javascript
Google AJAX 搜索 API实现代码
Nov 17 Javascript
js onclick事件传参讲解
Nov 06 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
Sep 08 Javascript
Bootstrap布局之栅格系统学习笔记
May 04 Javascript
Angular 4依赖注入学习教程之组件服务注入(二)
Jun 04 Javascript
vue自定义全局组件(自定义插件)的用法
Jan 30 Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
Jul 02 Javascript
微信小程序登录session的使用
Mar 17 Javascript
JS常用跨域方法实现原理解析
Dec 09 Javascript
vue实现可拖拽的dialog弹框
May 13 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的输入输出流
2007/02/14 PHP
PHP删除特定数组内容并且重建数组索引的方法.
2011/03/25 PHP
php 可变函数使用小结
2018/06/12 PHP
Add a Formatted Table to a Word Document
2007/06/15 Javascript
javascript 日期时间函数(经典+完善+实用)
2009/05/27 Javascript
学习javascript,实现插入排序实现代码
2011/07/31 Javascript
js使用函数绑定技术改变事件处理程序的作用域
2011/12/26 Javascript
关于编写性能高效的javascript事件的技术
2014/11/28 Javascript
Javascript非构造函数的继承
2015/04/27 Javascript
JavaScript事件委托实例分析
2015/05/26 Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
2015/08/23 Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
2015/10/10 Javascript
jQuery组件easyui基本布局实现代码
2016/08/25 Javascript
原生js实现日期计算器功能
2017/02/17 Javascript
使用vue的v-for生成table并给table加上序号的实例代码
2017/10/27 Javascript
动态加载、移除js/css文件的示例代码
2018/03/20 Javascript
JavaScript实现一个简易的计算器实例代码
2018/05/10 Javascript
javascript实现自由编辑图片代码详解
2019/06/21 Javascript
vue 开发企业微信整合案例分析
2019/12/02 Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
2020/02/27 Javascript
Python利用BeautifulSoup解析Html的方法示例
2017/07/30 Python
取numpy数组的某几行某几列方法
2018/04/03 Python
使用urllib库的urlretrieve()方法下载网络文件到本地的方法
2018/12/19 Python
获取django框架orm query执行的sql语句实现方法分析
2019/06/20 Python
pytorch 在sequential中使用view来reshape的例子
2019/08/20 Python
tensorflow 查看梯度方式
2020/02/04 Python
PyCharm永久激活方式(推荐)
2020/09/22 Python
jupyter notebook 多行输出实例
2020/04/09 Python
python中format函数如何使用
2020/06/22 Python
使用 prometheus python 库编写自定义指标的方法(完整代码)
2020/06/29 Python
python-地图可视化组件folium的操作
2020/12/14 Python
一款纯css3实现的tab选项卡的实列教程
2014/12/11 HTML / CSS
运动鞋中的劳斯莱斯:索康尼(SAUCONY)
2017/08/09 全球购物
企业法人授权委托书
2014/09/25 职场文书
2015年幼儿园学期工作总结
2015/05/22 职场文书
JavaScript小技巧带你提升你的代码技能
2021/09/15 Javascript