이런 표가 있을 때 checkbox를 누르면 해당 row의 필요한 data를 controller로 넘겨줘야 했다.
이를 jquery와 ajax로 구현해보았다.
1. check된 row의 데이터 뽑아내기
//[태영] 확정 버튼을 누르면 ajax를 이용해 check된 데이터만 넘기는 로직
$(function(){
//[태영] 1. checkbox 클릭시 clickEvent가 작동하도록 한다.
$('input:checkbox[name="baljuCheckBT"]').click(function(){
//체크되었는지 여부 확인
if($('input:checkbox[name="baljuCheckBT"]').is(':checked')){
//console.log("체크");
clickEvent(event);
}else{
//console.log("체크해제");
}
});
});
function clickEvent(event){
console.log("target:",$(event.target)); //checkbox target 확인
//target과 가까운 tr 태그 찾기
var row = $(event.target).closest('tr');
//td태그 찾기
var column = row.find('td');
console.log('row', row);
console.log('column', column);
$.each(column, function(index, item){
console.log(item);
})
}이렇게 하면 check된 row의 데이터들을 추출할 수 있다.
3. 추출된 row 데이터 JSON 형태로 컨트롤러에 넘기기
기본 문자열이나 배열은 넘어가는데 배열안에 객체가 있는 형태는 계속 null값으로 넘어감을 발견하였다.
많은 시도 끝에 ajax에서 data는 JSON.stringify(arr)로 넘기고
컨트롤러에선 StringBuffer를 이용해 받아와야함을 알게 되었다.
(StpringBoot에선 JSON형태의 데이터를 받아올 수 있다고 한다.)
$.ajax({
url:"baljuConfirmList.do",
data:JSON.stringify(arr),
method:"post",
contentType: 'application/json; charset=utf-8',
success:(result,status,xhr)=>{
console.log("textStatus", status);
},
error:(jqXHR, textStatus, errorThrown)=>{
console.log("textStatus", textStatus);
}
});아래는 컨트롤러 안의 코드이다.
String body = null;
StringBuilder stringBuilder = new StringBuilder();
BufferedReader bufferedReader = null;
InputStream inputStream = request.getInputStream();
if (inputStream != null) {
bufferedReader = new BufferedReader(new InputStreamReader(inputStream));
char[] charBuffer = new char[128];
int bytesRead = -1;
while ((bytesRead = bufferedReader.read(charBuffer)) > 0) {
stringBuilder.append(charBuffer, 0, bytesRead);
}
}
body = stringBuilder.toString();
body = "{\"baljuCheckList\":" + body + "}" ;
System.out.println(body);
JSONParser parser = new JSONParser();
JSONObject obj = (JSONObject)parser.parse(body);
System.out.println(obj.get("baljuCheckList"));
JSONArray arr = (JSONArray) obj.get("baljuCheckList");
JSONObject obj2 = (JSONObject)arr.get(0);
System.out.println(obj2.get("order_quantity"));아래와 같은 형태로 추출된다.
