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下字符串连接的性能
Mar 05 Javascript
基于jquery & json的省市区联动代码
Jun 26 Javascript
jquery1.83 之前所有与异步列队相关的模块详细介绍
Nov 13 Javascript
浏览器的JavaScript引擎的识别方法
Oct 20 Javascript
input禁止键盘及中文输入,但可以点击
Feb 13 Javascript
详解JavaScript中循环控制语句的用法
Jun 03 Javascript
Bootstrap前端开发案例一
Jun 17 Javascript
拖动时防止选中
Feb 03 Javascript
Vue列表页渲染优化详解
Jul 24 Javascript
Node.js 的模块知识汇总
Aug 16 Javascript
Bootstrap框架建立树形菜单(Tree)的实例代码
Oct 30 Javascript
Vue动态加载异步组件的方法
Nov 21 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结合表单实现一些简单功能的例子
2011/06/04 PHP
thinkPHP连接sqlite3数据库的实现方法(附Thinkphp代码生成器下载)
2016/05/27 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
laravel validate 设置为中文的例子(验证提示为中文)
2019/09/29 PHP
js修改input的type属性及浏览器兼容问题探讨与解决
2013/01/23 Javascript
JS实现QQ图片一闪一闪的效果小例子
2013/07/31 Javascript
jQuery实现table隔行换色和鼠标经过变色的两种方法
2014/06/15 Javascript
JavaScript 常见安全漏洞和自动化检测技术
2015/08/21 Javascript
jQuery+Ajax实现无刷新分页
2015/10/30 Javascript
JavaScript使用readAsDataUrl方法预览图片
2017/05/10 Javascript
利用纯JS实现像素逐渐显示的方法示例
2017/08/14 Javascript
js单页hash路由原理与应用实战详解
2017/08/14 Javascript
vue中appear的用法
2017/08/17 Javascript
[js高手之路]寄生组合式继承的优势详解
2017/08/28 Javascript
jQuery实现表单动态添加数据并提交的方法
2018/07/19 jQuery
vue微信分享插件使用方法详解
2020/02/18 Javascript
SpringBoot+Vue 前后端合并部署的配置方法
2020/12/30 Vue.js
在Python中操作列表之List.pop()方法的使用
2015/05/21 Python
Python模拟登录验证码(代码简单)
2016/02/06 Python
Python利用BeautifulSoup解析Html的方法示例
2017/07/30 Python
python 重命名轴索引的方法
2018/11/10 Python
将Python字符串生成PDF的实例代码详解
2019/05/17 Python
利用anaconda作为python的依赖库管理方法
2019/08/13 Python
python实现递归查找某个路径下所有文件中的中文字符
2019/08/31 Python
Python小程序之在图片上加入数字的代码
2019/11/26 Python
春节到了 教你使用python来抢票回家
2020/01/06 Python
pyqt5数据库使用详细教程(打包解决方案)
2020/03/25 Python
python包的导入方式总结
2021/03/02 Python
财务助理岗位职责
2013/11/10 职场文书
医院合作协议书
2014/08/19 职场文书
关于随地扔垃圾的检讨书
2014/09/30 职场文书
搞笑的爱情检讨书
2014/10/01 职场文书
违反学校规则制度检讨书
2015/01/01 职场文书
创业计划书之餐饮
2019/09/02 职场文书
利用Pycharm连接服务器的全过程记录
2021/07/01 Python
vue项目打包后路由错误的解决方法
2022/04/13 Vue.js