jqGrid의 경우 jQueryUI의 테마를 사용하기 때문에
jQueryUI를 다운 및 연동을 우선적으로 연동한 후에
jqGrid 다운을 받도록 합니다.
2014/11/04 - [웹개발강좌/jQueryUI] - jQueryUI 1장 - 테마선택하여 다운로드 후 간단하게 버튼태그에 UI 적용하기
jQueryUI에 대한 연동이 완료되었다면
jqGrid 플러그인을 다운로드 받도록 합니다.
http://www.trirand.com/blog/?page_id=6
URL 접속 후 Download버튼을 클릭하여 jqGrid 압축파일을 다운받습니다.
스크롤을 내리면 하단과 같은 버튼이 존재 할 겁니다.
다운로드 파일을 압축 해제 후 존재하는 css/js/plugins/src 디렉토리를
자신의 웹프로젝트에 "jqgrid" 디렉토리 생성 후 복사+붙여넣기를 합니다.
위에 파란줄친게 jqueryui관련 플러그인 include파일이고
빨간줄을 jqgrid 관련 플러그인 include파일입니다.
index.html 이란 파일을 생성 후 연동을 해보도록 하겠습니다.
1. jqGrid 연동을 위한 include 코드
<link rel="stylesheet" type="text/css" media="screen" href="/jqueryui/jquery-ui.css" /> <link rel="stylesheet" type="text/css" media="screen" href="/jqgrid/css/ui.jqgrid.css" /> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script src="/jqueryui/jquery-ui.js"></script> <script src="/jqgrid/js/jquery.jqGrid.src.js"></script>
경로는 다를 수 있으니 자신의 경로에 맞춰서 include 해주세요
include를 해주셨다면 body 태그 사이에 그리드 출력을 위한 태그를 삽입해주세요
<table id="list"></table>
※ jqGrid를 이용하여 그리드 목록 출력시, table 태그를 이용해주어야 합니다.
2. 로컬데이터를 그리드에 출력을 위한 스크립트코드
$(function(){
//가상의 local json data
var gridData = [{seq:"1",create_date:"2007-10-01",create_name:"test",title:"note",hitnum:"11"},
{seq:"2",create_date:"2007-10-02",create_name:"test2",title:"note2",hitnum:"22"}];
//jqGrid껍데기 생성
$("#list").jqGrid({
//로컬그리드이용
datatype: "local",
//그리드 높이
height: 250,
//컬럼명들
colNames:['시퀀스','제목', '등록일', '등록자명','조회수'],
//컬럼모델
colModel:[
{name:'seq'},
{name:'title'},
{name:'create_date'},
{name:'create_name'},
{name:'hitnum'}
],
//그리드타이틀
caption: "그리드 목록"
});
// 스크립트 변수에 담겨있는 json데이터의 길이만큼
for(var i=0;i<=gridData.length;i++){
//jqgrid의 addRowData를 이용하여 각각의 row에 gridData변수의 데이터를 add한다
$("#list").jqGrid('addRowData',i+1,gridData[i]);
}
})
위 처럼 정상적으로 그리드내에 데이터가 출력된 것을 확인할 수 있습니다.
이어서 서버통신으로 그리드 데이터 호출을 해보도록 하겠습니다.
json 파싱하는부분은 저는 json-simple 라이브러리를 이용하여 예를 들도록 하겠습니다.
2014/10/06 - [코드저장소/java] - JSON 라이브러리를 이용하여 object생성과 문자열을 object형으로 변환해보기
기존 코드는 동일하고 스크립트 코드를 변경해보도록 하겠습니다.
3. Ajax 통신으로 그리드 데이터출력관련 스크립트
$(function(){
$("#list").jqGrid({
//ajax 호출할 페이지
url:'/result.jsp',
//로딩중일때 출력시킬 로딩내용
loadtext : '로딩중..',
//응답값
datatype: "json",
height: 250,
colNames:['시퀀스','제목', '등록일', '등록자명','조회수'],
colModel:[
{name:'seq'},
{name:'title'},
{name:'create_date'},
{name:'create_name'},
{name:'hitnum'}
],
caption: "그리드 목록"
});
})
일괄적으로 페이징 처리 없이 서버에서
응답받은 데이터를 한꺼번에 출력시키는 방식입니다.
호출하는방식이 $.ajax와 흡사합니다.
그럼 jqGrid 속성중 url에 정의한 jsp페이지에서 json 파싱작업을 하도록 하겠습니다.
4. result.jsp 서버페이지 코드
JSONObject jsonObj = new JSONObject();
JSONObject jsonObj2 = null;
JSONArray jsonArray = new JSONArray();
//1번째 데이터
jsonObj2 = new JSONObject();
jsonObj2.put("seq", "1");
jsonObj2.put("title", "제목");
jsonObj2.put("create_date", "2014-11-11");
jsonObj2.put("create_name", "개발로짜");
jsonObj2.put("hitnum", "1");
jsonArray.add(jsonObj2);
//2번째 데이터
jsonObj2 = new JSONObject();
jsonObj2.put("seq", "2");
jsonObj2.put("title", "제목222");
jsonObj2.put("create_date", "2014-11-11");
jsonObj2.put("create_name", "개발로짜2323");
jsonObj2.put("hitnum", "10");
jsonArray.add(jsonObj2);
PrintWriter pw = response.getWriter();
pw.print(jsonArray);
pw.flush();
pw.close();
json array 객체를 클라이언트 페이지로 넘겨 주었습니다.
맨처음 진행한 local 타입에 사용했던 json 변수와 동일한 구조로 넘겨준것 뿐입니다.
즉, gridData 변수의 담겨있던 json 데이터를 result.jsp 페이지로 이동(?) 된 것 뿐입니다.
추가로 그리드 페이징에 대하여 진행하겠습니다.
페이징UI 적용을 위한 DIV 태그를 추가하도록 합니다.
<div id="page"></div>
다음으로 스크립트 코드를 작성해보았습니다.
$(function(){
$("#list").jqGrid({
url:'/result.jsp',
datatype: "json",
loadtext : '로딩중..',
height : 250,
//한페이지에 출력할 데이터 갯수
rowNum : 2,
//페이징UI적용을 위한 속성
pager: '#page',
colNames:['시퀀스','제목', '등록일', '등록자명','조회수'],
colModel:[
{name:'seq'},
{name:'title'},
{name:'create_date'},
{name:'create_name'},
{name:'hitnum'}
],
caption: "그리드 목록"
});
})
기존 ajax 코드에서 2가지(rowNum,pager) 속성이 추가되었습니다.
rowNum : 한페이지당 몇개의 데이터를 출력할지
pager : 페이징UI 적용할 셀렉터
이어서 result.jsp 서버 코드를 변경해보도록 하겠습니다.
5. 페이징처리 예를들기위한 result.jsp 샘플코드
//현재페이지
String current_page = request.getParameter("page");
//한페이지에 최대 몇개의 row 출력(mysql의 limit에 속하는데이터)
String numper_page = request.getParameter("rows");
JSONObject jsonObj = new JSONObject();
JSONObject jsonObj2 = null;
JSONArray jsonArray = new JSONArray();
if(current_page.equals("1")) {
jsonObj2 = new JSONObject();
jsonObj2.put("seq", "1");
jsonObj2.put("title", "제목");
jsonObj2.put("create_date", "2014-11-11");
jsonObj2.put("create_name", "개발로짜");
jsonObj2.put("hitnum", "1");
jsonArray.add(jsonObj2);
jsonObj2 = new JSONObject();
jsonObj2.put("seq", "2");
jsonObj2.put("title", "제목2");
jsonObj2.put("create_date", "2014-11-15");
jsonObj2.put("create_name", "개발로짜");
jsonObj2.put("hitnum", "20");
jsonArray.add(jsonObj2);
} else if(current_page.equals("2")) {
jsonObj2 = new JSONObject();
jsonObj2.put("seq", "3");
jsonObj2.put("title", "제목33");
jsonObj2.put("create_date", "2014-11-11");
jsonObj2.put("create_name", "개발로짜33");
jsonObj2.put("hitnum", "8");
jsonArray.add(jsonObj2);
jsonObj2 = new JSONObject();
jsonObj2.put("seq", "4");
jsonObj2.put("title", "제목4444");
jsonObj2.put("create_date", "2014-11-15");
jsonObj2.put("create_name", "개발로짜12");
jsonObj2.put("hitnum", "2");
jsonArray.add(jsonObj2);
}
//현재페이지의 목록데이터
jsonObj.put("rows", jsonArray);
//현재페이지
jsonObj.put("page", current_page);
//총페이지수
jsonObj.put("total", 2);
//총글목록수
jsonObj.put("records", 4);
PrintWriter pw = response.getWriter();
pw.print(jsonObj);
pw.flush();
pw.close();
위 코드는 db처리 없이 임의로 current_page값 구분으로
가상의 페이징처리로 데이터를 파싱 하였습니다.
그리고 페이징 처리시 데이터 목록의 json array 의 경우 rows 키에 담겨져야 하며
현재페이지(page), 총페이지수(total), 총글목록 카운트(records) 에 담아서
클라이언트 페이지에 response 해주어야 합니다.
실행을 해보도록 하겠습니다.
위와같이 데이터 출력을 되었으나 로딩문구가 계속 출력되며
하단 페이징화면도 제대로 나타나지 않습니다.
F12 를 눌러서 오류 메시지를 확인해 보았는데
"Uncaught TypeError: Cannot read property 'integer' of undefined"
라는 메시지 출력이 되었습니다.
페이징 처리를 위해서 LOCALE 설정을 잡아주지 않아서입니다.
jqgrid -> src 0> i18n 디렉토리 내에 자신의 원하고자 하는 locale 파일을 include 해주도록 합니다.
저같은 경우는 한글 locale 설정을 하므로 "grid.locale-kr.js" 파일을 include하였습니다.
1
<script src="/jqgrid/src/i18n/grid.locale-kr.js"></script>
다시 실행을 해보도록 하겠습니다.
그리드 1페이지 결과
그리드 2페이지 결과
실행결과 정상적으로 출력되네요
다음에 시간이 되면 컬럼 수정 및 기타 추가 기능에 대하여 포스팅 해보도록 하겠습니다.
출처: http://hellogk.tistory.com/83 [IT Code Storage]
댓글 ( 4)
댓글 남기기