欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

解決Layui選擇全部,換頁checkbox復(fù)選框重新勾選的問題方法

 更新時(shí)間：2018年08月14日 12:06:19   作者：黃寶康  
今天小編就為大家分享一篇解決Layui選擇全部,換頁checkbox復(fù)選框重新勾選的問題方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧

在項(xiàng)目中發(fā)現(xiàn)layui數(shù)據(jù)表格勾選復(fù)選框checkbox的時(shí)候，轉(zhuǎn)到新的一頁勾選，上一次的勾選不會(huì)選中，即沒有記憶功能。導(dǎo)致跟后臺(tái)交互傳遞參數(shù)不全問題。

為了解決此問題，我們可以借助緩存，每勾選一個(gè)，保存到緩存變量數(shù)組中，取消勾選的時(shí)候，刪除緩存的對應(yīng)項(xiàng)。

<%@ 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="手機(jī)號(hào)"/>
     </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">&#xe615;</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();// 表格數(shù)據(jù)緩存
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;//窗口高度
 //監(jiān)聽改變窗口大小
 window.onresize = function(){
  h = document.body.clientHeight&&document.documentElement.clientHeight - 130;//窗口高度
  tableIns.reload('idTest',{height:h});//刷新數(shù)據(jù)表格
  //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; //將參與人員傳到父級(jí)輸入框 
  parent.document.getElementById("tels").value = tels;
  Close(window.name);//關(guān)閉彈窗

 });


 //監(jiān)聽搜索查詢
 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頁面
 });


 //方法級(jí)渲染
 var tableIns = window.demoTable = table.render({
  elem: '#idTest'
  ,id:'idTest'
  , url:'<%=path%>/partyMember/getPartyMembersContainChildren'
  , cols: [[ //標(biāo)題欄
   {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: '組織機(jī)構(gòu)', width: 280, align: 'center'}
   , {field: 'MOBILE_NO', title: '手機(jī)號(hào)', width: 220, align: 'center'}
   , {field: 'SEX', title: '性別', width: 80, align: 'center',templet:'#sexTpl'}
  ]]
  ,height:h
  , page: true //是否顯示分頁
  ,limits : [ 15, 20,50, 100 ]
  ,limit : 15 //每頁默認(rèn)顯示的數(shù)量
  ,done:function(res,curr,count){
   $('table tr').on('click',function(){
     $('table tr').css('background','');
     $(this).css('background','<%=PropKit.use("config.properties").get("table_color")%>');
    });
   // 設(shè)置換頁勾選之前的
   table_data = res.data;
   //在緩存中找到PM_CODE ,然后設(shè)置data表格中的選中狀態(tài)
   //循環(huán)所有數(shù)據(jù)，找出對應(yīng)關(guān)系，設(shè)置checkbox選中狀態(tài)
   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';
      //找到對應(yīng)數(shù)據(jù)改變勾選樣式，呈現(xiàn)出選中效果
      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');
     }
    }
   }
   //設(shè)置全選checkbox的選中狀態(tài)，只有改變LAY_CHECKED的值， table.checkStatus才能抓取到選中的狀態(tài)
   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');
   }


  }
 });

 //復(fù)選框選中監(jiān)聽,將選中的id 設(shè)置到緩存數(shù)組,或者刪除緩存數(shù)組
 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);
      }
     }
    }
   }
  }
 });

 //刪除數(shù)組自定義函數(shù)
 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
 }

 //監(jiān)聽排序
 table.on('sort(test)', function (obj) {
  console.log(this, obj.field, obj.type);
  return;
  table.reload('test', {
   initSort: obj
   , where: { //重新請求服務(wù)端
    key: obj.field //排序字段
    , order: obj.type //排序方式
   }
  });
 });

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

 //監(jiān)聽批量選擇
 var active = {
  isAll: function () { //驗(yàn)證是否全選
   var checkStatus = table.checkStatus('idTest');
   layer.msg(checkStatus.isAll ? '全選' : '未全選')
  }
 };
 element.init();

});
//關(guān)閉彈窗
function Close(windowname){
 var index = parent.layer.getFrameIndex(windowname);
 parent.layer.close(index);
} 

</script>
</html>

其中復(fù)選框勾選監(jiān)聽中的obj.type這個(gè)字段是layui自帶的。我從控制臺(tái)瀏覽器發(fā)現(xiàn)有這個(gè)字段。

勾選一個(gè)的時(shí)候，type為one，而且數(shù)據(jù)data里也會(huì)帶上LAY_CHECKED和LAY_TABLE_INDEX字段。

全選的時(shí)候type變成all

符：頁面效果圖

以上這篇解決Layui選擇全部,換頁checkbox復(fù)選框重新勾選的問題方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

  • Javascript中獲取對象的原型對象的方法小結(jié)

    Javascript中獲取對象的原型對象的方法小結(jié)

    這篇文章主要介紹了Javascript中獲取對象的原型對象的方法小結(jié),需要的朋友可以參考下
    2015-02-02
  • 最好用的二級(jí)聯(lián)動(dòng) 原生js實(shí)現(xiàn)你值得擁有

    最好用的二級(jí)聯(lián)動(dòng) 原生js實(shí)現(xiàn)你值得擁有

    二級(jí)聯(lián)動(dòng)效果,實(shí)現(xiàn)方法有很多,不過其他文章中介紹的都比較籠統(tǒng),在本文有一個(gè)詳細(xì)的實(shí)現(xiàn)過程,使用原生js很容易理解,希望大家可以參考下
    2013-09-09
  • 用chart.js添加動(dòng)態(tài)背景圖

    用chart.js添加動(dòng)態(tài)背景圖

    這篇文章主要為大家詳細(xì)介紹了用chart.js添加動(dòng)態(tài)背景圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2022-06-06
  • JS實(shí)現(xiàn)帶圓弧背景漸變效果的導(dǎo)航菜單代碼

    JS實(shí)現(xiàn)帶圓弧背景漸變效果的導(dǎo)航菜單代碼

    這篇文章主要介紹了JS實(shí)現(xiàn)帶圓弧背景漸變效果的導(dǎo)航菜單代碼,涉及JavaScript基于鼠標(biāo)事件操作頁面元素屬性的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2015-10-10
  • js簡單的表拖拽

    js簡單的表拖拽

    用js實(shí)現(xiàn)表格的拖拽效果代碼
    2008-05-05
  • JS?debug跳過的7種方法總結(jié)

    JS?debug跳過的7種方法總結(jié)

    在JS開發(fā)過程中,代碼可能存在一些語法或者邏輯上的錯(cuò)誤,導(dǎo)致程序不能得到我們想要的結(jié)果,這時(shí)就需要我們找到并修復(fù)這些錯(cuò)誤,我們將查找和修復(fù)錯(cuò)誤的過程稱為調(diào)試或代碼調(diào)試,這篇文章主要給大家介紹了關(guān)于JS?debug跳過的7種方法,需要的朋友可以參考下
    2023-07-07
  • Highcharts 多個(gè)Y軸動(dòng)態(tài)刷新數(shù)據(jù)的實(shí)現(xiàn)代碼

    Highcharts 多個(gè)Y軸動(dòng)態(tài)刷新數(shù)據(jù)的實(shí)現(xiàn)代碼

    下面小編就為大家?guī)硪黄狧ighcharts 多個(gè)Y軸動(dòng)態(tài)刷新數(shù)據(jù)的實(shí)現(xiàn)代碼。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2016-05-05
  • 讀懂CommonJS的模塊加載

    讀懂CommonJS的模塊加載

    這篇文章主要介紹了CommonJS的模塊加載，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-04-04
  • 利用hasOwnProperty給數(shù)組去重的面試題分享

    利用hasOwnProperty給數(shù)組去重的面試題分享

    obj.hasOwnProperty(attr) 判斷是否是原型中的屬性，false就是原型中的屬性，下面這篇文章主要給大家介紹了一道利用hasOwnProperty給數(shù)組去重的面試題，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下
    2018-11-11
  • JavaScript對象字面量和構(gòu)造函數(shù)原理與用法詳解

    JavaScript對象字面量和構(gòu)造函數(shù)原理與用法詳解

    這篇文章主要介紹了JavaScript對象字面量和構(gòu)造函數(shù),結(jié)合實(shí)例形式分析了JavaScript對象字面量和構(gòu)造函數(shù)相關(guān)概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下
    2020-04-04

最新評(píng)論