首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

解决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复选框重新勾选的问题方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

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

- Author -

黄宝康

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript mouseover、mouseout停止事件冒泡的解决方案
Apr 07 Javascript
javascript smipleChart 简单图标类
Jan 12 Javascript
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
Jan 25 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
Mar 13 Javascript
javascript跨域原因以及解决方案分享
Apr 08 Javascript
Bootstrap每天必学之响应式导航、轮播图
Apr 25 Javascript
Javascript单例模式的介绍和实例
Oct 08 Javascript
详解Angular2中Input和Output用法及示例
May 21 Javascript
详细讲解vue2+vuex+axios
May 27 Javascript
为什么要使用Vuex的介绍
Jan 19 Javascript
HTML+JavaScript实现扫雷小游戏
Sep 30 Javascript
微信小程序实现发微博功能的示例代码
Jun 24 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
毅力号(1) 国际空间站(1) 天问一号(1) 火星(2) 人造肉(1) 美国航天局(1) 塑料(1) 太空(1) NASA(1) 酶(1)
You might like
全国FM电台频率大全 - 28 甘肃省
2020/03/11 无线电
?算你??的 PHP 程式大小
2006/12/06 PHP
php获取本地图片文件并生成xml文件输出具体思路
2013/04/27 PHP
解析isset与is_null的区别
2013/08/09 PHP
php常用字符串处理函数实例分析
2014/11/22 PHP
详解WordPress开发中用于获取分类及子页面的函数用法
2016/01/08 PHP
在laravel中实现事务回滚的方法
2019/10/10 PHP
jquery 最简单的属性菜单
2009/10/08 Javascript
IE的有条件注释判定IE版本详解（附实例代码）
2012/01/04 Javascript
基于JavaScript实现通用tab选项卡(通用性强)
2016/01/07 Javascript
微信jssdk在iframe页面失效问题的解决措施
2016/03/03 Javascript
javascript原生ajax写法分享
2016/04/10 Javascript
js实现股票实时刷新数据案例
2017/05/14 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
2017/11/27 Javascript
webpack 代码分离优化快速指北
2019/05/18 Javascript
JS中封装axios来管控api的2种方式
2019/09/11 Javascript
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
2020/09/10 Javascript
基于openlayers实现角度测量功能
2020/09/28 Javascript
JavaScript实现雪花飘落效果
2020/12/27 Javascript
Python数据结构之Array用法实例
2014/10/09 Python
Python实现获取域名所用服务器的真实IP
2015/10/25 Python
python使用paramiko模块通过ssh2协议对交换机进行配置的方法
2019/07/25 Python
python可视化篇之流式数据监控的实现
2019/08/07 Python
使用Pycharm在运行过程中,查看每个变量的操作(show variables)
2020/06/08 Python
Python 字符串池化的前提
2020/07/03 Python
python 利用百度API识别图片文字（多线程版）
2020/12/14 Python
简单总结CSS3中视窗单位Viewport的常见用法
2016/02/04 HTML / CSS
详解css3使用transform出现字体模糊的解决办法
2020/10/16 HTML / CSS
Marks & Spencer爱尔兰：英国马莎百货
2016/04/20 全球购物
西雅图的买手店：Totokaelo
2019/10/19 全球购物
函授毕业生的自我鉴定
2013/11/26 职场文书
护士辞职信范文
2014/01/19 职场文书
庆元旦广播稿
2014/02/10 职场文书
我的理想演讲稿
2014/04/30 职场文书
vue实现同时设置多个倒计时
2021/05/20 Vue.js
Go Grpc Gateway兼容HTTP协议文档自动生成网关
2022/06/16 Golang