FE/JSP

[JSP] 게시판 체크박스 다중삭제 구현 (JQuery,Ajax)

ユーク 2024. 3. 12. 15:52

" 게시판에 체크박스(input) 선택 후 삭제버튼 클릭 시 선택된 게시글만 삭제되는 서비스를 만들기 "

※ 조건 : JAVA에서 FOR문을 사용하지 않고 구현

 

1. HTML (JSP)

<div>
<table border="1">
	<thead>
		<tr>
			<td><input type="checkbox" id="selectAll"></td>
			<td>글번호</td>
			<td>글제목</td>
			<td>글쓴이</td>
			<td>작성일시</td>
		</tr>
	</thead>
</div>
<div>
<table border="1">
	<tbody id="tb" name="tb">
		<c:forEach var="dto" items="${BoardList }">
			<tr>
				<td><input type="checkbox" name="selectOne" id="num" value="${dto.num }"></td>
				<td>${dto.num }</td>
				<td><a href="./boardDetail.do?num=${dto.num }">${dto.title }</a></td>
				<td>${dto.name }</td>
				<td>${dto.regdate }</td>
			<tr>
		</c:forEach>
	</tbody>
	<tfoot>
			<tr>
				<td><input type="button" value="삭제" id="delete"></td>
			</tr>
	</tfoot>
</table>
</div>

 

※ 구현할 기능

1. 전체선택 : #selectAll 클릭 시 하단 게시판의 selectOne이 모두 선택되도록 JQuery로 구현
2. 전체선택 해제 : 만일 전체선택 상태에서 한개라도 체크가 풀릴경우 #selectAll의 체크상태 해제
3. 선택삭제 : selectOne에 체크 후 삭제버튼(#delete) 클릭 시 선택된 selectOne만 삭제됨
4. db에서 한번에 데이터 삭제하기

 

1. 전체선택

$("#selectAll").click(function(){
	if($("#selectAll").is(":checked")) {
		$('input[name=selectOne]').prop("checked",true);
	}else {
		$('input[name=selectOne]').prop("checked", false);
	}
});

 

= #selectAll 클릭했을 때, 만약 #selectAll이 checked 된 상태라면 selectOne을 체크상태로 만들고

   그렇지 않으면 selectOne을 체크해제 시킨다.

is(":checked") : check 선택 여부 확인시 사용 prop() : JavaScipt로 수정된 요소의 값을 가지고 올 때 사용

 

2. 전체선택 해제

$("input[name=selectOne]").click(function(){
		var total = $("input[name=selectOne]").length;
		var cnt = $("input[name=selectOne]:checked").length;
		
		if(total !=cnt){
			$("#selectAll").prop("checked", false);
		}else {
			$("#selectAll").prop("checked", true);
		}
});

 

= input의 이름이 selectOne인 객체를 클릭했을 때 (total 변수 : 해당 객체의 개수, cnt 변수 : 선택된 객체의 개수)

  total의 갯수와 cnt의 개수가 맞지 않다면 #selectAll의 선택을 해제하고, 그렇지 않으면 checked상태를 유지한다.

 

3. 선택삭제 (JQuery-Ajax)

$("#delete").click(function(){
 	var arr = [];
 	var cnt = $('input[name=selectOne]:checked').length;
 	var num = $('input[name=selectOne]:checked').val();
 	
    // 1. 선택값이 없을 때
 	if(cnt==0){
 		 alert("선택된 글이 없습니다.");
 		 return;
 	}
 		
    // 2. 체크박스 값 담기 (배열에 push)
 	$('input[name=selectOne]:checked').each(function(){
 	 	arr.push($(this).val());
 	 	console.log(arr);
 	});  
	
    // 3. 글 삭제
	if(confirm("글을 삭제하시겠습니까?")) {
		$.ajax({
			traditional : true,
			type: "POST",
			url : "/boardDelete.do",
			data : {num:arr},
			success : function() {
				alert("글이 삭제되었습니다.");
				location.replace("/main.do")
				},
			error : function() {
				alert("글 삭제에 실패하였습니다.");
				}
			});
		};
 });
// 1. 선택값이 없을 때 : cnt(선택항목 갯수)가 0개라면 alert 실행
// 2. 체크박스 값 담기 : 체크된 항목(this)의 값을 반복하여 배열에 push하고 콘솔창에서 확인하기
// 3. 글 삭제 : 삭제버튼 클릭 시 "글을 삭제하시겠습니까?" 창이 뜨면서 확인을 눌렀을 때 성공했다면 success가 실행, 실패했다면 error가 실행된다. POST형식으로 컨트롤러에 매핑되어있는 URL 실행, data는 num에 배열을 담아보낸다.

( tranditional : true = ajax 통신 시 화면에서 서버로 배열을 직렬화하여 넘길때 사용, 꼭 넣어주기!)
※ 변수
arr : 배열(=new array()), cnt : 체크된 객체의 갯수, num : 체크된 객체의 값

 

4. db에서 한번에 데이터 삭제하기 (mapper.xml)

* service에서 num은 selectOne(값 하나)로 가져오는 상황

 

▶ 기존 mapper.xml

: 삭제시 num을 하나만 선택하기 때문에 게시글 내에서 선택할 때에는 무리가 없었음, 단 체크박스 선택 시 다중값이 삭제되지 않고 하나의 값만 삭제되는 오류가 생김

<delete id="Delete" parameterType="int">
	DELETE FROM BOARD
	WHERE NUM = #{num}
<delete>

 

▶  수정된 mapper.xml

: IN 연산자를 사용하여 특정 조건 내 여러값을 선택할 수 있음, <foreach>를 넣어줌으로써 배열의 #{num} 값을 가져올 수 있게 됨,

parameterType의 int를 배열로 변경해 줌(service와 controller의 파라미터값도 int[]로 수정해 줌)

<delete id="Delete" parameterType="int[]">
	DELETE FROM BOARD
	WHERE NUM IN
	<foreach collection="array" item="num" open="(" close=")" separator="," >
		#{num}
	</foreach>
<delete>

 

= num이 1,2,3인 항목 선택 시 "WHERE IN (1,2,3)"이 되는 셈이다.

--- MyBatis <foreach> 속성 ---
collection : 컬렉션의 이름이나 매개변수명을 지정, 해당 컬렉션을 반복하면서 SQL을 실행 (array or list)
item : 현재 반복되고 있는 컬렉션의 요소에 대한 이름 지정, 각 반복에서 현재 요소는 이 이름으로 참조된다
open : 컬렉션을 시작하는 문자열을 지정, 각 반복에서 첫번째 요소 전에 이 문자열이 출력됨
close : 컬렉션을 끝내는 문자열을 지정, 각 반복에서 마지막 요소 이후에 이 문자열이 출력됨
separator : 각 반복 사이에 출력되는 구분자 지정
index : 컬렉션의 현재 인덱스에 대한 이름을 지정, List 또는 Array일때 사용 가능하며, 반복 중 현재 인덱스 참조 가능

 

" Ajax (Asynchronous JavaScript and XML) "

 : 웹페이지에서 비동기적으로 서버와 통신하는 기술을 의미, 페이지를 새로고침 하지 않고도 서버로부터 데이터를 가져오거나 서버에 데이터를 보낼 수 있다

--- JQuery에서 ajax요청 시 구조 : $.ajax()메서드를 사용하여 설정 ---
type(구버전),
method(최근버전) 		HTTP메서드를 지정(GET, POST등)
url 요청을 보낼 서버의 URL지정
success:function(){} 요청 성공 시 호출될 콜백 함수를 정의
error:function(){} 요청 실패 시 호출될 콜백 함수를 정의
dataType 서버 응답 데이터 타입 지정 (json,html,text...)
contentData 서버 요청 데이터 타입 지정(application/json, text/html ...)
data{key:value} 요청 시 포함할 데이터 (콤마 이용하여 나열)