解决Layui选择全部,换页checkbox复选框重新勾选的问题方法


Posted in Javascript onAugust 14, 2018

在项目中发现layui数据表格勾选复选框checkbox的时候,转到新的一页勾选,上一次的勾选不会选中,即没有记忆功能。导致跟后台交互传递参数不全问题。

为了解决此问题,我们可以借助缓存,每勾选一个,保存到缓存变量数组中,取消勾选的时候,删除缓存的对应项。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="com.jfinal.kit.PropKit" %>
<%@ page import="com.jfinal.kit.PropKit" %>
<%
 String path = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- 引入公共css,js -->
<jsp:include page="/resource/jspf/include_common.jsp"></jsp:include>
<!-- 引入自定义css -->
<style type="text/css">
.layui-table-view .layui-form-checkbox[lay-skin=primary] i{margin-top:6px;}
.bo{border:1px solid;}
/* .imgs{border:1px solid;width:200px;height:300px;position:fixed;/* display:none; */} */
</style>
<title>提醒党员</title>
</head>
<body style="margin-top:5px;">
<div class="layui-fluid">
 <form class="layui-form layui-fluid" action="">
  <div class="layui-row">
   <div class="layui-form-item layui-col-md12">
    <div class="layui-row hei" style="width:90%;margin:0 auto;">
     <div class="layui-col-md2 layui-col-md-offset1 layui-input-inline"><!-- style="margin-left:15%" -->
      <input type="text" name="pmName" class="layui-input" placeholder="党员姓名"/>
     </div>
     <div class="layui-col-md2 layui-input-inline">
      <input type="text" name="phone" class="layui-input" placeholder="手机号"/>
     </div>
     <div class="layui-col-md2 layui-input-inline">
      <input type="text" name="org_name" class="layui-input" placeholder="所在组织"/>
     </div>
     <div class="layui-col-md3">
      <input type="button" class="layui-btn zh-btn" lay-submit="" lay-filter="chaxun" btn-search value="查询" />
      <input type="button" class="layui-btn zh-btn" btn-renovate value="刷新" />
     </div>
    </div>

   </div>
  </div>
 </form>
 <div class="layui-row">
  <div class="layui-col-md12">
   <xblock class="xb">
    <button class="layui-btn" btn-confirm><i class="layui-icon"></i>确定党员
    </button>
   </xblock>
   <table id="idTest" lay-data="{id: 'idTest'}" class="layui-table" lay-filter="test"></div></table>
   <div id="page"></div>
  </div>
 </div>
</div>
<script type="text/html" id="sexTpl">
{{# if(d.SEX ==0){ }}
  女
{{# } else { }}
 男
{{# } }}
</script>
<script type="text/html" id="imgTpl">
 {{# if(d.HEAD_URL == null){ }}
  <img class="img_ra" src="<%=path%>/resource/images/default.jpg" width="32" height="32"/>
 {{# } else { }}
 <a href='{{d.HEAD_URL}}' target="_blank"><img src='{{d.HEAD_URL}}' width="32" height="32"/></a>
 {{# } }}
</script>
</body>
<script type="text/javascript">

var gloable_pm_codes = new Array();// 勾选的pm_code集合
var gloable_pm_names = new Array();
var gloable_tels = new Array();
var table_data = new Array();// 表格数据缓存
layui.use(['table', 'layer','jquery','laydate','form','element'], function () {
 var layer = layui.layer
   ,form = layui.form
   ,table = layui.table
   ,layer = layui.layer
   ,laydate = layui.laydate
   ,element = layui.element
   , $ = layui.jquery; 

 var h = document.body.clientHeight&&document.documentElement.clientHeight - 130;//窗口高度
 //监听改变窗口大小
 window.onresize = function(){
  h = document.body.clientHeight&&document.documentElement.clientHeight - 130;//窗口高度
  tableIns.reload('idTest',{height:h});//刷新数据表格
  //window.location.reload(); //刷新iframe页面
 }

 //确定选择的党员
 $('button[btn-confirm]').on('click',function(){ 
  var checkStatus = table.checkStatus('idTest')
  ,data = checkStatus.data; //选中信息
  var str=""; //参与人姓名拼串
  var tels="";
  if(gloable_pm_codes.length==0){
   layer.alert("请选择提醒党员");
   return;
  }
  for(var i=0;i<gloable_pm_codes.length;i++){
   if(i<gloable_pm_codes.length-1){
    str += gloable_pm_names[i]+",";
    tels += gloable_tels[i]+",";
   }else{
    str += gloable_pm_names[i];
    tels += gloable_tels[i];
   }
  }
  parent.document.getElementById("joinpm").value=str; //将参与人员传到父级输入框 
  parent.document.getElementById("tels").value = tels;
  Close(window.name);//关闭弹窗

 });


 //监听搜索查询
 form.on('submit(chaxun)', function(data){
  var name = data.field.pmName;
  var phone = data.field.phone;
  var org_name = data.field.org_name;
  tableIns.reload({
   page:{
    curr:1// 重新从第一页开始
   }
   ,where:{
    name : name,
    phone : phone,
    org_name : org_name
   }
   });

 });

 //刷新
 $('input[btn-renovate]').on('click',function(){ //部分参与
  window.location.reload(); //刷新iframe页面
 });


 //方法级渲染
 var tableIns = window.demoTable = table.render({
  elem: '#idTest'
  ,id:'idTest'
  , url:'<%=path%>/partyMember/getPartyMembersContainChildren'
  , cols: [[ //标题栏
   {checkbox: true, LAY_CHECKED: false, filter:'test'}
   ,{field: 'HEAD_URL', title: '头像', width: 100, align: 'center',templet:'#imgTpl'}
   , {field: 'NAME', title: '党员姓名', width: 180, align: 'center'}
   , {field: 'ORG_NAME', title: '组织机构', width: 280, align: 'center'}
   , {field: 'MOBILE_NO', title: '手机号', width: 220, align: 'center'}
   , {field: 'SEX', title: '性别', width: 80, align: 'center',templet:'#sexTpl'}
  ]]
  ,height:h
  , page: true //是否显示分页
  ,limits : [ 15, 20,50, 100 ]
  ,limit : 15 //每页默认显示的数量
  ,done:function(res,curr,count){
   $('table tr').on('click',function(){
     $('table tr').css('background','');
     $(this).css('background','<%=PropKit.use("config.properties").get("table_color")%>');
    });
   // 设置换页勾选之前的
   table_data = res.data;
   //在缓存中找到PM_CODE ,然后设置data表格中的选中状态
   //循环所有数据,找出对应关系,设置checkbox选中状态
   for(var i=0;i<res.data.length;i++){
    for(var j=0;j<gloable_pm_codes.length;j++){
     if(res.data[i].PM_CODE==gloable_pm_codes[j]){
      //这里才是真正的有效勾选
      res.data[i]["LAY_CHECKED"]='true';
      //找到对应数据改变勾选样式,呈现出选中效果
      var index= res.data[i]['LAY_TABLE_INDEX'];
      $('.layui-table tr[data-index=' + index + '] input[type="checkbox"]').prop('checked', true);
      $('.layui-table tr[data-index=' + index + '] input[type="checkbox"]').next().addClass('layui-form-checked');
     }
    }
   }
   //设置全选checkbox的选中状态,只有改变LAY_CHECKED的值, table.checkStatus才能抓取到选中的状态
   var checkStatus = table.checkStatus('test');
   if(checkStatus.isAll){
    $(' .layui-table-header th[data-field="0"] input[type="checkbox"]').prop('checked', true);
    $('.layui-table-header th[data-field="0"] input[type="checkbox"]').next().addClass('layui-form-checked');
   }


  }
 });

 //复选框选中监听,将选中的id 设置到缓存数组,或者删除缓存数组
 table.on('checkbox(test)', function (obj) {
  console.log(obj);
  if(obj.checked==true){
   if(obj.type=='one'){
    gloable_pm_codes.push(obj.data.PM_CODE);
    gloable_pm_names.push(obj.data.NAME);
    gloable_tels.push(obj.data.MOBILE_NO);
   }else{
    for(var i=0;i<table_data.length;i++){
     gloable_pm_codes.push(table_data[i].PM_CODE);
     gloable_pm_names.push(table_data[i].NAME);
     gloable_tels.push(table_data[i].MOBILE_NO);
    }
   }
  }else{
   if(obj.type=='one'){
    for(var i=0;i<gloable_pm_codes.length;i++){
     if(gloable_pm_codes[i]==obj.data.PM_CODE){
      gloable_pm_codes.remove(i);
      gloable_pm_names.remove(i);
      gloable_tels.remove(i);
     }
    }
   }else{
    for(var i=0;i<gloable_pm_codes.length;i++){
     for(var j=0;j<table_data.length;j++){
      if(gloable_pm_codes[i]==table_data[j].PM_CODE){
       gloable_pm_codes.remove(i);
       gloable_pm_names.remove(i);
       gloable_tels.remove(i);
      }
     }
    }
   }
  }
 });

 //删除数组自定义函数
 Array.prototype.remove=function(dx)
 {
  if(isNaN(dx)||dx>this.length){return false;}
  for(var i=0,n=0;i<this.length;i++)
  {
   if(this[i]!=this[dx])
   {
    this[n++]=this[i]
   }
  }
  this.length-=1
 }

 //监听排序
 table.on('sort(test)', function (obj) {
  console.log(this, obj.field, obj.type);
  return;
  table.reload('test', {
   initSort: obj
   , where: { //重新请求服务端
    key: obj.field //排序字段
    , order: obj.type //排序方式
   }
  });
 });

 $('.layui-btn').on('click', function () {
  var type = $(this).data('type');
  active[type] ? active[type].call(this) : '';
 });

 //监听批量选择
 var active = {
  isAll: function () { //验证是否全选
   var checkStatus = table.checkStatus('idTest');
   layer.msg(checkStatus.isAll ? '全选' : '未全选')
  }
 };
 element.init();

});
//关闭弹窗
function Close(windowname){
 var index = parent.layer.getFrameIndex(windowname);
 parent.layer.close(index);
} 

</script>
</html>

其中复选框勾选监听中的obj.type这个字段是layui自带的。我从控制台浏览器发现有这个字段。

解决Layui选择全部,换页checkbox复选框重新勾选的问题方法

勾选一个的时候,type为one,而且数据data里也会带上LAY_CHECKED和LAY_TABLE_INDEX字段。

全选的时候type变成all

解决Layui选择全部,换页checkbox复选框重新勾选的问题方法

符:页面效果图

解决Layui选择全部,换页checkbox复选框重新勾选的问题方法

以上这篇解决Layui选择全部,换页checkbox复选框重新勾选的问题方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE6下opacity与JQuery的奇妙结合
Mar 01 Javascript
JavaScript设计模式之建造者模式介绍
Dec 28 Javascript
jquery实现通用的内容渐显Tab选项卡效果
Sep 07 Javascript
JavaScript面试题(指针、帽子和女朋友)
Nov 23 Javascript
如何使用headjs来管理和异步加载js
Nov 29 Javascript
js实现百度搜索提示框
Feb 05 Javascript
Vue.js组件通信的几种姿势
Oct 23 Javascript
JavaScript累加、迭代、穷举、递归等常用算法实例小结
May 08 Javascript
Vue2 监听属性改变watch的实例代码
Aug 27 Javascript
Vue 表情包输入组件的实现代码
Jan 21 Javascript
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
Jun 04 Javascript
详解JS预解析原理
Jun 16 Javascript
js中apply()和call()的区别与用法实例分析
Aug 14 #Javascript
JS通过位运算实现权限加解密
Aug 14 #Javascript
js中getter和setter用法实例分析
Aug 14 #Javascript
JS中‘hello’与new String(‘hello’)引出的问题详解
Aug 14 #Javascript
Vue.js单向绑定和双向绑定实例分析
Aug 14 #Javascript
微信小程序异步API为Promise简化异步编程的操作方法
Aug 14 #Javascript
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 #jQuery
You might like
PHP strtotime函数详解
2009/12/18 PHP
浅谈php中mysql与mysqli的区别分析
2013/06/10 PHP
PHP图片处理之图片旋转和图片翻转实例
2014/11/19 PHP
js动态往表格的td中添加图片并注册事件
2014/06/12 Javascript
javascript正则表达式定义(语法)总结
2016/01/08 Javascript
js中遍历Map对象的简单实例
2016/08/08 Javascript
AngularJS通过$location获取及改变当前页面的URL
2016/09/23 Javascript
canvas实现图像截取功能
2017/02/06 Javascript
AngularJS的Filter的示例详解
2017/03/07 Javascript
Vue2递归组件实现树形菜单
2017/04/10 Javascript
JS身份证信息验证正则表达式
2017/06/12 Javascript
Vue2 配置 Axios api 接口调用文件的方法
2017/11/13 Javascript
浅谈node模块与npm包管理工具
2018/01/03 Javascript
Vue 实现树形视图数据功能
2018/05/07 Javascript
angularjs手动识别字符串中的换行符方法
2018/10/02 Javascript
nodejs一个简单的文件服务器的创建方法
2019/09/13 NodeJs
layui的layedit富文本赋值方法
2019/09/18 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
2020/07/27 Javascript
Python中正则表达式的用法实例汇总
2014/08/18 Python
Python使用googletrans报错的解决方法
2018/09/25 Python
Python之inspect模块实现获取加载模块路径的方法
2018/10/16 Python
利用Python模拟登录pastebin.com的实现方法
2019/07/12 Python
python中删除某个元素的方法解析
2019/11/05 Python
Python Scrapy框架第一个入门程序示例
2020/02/05 Python
浅谈keras中Dropout在预测过程中是否仍要起作用
2020/07/09 Python
Python读取yaml文件的详细教程
2020/07/21 Python
浅谈CSS3中display属性的Flex布局的方法
2017/08/14 HTML / CSS
详解HTML5中CSS外观属性
2020/09/10 HTML / CSS
纽约手袋品牌:KARA
2018/03/18 全球购物
FragranceNet中文网:北美健康美容线上零售商
2020/08/26 全球购物
广州盈通面试题
2015/12/05 面试题
师范应届生求职信
2013/11/15 职场文书
庆元旦迎新年广播稿
2014/02/18 职场文书
2014年驻村干部工作总结
2014/11/17 职场文书
给学校的建议书400字
2015/09/14 职场文书
如何理解及使用Python闭包
2021/06/01 Python