Java와 jqgrid 기초!!

전 블로그에 써놓은 글은... 

다시 읽어보니까 뭔소린지 모르겠어서 다시 차근차근 정리한다.ㅋㅋㅋ

처음 하는 무언가를 배울 때는 큰 흐름을 먼저 알아야 한다!

알아보기 쉽게 소스와 함께 흐름을 정리 하겠음. .. 

1. JQGrid 라이브러리 다운받기 

http://www.trirand.com/blog/?page_id=6

2. 그리드를 뿌릴 페이지(jsp)와 컨트롤러(액션)를 만든다.

Controller

@RequestMapping("/main") public String view() {     return "view";  // view.jsp  }

3. 그리드를 뿌릴 페이지 view.jsp

버전은 업데이트 됐을지도 모른다.

3.1 라이브러리 include하기

이름을 끼워맞춰서 순서대로. 꼭 아래와 같은 순서대로 넣을 것. 

순서가 뒤바뀌면 그리드가 안나오거나, undefined가 나타난다.

<link rel="stylesheet" type="text/css" media="screen" href="/css/jqgrid/jquery-ui-1.8.1.custom.css" /> <link rel="stylesheet" type="text/css" media="screen" href="/css/jqgrid/ui.jqgrid.css" /> <link rel="stylesheet" type="text/css" media="screen" href="/css/jqgrid/ui.multiselect.css" /> <script src="/js/jqgrid/jquery-1.6.4.min.js" type="text/javascript"></script> <script src="/js/jqgrid/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script> <script src="/js/jqgrid/jquery.layout.js" type="text/javascript"></script> <script src="/js/jqgrid/grid.locale-en.js" type="text/javascript"></script> <script src="/js/jqgrid/ui.multiselect.js" type="text/javascript"></script> <script src="/js/jqgrid/jquery.jqGrid.min.js" type="text/javascript"></script> <script src="/js/jqgrid/jquery.tablednd.js" type="text/javascript"></script> <script src="/js/jqgrid/jquery.contextmenu.js" type="text/javascript"></script>

3.2 그리드 스크립트~

데모 사이트에서 복사해서 url부분만 수정했다.

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

jQuery("#list2").jqGrid({     url : '/test',     datatype : "json",     colNames : ['Inv No', 'Date', 'Client', 'Amount', 'Tax'],     colModel:[            {name:'id', index:'id', width:55},            {name:'invdate', index:invdate', width:90},            {name:'name', index:'name asc, invdate', width:100},            {name:'amount', index:'amount', width:80, align:"right"},            {name:'txt', index:'tax', width:80, align:"right}     ],     rowNum:10,     rowList:[10,20,30],     pager:'#pager2',     sortname:'id',     viewrecords: true,     sortorder:"desc",     caption:"JSON Example" });  jQuery("#list2").jqGrid('navGrid','#pager2',{edit:false,add:false,del:false});

3.3 그리드가 그려질 곳

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

4. 그리드에 뿌릴 데이터 가져오기.

맨처음 1번의 주소로 호출하면.. 3번 jsp가 뿌려지면서, 

그리드가 내부적으로 Ajax 통신을 하게 된다.

그리드가 아는 아름다운 형태의 JSON 데이터를 ResponseBody로 내려주면 그리드에 쏙 들어간다.

(잭슨라이브러리를 사용했음)

3.2 의 url 에서 호출한 url에서 데이터를 내려준다.

@RequestMapping("/test") public @ResponseBody JsonObj test(      @RequestParam(value = "page", required=false) String page,     @RequestParam(value = "rows", required=false) String rows,     @RequestParam(value = "sidx", required=false) String sidx,     @RequestParam(value = "sord", required=false) String sord,      @RequestParam(value = "searchField", required=false) String searchField,      @RequestParam(value = "searchString", required=false) String searchString) {          // TODO : 데이터 가져오기 구현..     JsonObj obj = null;        obj.setRows(List<Map>);  // list<map>형태의 받아온 데이터를 가공해서 셋하고 리턴      return obj; }

알수없는 저 파라미터들은 뭐냐?

jqgrid가 내부적으로 저 굵은 글씨 4개의 파라미터(page, rows, sidx, sord)를 넘겨주는데.. 

page : 몇번째 페이지를 요청했는지

rows : 페이지 당 몇개의 행이 보여질건지

sidx : 소팅하는 기준이 되는 인덱스

sord : 내림차순 또는 오름차순

searchField와 searchString은 검색에 대한 옵션이다.

검색버튼을 눌러도 리스트를 뿌려주는 이 컨트롤러를 타기 때문.

(검색은 목록을 다 뿌리고 나서 여유 있을때 추가합시다 ㅋㅋㅋ)

4.1 JsonObj ???? 

JQGRID에 데이터를 뿌리기 위해서는 그리드가 알아먹는 모습으로 보내야 한다.

바로 이렇게~!

{       "total":10,        "page":10,        "records":10,        "rows": [           {"id":1, "cell":["1", "히히히"]},           {"id":2, "cell":["2", "호호호"]},       ] }

그런데 rows에 반드시 행 순서대로 보내야하는데다가 리스트도 또 들어있고 복잡하니깐...

좀 간편하게 보내려면!

아래 굵은글씨를 추가 한다.

jQuery("#list2").jqGrid({     datatype : "json",     colNames : ['Inv No', 'Date', 'Client', 'Amount', 'Tax'],     colModel:[            {name:'id', index:'id', width:55},            {name:'invdate', index:invdate', width:90},            {name:'name', index:'name asc, invdate', width:100},            {name:'amount', index:'amount', width:80, align:"right"},            {name:'txt', index:'tax', width:80, align:"right}     ],     rowNum:10,     rowList:[10,20,30],     pager:'#pager2',     sortname:'id',     viewrecords: true,     sortorder:"desc",     caption:"JSON Example",     jsonReader: {          repeatitems:false     } });  jQuery("#list2").jqGrid('navGrid','#pager2',{edit:false,add:false,del:false});

그러면 jqGrid는 아래와 같은 JSON형식을 받아주고 뿌려준다.

{       "total":10,        "page":10,        "records":10,        "rows": [           {"컬럼명1:value1, 컬럼명2:value2},           {"컬럼명1:value1, 컬럼명2:value2},       ] }

jsonReader 옵션을 잘 찾아보면 불필요한 것들을 제거할 수 있고 json형식을 바꿀수 있는데

그것까진 안해봤다ㅠ

애니웨이, 

내가 위에 구현한 JsonObj 객체엔 머가 들어있나?

Json을 만들기 위한 것을 담는 객체다.

센스있는 사람이라면 이미 알아 챘을듯?

@Data public class JsonObj() {     private int page;     private int records;     private int total;     private List<Map<String, Object> rows = new ArrayList<Map<String, Object>(); }

페이징 하기 싫은 사람은 rows만 채워서 responseBody로 리턴 시키면 된다.