jqGrid 리스트 출력

jqGrid를 사용하기 위해 먼저 플러그인을 다운받는다.

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

이후 프로젝트 경로에 맞게 파일을 추가.

 

<link rel="stylesheet" href="/js/jqGrid_5.2.0/css/jquery-ui.css" /> <link rel="stylesheet" href="/js/jqGrid_5.2.0/css/ui.jqgrid.css" /> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript" src="/js/jqGrid_5.2.0/js/jquery-ui.js"></script> <script type="text/javascript" src="/js/jqGrid_5.2.0/js/i18n/grid.locale-kr.js"></script> <script type="text/javascript" src="/js/jqGrid_5.2.0/js/jquery.jqGrid.min.js"></script>

 

jqGrid를 보다 아름답게 사용하기 위해 jQuery-ui 역시 다운받는다.

* locale은 jqGrid보다 상단에 위치해야한다.

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

 

$("#grid").jqGrid({ url: './URL' datatype: 'json', colNames: ['고객사 상품코드', '상품명', '상품약어', '샵링커카테고리', '모델명....'], colModel: [ {name: 'GOODS_CD', index: 'GOODS_CD', width: 90, align: 'center', key: true}, {name: 'GOODS_NM', index: 'GOODS_NM', width: 300, editable: true}, {name: 'GOODS_ABRV', index: 'GOODS_ABRV', width: 50}, {name: 'SHOPLINKER_CTGRY', index: 'SHOPLINKER_CTGRY', width: 80}, {name: 'MODEL_NAME', index: 'MODEL_NAME', width: 50}, // ... ], jsonReader: { repeatitems: false, id: 'GOODS_CD' }, loadonce: false, rownumbers: true, gridview: true, shrinkToFit: false, forceFit: true, viewrecords: true, frozen: true, multiselect: true, cellEdit: true, rowNum: 50, rowList: [50, 100, 500, 1000], pager: '#pager2', caption: ' ' });

 

$("#grid").jqGrid('navGrid', '#pager2', { edit: true, add: false, del: true, search: true, refresh: false }, edit, {}, del );

 

url 부분에 server단 코드를 작성해줘야 한다.

 

jqGrid는 내부적으로 해당 url에 파라미터를 던진다

 

- rows: 한 화면에 나타날 row 수
- page: 해당 페이지
- sidx: 정렬 기준
- sord: 정렬 차순

 

jqGrid는 기본적으로 local 데이터에 한해선, 페이지에서 일괄적으로 기능을 처리해준다.

이 말은, 로컬데이터를 임시로 작성하고 그리드에 뿌려주면

 

해당 페이지는 jrGrid의 모든 기능이 다 정상 작동한다는 말이다.

페이징, 서칭 등..

 

하지만 연습용으로 jqGrid를 사용할 것이 아니라면

서버단을 페이징 쿼리와 함께 검색이 가능하게끔 작성해줘야한다.

 

gridData.put("rows", itemList); // Grid data gridData.put("page", currentPage); // Current page gridData.put("records", records); // Total count gridData.put("total", total); // Total page Gson gson = new Gson(); String retVal = gson.toJson(gridData);

 

위에서 말한 파타미터 값들을 받아 로직 처리 후,

리스트와 함께 나머지 값들을 리턴해준다.

 

 

 

itemList라는 리스트에 출력할 데이터들을 담고

나머지 page, records, total은 맵에 담아 리턴!

// JSP의 경우 PrintWriter pw = response.getWriter(); pw.print(retVal); pw.flush(); pw.close();

 

그리드가 뿌려진다.