Layui 가 모든 것 을 선택 하고 페이지 를 바 꾸 는 checkbox 체크 상자 에서 다시 선택 하 는 문제 해결 방법

12414 단어 Layuicheckbox콤 보 상자
항목 에서 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">&#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();//       
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 가 자체 적 으로 가지 고 있 습 니 다.나 는 콘 솔 브 라 우 저 에서 이 필드 가 있 는 것 을 발견 했다.

하 나 를 선택 할 때 type 은 one 이 고 데이터 data 에 도 LAY 가 들 어 갑 니 다.CHECKED 와 LAYTABLE_INDEX 필드.
모두 선택 할 때 type 이 all 로 변 합 니 다.

부적:페이지 효과 도

이상 Layui 가 모든 것 을 선택 하고 페이지 를 바 꾸 는 checkbox 체크 상자 에서 다시 선택 하 는 문 제 를 해결 하 는 방법 은 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.참고 하 시기 바 랍 니 다.여러분 들 도 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
layui 탐색 표시 줄 을 누 르 면 tab 페이지 의 예제 코드 를 새로 고 칩 니 다.
js 에서 apply()와 call()의 차이 와 용법 사례 분석

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage