首页
所有分类
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 相关文章推荐
JQuery与JS里submit()的区别示例介绍
Feb 17 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
Mar 08 Javascript
Javascript基础教程之数据类型转换
Jan 18 Javascript
深入理解JavaScript系列（31）：设计模式之代理模式详解
Mar 03 Javascript
vue监听滚动事件实现滚动监听
Apr 11 Javascript
关于Angular2 + node接口调试的解决方案
May 28 Javascript
ES6新增数据结构WeakSet的用法详解
Aug 07 Javascript
浅谈node的事件机制
Oct 09 Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
Feb 07 Javascript
Javasript设计模式之链式调用详解
Apr 26 Javascript
浅析我对JS延迟异步脚本的思考
Oct 12 Javascript
详解实现vue的数据响应式原理
Jan 20 Vue.js
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
metaclass(1) IOC(3) Geospatial(1) 自动化(1) Hash(1) 数据类型(8) zip(1) XML(1) Bean(3) 触发器(3)
You might like
用PHP调用Oracle存储过程
2006/10/09 PHP
劣质的PHP代码简化
2010/02/08 PHP
Mac OS下配置PHP＋MySql环境
2015/02/25 PHP
Symfony2 session用法实例分析
2016/02/04 PHP
php提交表单时保留多个空格及换行的文本样式的方法
2017/06/20 PHP
jsTree树控件(基于jQuery, 超强悍)[推荐]
2009/09/01 Javascript
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
2010/11/11 Javascript
jqGrid随窗口大小变化自适应大小的示例代码
2013/12/28 Javascript
利用JS解决ie6不支持max-width,max-height问题的方法
2014/01/02 Javascript
基于CSS3和jQuery实现跟随鼠标方位的Hover特效
2016/07/25 Javascript
AngularJS 表达式详解及实例代码
2016/09/14 Javascript
Javascript 判断两个IP是否在同一网段实例代码
2016/11/28 Javascript
JS轮播图实现简单代码
2021/02/19 Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
2019/01/27 Javascript
js 实现ajax发送步骤过程详解
2019/07/25 Javascript
Element的el-tree控件后台数据结构的生成以及方法的抽取
2020/03/05 Javascript
[49:31]TFT vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
python文件读写并使用mysql批量插入示例分享(python操作mysql)
2014/02/17 Python
Python动态加载模块的3种方法
2014/11/22 Python
Python端口扫描简单程序
2016/11/10 Python
Pycharm无法使用已经安装Selenium的解决方法
2018/10/13 Python
python打包成so文件过程解析
2019/09/28 Python
SmartBuyGlasses德国：购买太阳镜和眼镜
2019/08/20 全球购物
Rowdy Gentleman服装和配饰：美好时光
2019/09/24 全球购物
俄罗斯连接商品和买家的在线平台：goods.ru
2020/11/30 全球购物
C语言基础笔试题
2013/04/27 面试题
大学团支书的自我评价分享
2013/12/14 职场文书
社区优秀志愿者材料
2014/02/02 职场文书
一年级班主任感言
2014/03/08 职场文书
大学生简历求职信
2014/06/24 职场文书
商业门面租房协议书
2014/11/25 职场文书
中秋联欢会主持词
2015/07/04 职场文书
入团申请书格式
2019/06/20 职场文书
Pytorch中Softmax和LogSoftmax的使用详解
2021/06/05 Python
叶县这家生产军用电台的兵工厂，人称“四机部”，走出一上将
2022/02/18 无线电
Python中itertools库的四个函数介绍
2022/04/06 Python