HTML
|
1
2
3
4
5
6
7
8
9 |
<thead>
<tr>
<th><input type="checkbox" name="checkAll" id="th_checkAll" onclick="checkAll();"/></th>
</tr>
</thead>
<tbody>
<tr>
<td class="center"><input type="checkbox" name="checkRow" value="${content.IDX}" /></td>
</tbody> |
cs |
thead 에 전체선택/전체해제용 체크박스 'checkAll' 를 만들고 클릭하면 checkAll() 를 타도록 함.
tbody 에는 각 행마다 체크박스 'checkRow' 만들어줌.
JavaScript
|
1
2
3
4
5
6
7
8 |
/* 체크박스 전체선택, 전체해제 */
function checkAll(){
if( $("#th_checkAll").is(':checked') ){
$("input[name=checkRow]").prop("checked", true);
}else{
$("input[name=checkRow]").prop("checked", false);
}
} |
cs |
thead 에 위치한 전체선택/전체해제용 체크박스를 클릭하면 타는 checkAll() 은 .prop() 를 통해 'checkRow' 이름을 가진 모든 체크박스들을 일괄 제어하는 내용이다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25 |
/* 삭제(체크박스된 것 전부) */
function deleteAction(){
var checkRow = "";
$( "input[name='checkRow']:checked" ).each (function (){
checkRow = checkRow + $(this).val()+"," ;
});
checkRow = checkRow.substring(0,checkRow.lastIndexOf( ",")); //맨끝 콤마 지우기
if(checkRow == ''){
alert("삭제할 대상을 선택하세요.");
return false;
}
console.log("### checkRow => {}"+checkRow);
if(confirm("정보를 삭제 하시겠습니까?")){
//삭제처리 후 다시 불러올 리스트 url
var url = document.location.href;
var page = $("#page").val();
var saleType = $("#saleType").val();
var schtype = $("#schtype").val();
var schval = $("#schval").val();
location.href="${rc.contextPath}/test_proc.do?idx="+checkRow+"&goUrl="+url+"&page="+page+"&saleType="+saleType+"schtype="+schtype+"schval="+schval;
}
} |
cs |
전체선택한 체크박스를 일괄 삭제하기 위해 Spring 프레임워크에 넘길 값을 세팅하는 내용이다.
컨트롤러에는 체크박스 값들을 배열로 넘기거나 하지 않고 문자열들을 콤마로 조합해서 하나의 문자 변수로 보낸다.
예) checkRow = 1, 2, 3, 4
컨트롤러나 서비스단에서 콤마를 구분자로 split 하여 for문 돌려서 쿼리를 돌리는 식으로 처리한다.
Java
|
1
2
3
4
5
6 |
//체크박스로 여러개 삭제하는 기능 추가.
String[] arrIdx = paramMap.get("idx").toString().split(",");
for (int i=0; i<arrIdx.length; i++) {
testMapper.delete(Integer.parseInt(arrIdx[i]));
} |
cs |
split() 을 이용해 콤마를 기준으로 값을 쪼개도록 하고, 그 쪼갠 값들을 배열 arrIdx에 담아 for문을 돌려 일일이 처리 되도록 한다.