자기 개발하기

[jQuery/jQuery UI] Datepicker > 시작일과 종료일 입력시 선택 가능 범위 제한하기

조건

:: 시작일은 종료일 이후 날짜를 선택 할 수 없으며, 종료일은 시작일 이전의 날짜를 선택 할수 없다.

<%@ taglib prefix="fmt"  uri="http://java.sun.com/jsp/jstl/fmt"%><!-- 필수 -->

20170101 형식

<fmt:parseDate var="dateString" value="${sdt}" pattern="yyyyMMdd" />

2017.01.01 형식

<fmt:formatDate value="${dateString}" pattern="yyyy.MM.dd" />

20170101235959 형식으로 dateString에 담기. (년월일 시분초)

<fmt:parseDate var="dateString" value="${sdt}" pattern="yyyyMMddHHmmss" />

파싱후 문자열값: <fmt:formatDate value="${dateString}" pattern="yyyy.MM.dd HH:mm:ss" />

날짜 차이 계산

<c:set var="sdate" value="2017.01.15" />

<c:set var="edate" value="2017.01.22" />

<fmt:parseDate var="sDate" value="${sdate}" pattern="yyyy.MM.dd" />

값 확인 : <fmt:formatDate value="${sDate }"  pattern="yyyyMMdd" />

<fmt:parseNumber value="${sDate.time / (1000*60*60*24)}" integerOnly="true" var="sDays" scope="request" />

<fmt:parseDate var="eDate" value="${edate}" pattern="yyyy.MM.dd" />

값 확인 : <fmt:formatDate value="${eDate }"  pattern="yyyyMMdd" />

<fmt:parseNumber value="${eDate.time / (1000*60*60*24)}" integerOnly="true" var="eDays" scope="request" />

${eDays - sDays}일

출처 http://wlsufld.tistory.com/34

<input type="text" />

위와 같은 input 개체가 있을 때,

글 쓰지 못하게 막는 방법 중, 대표적으로 readonly 와 disabled 가 있다.

이 둘 모두 input 타입의 속성이다.

따라서 다음과 같이 사용할 수 있다.


using html

using script

comment : 'readonly' , 'disabled' 둘다 사용자의 입력을 하지 못하게 막는 기능은 동일하지만,

form 안에서 사용하였을 경우,

'readonly' 는 form 전송이 가능하지만,

'disabled' 는 form 전송시 값이 전달되지 않는다.


유의하기 바란다.

출처: http://jwizard.tistory.com/35

[JSTL empty , 빈값 비교 , 널값 체크]

JSTL empty

# 개요

 수업시간에는 정규식에 대해 깊이 생각해본적이 없었는데, 요즘 정말 활용분야가 다양하다는 걸 느끼고 있다.

Javascript에서 정규식을 이용하여 문자열에서 숫자만 추출해보도록 하자.

# 소스

# 주절주절

 간단하게 해석해보자면 [^0-9] 즉, 숫자가 아닌 부분을 "" 공백으로 치환함으로써 숫자만 남기는 것.

 얼마나 편리한지 허허.

출처: http://cy-baek.tistory.com/131 [한 처음에]

jquery 확인 취소 , 삭제하시겠습니까?

- jsp 단에서 모든 체크박스를 선택할 체박스를 제목줄에 만들어 준다. 

그리고 세부 체크박스들은 forEach 를 통해서 생기게 된다. 

모두체크 function : allChk()

삭제 function :fn_userDel()

 form : userForm

 =====================================================================================================

<thead> 

<tr>
       <th scope="col"><input id="allCheck" type="checkbox" onclick="allChk(this);"/></th>
       <th scope="col">사용자ID</th>
       <th scope="col">사용자명</th>
       <th scope="col">부서명</th>
       <th scope="col">직급</th>
       <th scope="col">E-mail</th>
       <th scope="col">사용여부</th> 

</tr>

<tbody> 
      <c:forEach var="result" items="${requestMap.userList}" >
       <tr >
            <td class="text_ct"><input name="RowCheck" type="checkbox" value="${result.user_id}"/></td>
            <td class="text_ct"><a hrf="#">${result.user_id}</a></td>
            <td class="text_lt text_unline"><a hrf="#"> ${result.user_nm}&nbsp; </a></td>
            <td class="text_ct">${result.duty}&nbsp;</td>
            <td class="text_ct">${result.position_nm}&nbsp;</td>
            <td class="text_ct">${result.email}&nbsp;</td>
            <td class="text_ct">활성</td> 
       </tr>
      </c:forEach> 

</tbody>   

=======================================================================================================

<script type="text/javascript">

// 1.모두 체크
  function allChk(obj){
      var chkObj = document.getElementsByName("RowCheck");
      var rowCnt = chkObj.length - 1;
      var check = obj.checked;
      if (check) {
          for (var i=0; i<=rowCnt; i++){
           if(chkObj[i].type == "checkbox")
               chkObj[i].checked = true; 
          }
      } else {
          for (var i=0; i<=rowCnt; i++) {
           if(chkObj[i].type == "checkbox"){
               chkObj[i].checked = false; 
           }
          }
      }
  } 

//2. 체크박스 선택된 것 삭제 처리 (N개) 
   function fn_userDel(){

  var userid = "";
  var memberChk = document.getElementsByName("RowCheck");
  var chked = false;
  var indexid = false;
  for(i=0; i < memberChk.length; i++){
   if(memberChk[i].checked){
    if(indexid){
      userid = userid + '-';
    }
    userid = userid + memberChk[i].value;
    indexid = true;
   }
  }
  if(!indexid){
   alert("삭제할 사용자를 체크해 주세요");
   return;
  }
  document.userForm.delUserid.value = userid;       // 체크된 사용자 아이디를 '-'로 묶은 userid 를     

                                                                              document.userForm.delUserid 의 value로 저장 
  
  var agree=confirm("삭제 하시겠습니까?");
     if (agree){
   document.userForm.execute.value = "userDel";
     document.userForm.submit();
     } 
  }

</script> 

모두체크 하는 function은 그대로 이용이 가능하지만

선택 삭제 하는 function은 jsp form 이름을 바꿔줘야 한다.

그리고 RowCheck 의 value값은 해당 체크박스를 고유하게 식별할 수 있는 값이 들어가야 한다. (예를들어 사용자의 아이디값) 

 document.userForm.submit();   으로 submit을 하여 '-' 로 묶인 userid가  delUserid 이름으로 자바단으로 넘어가게 된다.

================== JAVA 단 ======================

public void userDel(Map requestMap) throws Exception {
  
  String delUser = requestMap.get(Management.DEL_USER).toString();
  System.out.println("Service ======= delUser>>" + delUser);
  
  String[] userArr = delUser.split("-");                     // '-'로 연결된 userid를 split으로 잘라 배열에 넣음.
  
     if(userArr != null && userArr.length>0){
       for(int i=0 ; i<userArr.length ; i++){ 
        requestMap.put(Parameter.USER_ID , userArr[i]);
        System.out.println("==============    "+i +"번째 userid ==  " + requestMap.get(Parameter.USER_ID));
        manageDao.userDel(requestMap);
       }
     }  
 }

jQuery checkbox 컨트롤

1. checkbox checked 여부 :

id인 경우 : $('input:checkbox[id="checkbox_id"]').is(":checked") == true

name인 경우 : $('input:checkbox[name="checkbox_name"]').is(":checked") ==  true

=>  $('input[id="checkbox_id"]') + 옵션 형태로 작성 해도 문제는 없다

Ex) $('input[name="checkbox_name"]').is(":checked")

2. checkbox 전체 갯수 : $('input:checkbox[name="checkbox_name"]').length

3. checkbox 선택된 갯수 : $('input:checkbox[name="checkbox_name"]:checked').length

* 2,3번은 name 인 경우에만 가능

4. checkbox 전체 순회 하며 처리(동일한 name으로 여래개인 경우 전체를 컨트롤 할 수 있다.)

 $('input:checkbox[name="checkbox_name"]').each(function() {

      this.checked = true; //checked 처리

      if(this.checked){//checked 처리된 항목의 값

            alert(this.value); 

      }

 });

5. checkbox 전체 순회 하며 값을 값을 비교하여 checked 처리

 $('input:checkbox[name="checkbox_name"]').each(function() {

     if(this.value == "비교값"){ //값 비교

            this.checked = true; //checked 처리

      }

 });

* 동일한 name 으로 1개 or 여러개 있을 경우에는 같은 name 으로 된 모든 checkbox 가 checked 처리된다.

6. checkbox value 값 가져오기 :  $('input:checkbox[id="checkbox_id"]').val(); //단일건

7. checkbox checked 처리 하기 : $('input:checkbox[id="checkbox_id"]').attr("checked", true); //단일건

8. checkbox checked 여부 간단 확인: $("#checkbox_id"]').is(":checked"); //단일건

=== Reference ===

* 만약 해당 id, name이 존재하지 않더라도 javascript 에러가 발생하지 않는다.

출처: https://openlife.tistory.com/381 [농사짓는 개발자]

jquery checkbox 접근 순회하기,

on change 사용하기

checkbox  전체개수, 선택된 개수 구하기