티스토리 뷰

개발/Javascript

Java와 jqgrid 기초!!

신매력 2012.09.12 18:33

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

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



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

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




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 : 내림차순 또는 오름차순


searchFieldsearchString은 검색에 대한 옵션이다.

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

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



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로 리턴 시키면 된다.



댓글
댓글쓰기 폼