Egov Sptring 페이지 이동 시 체크박스 체크 리스트 저장 및 기억하기 JavaScript 예시

<td  onclick="fncPageMove('update','${result.elSeq}')">
	<c:out value="${empty result.rgstDt ? '-' : result.rgstDt }"/>
</td>    


<a href="javascript:void(0);" class="btn btn_middle btn_blue" onclick="fncPageMove('write','insertForm.do');">등록</a>

1. fncPageMove 함수 호출

2. 첫번째 인자가 'update' 일경우 수정, 'insert' 일경우 해당 Form 을 열도록 한다.

<%-- 페이지 이동 함수 --%>
function fncPageMove(proc, seq){
	
	var url = ""; 
	if(proc){ 
		if(proc == "write"){
			url = "insertForm.do";
			
		}else if(proc == "update"){
			url = "updateForm.do";
		}   
	} 
	<%-- 체크리스트 전송 --%>
	$("#schEtc04").val(checkedArray);
	fncPageBoard(proc, url, seq,'elSeq');
}

3. fncPageMove 함수 선언

4. 첫 번째 인자로 입력과 수정 상태를 구분한다.

5. 두 번째 인자로 수정일 경우 게시글 고유 SEQ 를 전달한다.

6. 체크 박스 체크 리스트 배열을 <input type="text" id="schEtc04"> 에 담아 그대로 전송한다.

 7. 체크박스의 id 값들이 전부 전달되어 VO 내부에 값을 저장하도록 한다.

8. 기존 글에서 목록 버튼을 눌러 뒤로 갔을 시에도 체크 박스의 값을 계속 가지고 있다.

@RequestMapping(folderPath + "{procType}Form.do") 
public String form(@ModelAttribute("searchVO") Et01VO searchVO, ModelMap model, @PathVariable String procType) throws Exception {

}

9. 이는 Controller 에서 @ModelAttribute("변수명") 어노테이션이 선언되어 있어 다음으로 값을 자동으로 전달하기에 가능하다.

$(function(){   
	/* 체크 박스 */   
	if($("#schEtc04").val()){     
		checkedArray = $("#schEtc04").val().split(",");
	}
	
	if(checkedArray.length > 0){
		for(var i = 0; i < checkedArray.length; i++){   
			var id = checkedArray[i];     
			$("#" + id).prop("checked", true); 
		}           
		fncCheckLength();     
		return false;       
	}
})

10. 목록버튼을 눌러 다시 목록화면으로 돌아갔을 시 schEtc04 의 값을 읽는다.

11. 값이 존재한다면 해당 문자열을 콤마 기준으로 잘라 다시 배열로 만든 후 그 값들을 전부 체크하도록 한다.

<%-- 체크박스 배열 값 전송 --%>  
<input type="hidden" id="schEtc04" name="schEtc04" value="${searchVO.schEtc04 }"/>

12. 값을 전달 받을 수 있도록 JSTL 을 활용하여 value 값이 들어올 수 있도록 한다.