반응형
스프링 게시판 선택 삭제 구현
클릭하면 deleteValue() 함수를 발동하게끔 선택 삭제 버튼을 추가해준다.
(코드 밑에 있음)
이 부분은 제이쿼리와 AJAX를 사용했다.
먼저 RowCheck 이라는 이름, list.no 로 value 를 갖는 체크박스를 생성한다.
그리고 위에 allCheck 라는 이름의 체크박스를 생성한다.
그리고 함수를 구현하는데
먼저 전체 선택 함수부분은
allCheck 라는 이름을 클릭하면 chk_listArr.length 만큼 반복하여 체크하게 된다.
그러면 전체 선택이 된다.
그 아래 RowCheck 이름을 가진 체크박스의 체크수가 rowCnt 전체 갯수와 같다는건
전체 선택이 되었다는 뜻이기때문에 allCheck 체크박스도 체크해준다.
이후 deleteValue() 는 AJAX 를 사용했는데
check 된 것을 valueArr에 push해서 저장하고
이 Arr 를 post 방식으로 valueArr 의 데이터 변수로 지정된 delete url로 전송하는 함수이다.
그러면 아래 board controller 가 받아서 기존 mapper 에 연결시켜준다.
list.jsp 코드
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %><%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %><%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html><html><head><script src="http://code.jquery.com/jquery-1.6.4.min.js"></script><script type="text/javascript">$(function(){var chkObj = document.getElementsByName("RowCheck");var rowCnt = chkObj.length;$("input[name='allCheck']").click(function(){var chk_listArr = $("input[name='RowCheck']");for (var i=0; i<chk_listArr.length; i++){chk_listArr[i].checked = this.checked;}});$("input[name='RowCheck']").click(function(){if($("input[name='RowCheck']:checked").length == rowCnt){$("input[name='allCheck']")[0].checked = true;}else{$("input[name='allCheck']")[0].checked = false;}});});function deleteValue(){var url = "delete"; // Controller로 보내고자 하는 URLvar valueArr = new Array();var list = $("input[name='RowCheck']");for(var i = 0; i < list.length; i++){if(list[i].checked){ //선택되어 있으면 배열에 값을 저장함valueArr.push(list[i].value);}}if (valueArr.length == 0){alert("선택된 글이 없습니다.");}else{var chk = confirm("정말 삭제하시겠습니까?");$.ajax({url : url, // 전송 URLtype : 'POST', // POST 방식traditional : true,data : {valueArr : valueArr // 보내고자 하는 data 변수 설정},success: function(jdata){if(jdata = 1) {alert("삭제 성공");location.replace("list") //list 로 페이지 새로고침}else{alert("삭제 실패");}}});}}</script><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"><meta charset="UTF-8"><title>list</title></head><body><form name="userForm"><h1>List page</h1><table><thead><tr><th scope="col"><input id="allCheck" type="checkbox" name="allCheck"/></th><th scope="col">번호</th><th scope="col">ID</th><th scope="col">성함</th><th scope="col">목표</th><th scope="col">작성일</th><th scope="col">작성시간</th></tr></thead><tbody><c:forEach items="${list}" var="list"><tr><td class="text_ct"><input name="RowCheck" type="checkbox" value="${list.no}"/></td><td class="text_ct">${list.no} </td><td class="text_ct">${list.id} </td><td class="text_ct"><a href="${path}/board/detail?no=${list.no}">${list.name} </a></td><td class="text_ct">${list.goal} </td><td class="text_ct"><fmt:formatDate value="${list.date}" pattern="yyyy/MM/dd" /></td><td class="text_ct"><fmt:formatDate value="${list.time}" pattern="HH:mm:ss" /></td></tr></c:forEach></tbody></table><a href="<c:url value='/board/create'/>" role="button" class="btn btn-outline-info">글쓰기</a><input type="button" value="선택삭제" class="btn btn-outline-info" onclick="deleteValue();"></form></body></html>
BoardController 코드
//게시물 선택삭제@RequestMapping(value = "/delete")public String ajaxTest(HttpServletRequest request) {String[] ajaxMsg = request.getParameterValues("valueArr");int size = ajaxMsg.length;for(int i=0; i<size; i++) {service.delete(ajaxMsg[i]);}return "redirect:list";}
기존에는 int no 였는데 boardController 에서 ajaxMsg[i] 를 string으로 받아야해서 수정했다.
다 수정을 했으면 다시 runserver 해서 list 화면에 들어가본다.
두개 선택하고 선택삭제 누르면
선택을 묻는 창이 나오고
확인하면 삭제 성공 메시지가 뜬다.
성공적으로 선택삭제된 모습 !
깃허브 주소
반응형
'IT > Spring' 카테고리의 다른 글
| [spring boot] 스프링부트 채팅 프로그램 만들기 #2 (0) | 2020.09.21 |
|---|---|
| [spring boot] 스프링부트 채팅 프로그램 만들기 #1 (0) | 2020.09.21 |
| [spring 게시판 만들기 #6] 게시물 삭제 Delete (0) | 2020.09.14 |
| [spring 게시판 만들기 #6] 게시물 수정 Update (0) | 2020.09.14 |
| [spring 게시판 만들기 #5] 게시판 상세보기 Detail (2) | 2020.09.14 |