고정 헤더 영역
상세 컨텐츠
본문
안녕하세요.
프로젝트를 하면서 보통 jqgrid나 jqwidget 등등.... 그리드 API를 사용을 많이 하지만, 이런 그리드 API를 사용하지 않고 테이블 그리드로 표현하는 프로젝트도 많이 있습니다.
전통적인 방식인 table 그리드에서 테이블의 td값을 추려서 배열로 만들어 스프링 컨트롤러로 넘기는 방식에 대해서 고찰을 해보도록 하겠습니다.
1. 먼저 table 그리드를 html로 생성해보도록 하겠습니다. 여기서는 테스트차원에서 알아보는 만큼 css를 입히지 않은 날것같은 html을 만들것이므로 디자인이 예쁘지 않다는걸 미리 알아두셨으면 좋겠습니다.
아래와 같이 html을 코딩합니다.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Basic HTML Table</h2>
<div>
<input type="button" name="submit" id="submit">전송</input>
</div>
<table id="testTable" style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
2. 그 다음으로는 html 테이블내의 td의 값을 가져와서 배열에 담아주고 ajax를 호출해주는 스크립트를 코딩해보도록 하겠습니다. 아래와 같이 코딩을 해줍니다.
<script src="http://code.jquery.com/jquery-1.10.2.js">
<script type="text/javascript">
$(function()
{
$("#submit").click(function() {
var dataArrayToSend = [];
var dataArrayToSend1 = [];
$("#testTable tr").each(function(){
var len = $(this).find("td").length;
for(var i=0; i< len; i++)
{
dataArrayToSend.push($(this).find("td").eq(i).text());
}
dataArrayToSend1.push(dataArrayToSend);
});
$.ajax({
contentType: "application/json",
type: "POST",
data: JSON.stringify(dataArrayToSend1),
url: "${pageContext.request.contextPath}/table/tabledataSend",
success: function(data) {
console.log('done');
},
error: function(jqXHR, textStatus, errorThrown) {
console.log('error while post');
}
});
});
});
</script>
그러고 난다음 위의 1,2번 파일을 test.jsp로 저장하여 프로젝트의 webapp > table > table.jsp로 저장하였습니다.
3. 자바단으로 가서 컨트롤러를 아래와 같이 코딩하여 줍니다.
@RequestMapping("/table/tableList")
public ModelAndView boardWirte() throws Exception {
ModelAndView mv = new ModelAndView("/table/table");
return mv;
}
@RequestMapping(value = "/table/tabledataSend", method = RequestMethod.POST)
public @ResponseBody void tableList(@RequestBody String[] dataArrayToSend) throws Exception {
//ModelAndView mv = new ModelAndView("jsonView");
for (String data : dataArrayToSend) {
System.out.println("Your Data =>" + data);
}
//return mv;
}
소스만 봐도 대충 이해가 되실것으로 믿습니다만, 굳이 설명을 하자면 첫번째 컨트롤러는 table.jsp 즉 view를 불러주는 컨트롤러이고 두번째 컨트롤러는 table.jsp에서 ajax로 /table/tabledataSend를 호출해주면 배열로 테이블 td의 값을 받아서 테스트로 루프를 돌려서 화면에 찍도록 해보았습니다.
물론 여기서 배열로 받은 값을 VO에 저장한 후 Service와 DAO를 연결하여 추후의 작업을 진행하시면 되겠습니다.
일단은 오늘은 화면의 테이블 데이터를 컨트롤러의 배열로 받아오는 방법에 대해서 알아보았습니다.
저의 포스트가 도움이 되셨다면 공감버튼을 눌러주시기를 부탁드립니다. ^^*
'spring' 카테고리의 다른 글
| java.util.arraylist out of start_object token (0) | 2019.09.11 |
|---|---|
| Spring security “Access is denied” 오류 (0) | 2019.09.11 |
| 스프링 에러페이지 설정 (0) | 2019.02.19 |
| List<Map<String, Object>> 를 List<ArrayList<Map<String, Object>>>로 변환하기 (0) | 2019.02.15 |
| 스프링 array parameter list map 처리. (0) | 2019.02.01 |
댓글 영역