jqGrid + jsp + json 예제

http://www.trirand.com/blog/jqgrid/jqgrid.html 

사이트에 json 예제가 php 기준이고

json 쓰는 방법이 이해하기 쉽지 않아 정리 해 봅니다.

우선 기본적으로 jQuery 설정은 되어 있다는 가정하에 정리 합니다.

먼저 jqgrid 사용 하시려면 우선 스크립트 다운을 받으 셔야 합니다.

http://www.trirand.com/blog/?page_id=6  요기서 다운 받으신후

프로젝트에 추가해 주세요.

먼저 jsp 파일에 스크립트 추가 부분 입니다. 각자 스크립트 복사 한 경로 마춰서 추가 해주시면 됩니다. 

<link rel="stylesheet" type="text/css" media="screen" href="<%=request.getContextPath()%>/scripts/jquery.jqGrid-4.3.1/css/ui.jqgrid.css" />
 

<script type="text/javascript" src="<%=request.getContextPath()%>/scripts/jquery.jqGrid-4.3.1/js/i18n/grid.locale-en.js"></script>
 

<script type="text/javascript" src="<%=request.getContextPath()%>/scripts/jquery.jqGrid-4.3.1/js/jquery.jqGrid.min.js"></script> 

 
처음 첫 css는 그리드 스타일 적용 하기 위해 추가 되어야 합니다. 

이거로 잠시 삽질 했는데 스크립트 추가 순서도 중요 한듯 합니다. 

두번째 세번째 순서 바뀌면 그리드 안나옵니다. 

그리고 두번째 스크립트 추가 안하시면 그리드에서 페이징 할때 깨져서 나옵니다. 

<script type="text/javascript">

$(document).ready(function(){     

    jQuery("#gridList").jqGrid({   

    url:"Login.do?cmd=testjson",    

        datatype: "json",  

        jsonReader : {  // 이부분 추가 하셔야 json 쓰시기 편리 합니다. 

page: "page", 

total: "total", 

root: "user", 

records: function(obj){return obj.length;},

repeatitems: false, 

id: "id"

}, // 여기 까지 

        colNames:['id','Date', 'Client', 'Amount','Tax','Total','Notes'],

    colModel:[

    {name:'id',index:'id', width:60 },

    {name:'invdate',index:'invdate', width:90 },

    {name:'name',index:'name', width:100},

    {name:'amount',index:'amount', width:80, align:"right"},

    {name:'tax',index:'tax', width:80, align:"right"},

    {name:'total',index:'total', width:80,align:"right"},

    {name:'note',index:'note', width:150, sortable:false}

    ],

  rowNum:10, // 한 화면에 보여줄 갯수

    rowList:[5,10,15],  

    pager: '#pager2',  

    viewrecords: true,

loadonce: true,

    caption:"JSON Example" // 챠트 제목

});  

});

</script>

// 그리드 추가할 위치에 빨간 부분 추가
<form id="frm" style="margin:0px;" action="/site/login/Login.do" onsubmit="return false;">

  <table id="gridList" class="scroll" ></table>

   <div id="pager2"></div>

</form>
 

다음 자바액션단 입니다. 

public ActionForward testjson(ActionMapping mapping, 

ActionForm form, 

HttpServletRequest req, 

HttpServletResponse res) throws Exception {

StringBuffer jsonStr = new StringBuffer();

jsonStr.append("{\"page\" : \"1\",");

jsonStr.append("\"total\" : 2,");

jsonStr.append("\"records\" : \"11\",");

jsonStr.append("\"user\" : [");
 

jsonStr.append("{\"id\":1,\"invdate\":\"2007-10-01\",\"name\":\"test1\",\"note\":\"note\",\"amount\":\"200.00\",\"tax\":\"10.00\",\"total\":\"210.00\"},"); 

jsonStr.append("{\"id\":2,\"invdate\":\"2007-10-01\",\"name\":\"test2\",\"note\":\"note\",\"amount\":\"200.00\",\"tax\":\"10.00\",\"total\":\"210.00\"},"); 

jsonStr.append("{\"id\":3,\"invdate\":\"2007-10-01\",\"name\":\"test3\",\"note\":\"note\",\"amount\":\"200.00\",\"tax\":\"10.00\",\"total\":\"210.00\"},"); 

jsonStr.append("{\"id\":4,\"invdate\":\"2007-10-01\",\"name\":\"test4\",\"note\":\"note\",\"amount\":\"200.00\",\"tax\":\"10.00\",\"total\":\"210.00\"},"); 

jsonStr.append("{\"id\":5,\"invdate\":\"2007-10-01\",\"name\":\"test5\",\"note\":\"note\",\"amount\":\"200.00\",\"tax\":\"10.00\",\"total\":\"210.00\"},"); 

jsonStr.append("{\"id\":6,\"invdate\":\"2007-10-01\",\"name\":\"test6\",\"note\":\"note\",\"amount\":\"200.00\",\"tax\":\"10.00\",\"total\":\"210.00\"},"); 

jsonStr.append("{\"id\":7,\"invdate\":\"2007-10-01\",\"name\":\"test7\",\"note\":\"note\",\"amount\":\"200.00\",\"tax\":\"10.00\",\"total\":\"210.00\"},"); 

jsonStr.append("{\"id\":8,\"invdate\":\"2007-10-01\",\"name\":\"test8\",\"note\":\"note\",\"amount\":\"200.00\",\"tax\":\"10.00\",\"total\":\"210.00\"},"); 

jsonStr.append("{\"id\":9,\"invdate\":\"2007-10-01\",\"name\":\"test9\",\"note\":\"note\",\"amount\":\"200.00\",\"tax\":\"10.00\",\"total\":\"210.00\"},"); 

jsonStr.append("{\"id\":10,\"invdate\":\"2007-10-01\",\"name\":\"test10\",\"note\":\"note\",\"amount\":\"200.00\",\"tax\":\"10.00\",\"total\":\"210.00\"},"); 

jsonStr.append("{\"id\":11,\"invdate\":\"2007-10-01\",\"name\":\"test11\",\"note\":\"note\",\"amount\":\"200.00\",\"tax\":\"10.00\",\"total\":\"210.00\"}"); 

jsonStr.append("]}");

            

                res.setContentType("text/html; charset=UTF-8");

PrintWriter out = res.getWriter();  

out.print(jsonStr.toString()); 

return null;

}

테스트를 위한 데이터 입니다. 데이터 의미는 없습니다. 

json 부분 때문에 삽질을 조금 했는데....

먼저 기본 json 형태는

{

"page": "1",
"total": 27,
"records": "13",
"rows":[
{"id": "1", "cell":["1","테스트","2012-01-04","0.00"]}, 
{"id": "2", "cell":["2","테스트2","2012-01-05","1.00"]}   

}

위 와 같은 형태 이다 

jsp 파일에 

   jsonReader : {  // 이부분 추가 하셔야 json 쓰시기 편리 합니다. 

page: "page", 

total: "total", 

root: "user", 

records: function(obj){return obj.length;},

repeatitems: false, 

id: "id"

}, // 여기 까지 

이 옵션을 추가 함으로써 

{

"page": "1",
"total": 27,
"records": "13",
"rows":[
{"id": "1","note":"test","data":"2012-01-04","tax":"0.00"},  
{"id": "2","note":"test1","data":"2012-01-05","tax":"1.00"},   

}

json을 이런 형식으로 사용 할수 있다. 

이거 하느라 삽질 많이 했는데 여기 저기 보고 참고 해서 짜집기 해서 정리 해 봅니다. ^^