[javascript]체크박스 일괄 선택하여 일괄삭제 백앤드까지 구현하기

우리가 백 단에서 리스트를 표출시키고 이 글들을 일괄적으로 삭제시키기 위해서는 아마 

화면단에서 배열로 받아 백단에서 반복문을 이용해서 delete 쿼리를 보내는 분들이 많을 겁니다 

간단하기도 하고 delete쿼리를 한번만 작성해두면 그대로만 이용하면 되기 때문에 

제가 실무에서도 많이 본 소스였습니다

 

그렇지만 제가 아는 내용은 최대한 DB에 접근하는 즉 쿼리를 날리는 횟수를 줄여야 한다고 

알고 있습니다 데이터 흐름을 생각해 보면 

화면 - 프런트앤드 - 백앤드 - DB접근 - 백앤드 - 프런트앤드 or 화면 

바로 출력되는것이죠 

그리고 세부적으로 살펴보면 백앤드에서도 아마 대부분 MVC 패턴으로 프로젝트가 설계되었을 건데

아무리 Impl.java 에서 돌린다고 하더라도 DB접근은 될 수 있으면 한 번에 끝내는 것이 좋습니다 

 

저도 반복문으로 돌려서 일괄 업데이트나 일괄 등록 즉 update문 insert문을 사용했는데 

이제 그러지 않으려고 찾아본 내용을 포스팅합니다 

 

화면단에서는 아마 테이블에 tr 태그 안에 td 태그에 input 태그로 체크박스를 항목 하나하나에 

표출되도록 했을 겁니다 

<td><input type="checkbox" id="chk" class="chkGrp" value="백단에서 가져온 유일한 값"/></td>HTML

보시면 알겠지만 value 속성에는 그 항목의 유일한 값을 넣어주어야 합니다 

그래야 특정한 항목에 조건을 걸어 조작하니까요 ㅎㅎ 

예를 들어 사용자 정보라면 중복되지 않는 핸드폰번호라던지 아니면 아이디를 넣어주면 되겠죠?

저는 value속성 안에 이러한 식으로 작성했습니다

<input type="checkbox" id="chk" class="chkGrp" value="<c:out value='${result.id}'/>" >HTML

저는 JSTL을 자주 이용하는 편입니다 ㅎㅎ 이러한 방식으로 데이터를 쭈우우욱 출력합니다 

그럼 일괄 선택을 살펴봅시다 

 

//스크립트 영역

$(function () {
	$("#chkAll").click(function(){
    	$(".chkGrp").attr("checked", this.checked);
    });

});JAVASCRIPT

아참 빼먹은 부분이 있는데 전체 선택하기 위한 체크박스는 th에 하나만 작성하도록 해주세요 당연히 ID는 아시겠죠?

<th><input type="chkeckbox" id="chkAll"></th>HTML

저 input태그의 체크박스를 체크하면 전체가 다 선택될 겁니다 아 물론 class는 chkGrp가 꼭 들어가 있어야 합니다

 

이제 프런트 앤드로 넘어가 봅시다 

 

//스크립트 영역입니다 

function 삭제함수(){

    let groupList = "";

    $(".chkGrp:checked").each(function(idx, item){
        if(idx == 0){
            groupList += item.value;
        } else {
            groupList += "," + item.value;
        }

    });
}JAVASCRIPT

 

j쿼리 each를 이용해서 반복하여 데이터를 정형화시킵니다 

예상해 보면 아마 이런 데이터 일 겁니다 

123123123,12312312,1233231,112312321  

저 숫자들이 하나하나 유니크한 값이라고 생각합시다 ㅎㅎ 

무튼 이 데이터들을 get방식으로 보내든 post로 보내든 각자 백엔드로 보내봅시다 

 

javascript 카테고리이지만 그냥 여기서 java와 xml 부분까지 다루도록 하겠습니다 

다른 글로 이동하면 화나실 거 같아서요ㅎㅎ 

 

대부분 controller에서 받으시겠죠?

controller에서 어떤 방식으로 구현했는지 봅시다

List<String> grpList = new ArrayList<String>();
String[] grpCode = searchVO.get("grpList").toString().split(",");

for(int i=0; i < grpCode.length; i++){
	grpList.add(grpCode[i].toString());
}JAVA

DB에 보낼 데이터를 List로 만들어줍니다 

 

이제 다 왔습니다 

mybatis에서는 어떻게 해야 하는지 확인하기 전에 WHERE 절에 사용할 수 있는 IN 구문을 한번 살펴보고 오도록 합시다

 

<delete id="아이디입력">
	DELETE
      FROM 테이블명을입력
     WHERE 1=1
       AND PK컬럼 IN 
       		<foreach collection="list" index="index" item="리스트에담긴키" open="(" close=")" separator=",">
            	#{리스트에담긴키}
            </foreach>
</delete>SQL

이처럼 작성하면 하나의 쿼리에 여러 개의 값을 집어넣어 일괄 삭제 할 수 있는 기능을 만드실 수 있습니다

 

DB성능이 워낙에 미친 성능이라면 모르겠지만 여러개의 값을 한 번에 삭제할 일이 있다면 

이 방법으로 해보시는 건 어떨까 생각합니다 감사합니다~