[오늘의집 ] 멤버 멀티삭제 구현하기

---

오늘은 멀티삭제에 대해서 구현해보자.

---

memberList.jsp

 

 

	<th scope="col" style="background-color: #00bfff;" style="color: white;"><input type="checkbox" id="checkboxAll" name="" value="" class="form-check-input"> 전체선택

 

 

이건 전체 체크박스

 

 

 

<script>
	
				$("#checkboxAll").click(function() {
				 	if($("#checkboxAll").is(":checked")) $("input[name=checkboxSeq]").prop("checked", true);
				 	else $("input[name=checkboxSeq]").prop("checked", false);
			}); 

				
				$("input[name=checkboxSeq]").click(function() {
					var total = $("input[name=checkboxSeq]").length;
					var checked = $("input[name=checkboxSeq]:checked").length;
					
					if(total != checked) $("#checkboxAll").prop("checked", false);
					else $("#checkboxAll").prop("checked", true);
				});					
				
	</script>

 

 

 

이코드는 전체삭제 체크박스가 눌렷을때, 아래것도 같이 눌리거나 눌리지 않았을때 모두 눌리지 않게하는 버튼이다.

 

 

 

 

 

 

 

		<td><input type="checkbox" id="checkboxSeq" name="checkboxSeq" value="<c:out value="${item.ifmmSeq}"/>" class="form-check-input"></td>

 

 

이건 개별체크박스이다.

checkboxSeq로 이름을 지었다.

 

 

 

	<script>
	
	var goUrlMultiUele ="/member/memberMultiUele";
	var goUrlMultiDele ="/memberMultiDele";
	var seq = $("input:hidden[name=ifmmSeq]");
	var form = $("form[name=formList]");
	var checkboxSeqArray = [];
	
	
				$("#btnModalUelete").on("click", function(){
					$("input[name=checkboxSeq]:checked").each(function(){ // check된것을 찾고 체크된 값만 넘김
						checkboxSeqArray.push($(this).val());  // check 해당된 값을 담는다.
					});				
				
				$("input:hidden[name=checkboxSeqArray]").val(checkboxSeqArray);
				
				$("#modalConfirm").modal("hide");
			
				form.attr("action", goUrlMultiUele).submit();
				
				});
				

				$("#btnModalDelete").on("click", function() {
					$("input[name=checkboxSeq]:checked").each(function(){
						checkboxSeqArray.push($(this).val());
					});				
				
				$("input:hidden[name=checkboxSeqArray]").val(checkboxSeqArray);
				
				$("#modalConfirm").modal("hide");
			
				form.attr("action", goUrlMultiDele).submit();
				
				}); 
				
	</script>

 

 

 

 

 

 

 

 

 

 

여기까지하면 다음과 같은 Ui를 볼 수 있다.

 

 

 

 

MemberController.java

 

 

 

 

	@RequestMapping(value = "memberMultiDele")
	public String memberMultiDele(@ModelAttribute("vo") MemberVo vo, Member dto, RedirectAttributes redirectAttributes) throws Exception {

		String[] checkboxSeqArray = vo.getCheckboxSeqArray();
		
		for(String checkboxSeq : checkboxSeqArray) {
			vo.setIfmmSeq(checkboxSeq);
			service.delete(vo);
		}
		redirectAttributes.addFlashAttribute("vo", vo);
		
		return "redirect:/member/memberList";
		
	}

 

 

 

 

 

MemberServiceImpl.java

 

 

 

	public int delete(MemberVo vo) throws Exception {

		dao.deleteNationality(vo);
		dao.deleteAddress(vo);
		dao.deleteNumber(vo);
		dao.deleteEmail(vo);
		dao.delete(vo);

		return 1;
	}

 

 

 

 

MemberDao.java

 

 

	// delete
	public int deleteNumber(MemberVo vo) { return sqlSession.delete(namespace + ".deleteNumber", vo);}
	public int deleteEmail(MemberVo vo) { return sqlSession.delete(namespace + ".deleteEmail", vo);}
	public int deleteAddress(MemberVo vo) { return sqlSession.delete(namespace + ".deleteAddress", vo);}
	public int deleteNationality(MemberVo vo) { return sqlSession.delete(namespace + ".deleteNationality", vo);}
	public int delete(MemberVo vo) { return sqlSession.delete(namespace + ".delete", vo);}

 

 

 

그럼 다음과같이 삭제가 되는걸 확인할 수 있다.

 

 

 

 

 

 

결과값

 

 

 

 

체크하고 삭제를 누르면

 

 

 

 

 

 

 

모달창이 나타나게되고,

 

 

 

 

 

 

 

시퀀스 112 라인이 없어진걸 확인이 가능하다.