jqGrid 플러그인을 이용하여 그리드 연동 및 목록 출력시켜보기 + ajax 페이징 포함

이번포스팅은 jqGrid를 다운로드하여 연동 및 그리드 목록에 

데이터 출력시키는 방법에 대하여 알아보고자 합니다.

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 이란 파일을 생성 후 연동을 해보도록 하겠습니다.

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 태그를 이용해주어야 합니다.

로컬데이터를 그리드에 출력을 위한 스크립트코드

$(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형으로 변환해보기

기존 코드는 동일하고 스크립트 코드를 변경해보도록 하겠습니다.

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 파싱작업을 하도록 하겠습니다.

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 서버 코드를 변경해보도록 하겠습니다.

페이징처리 예를들기위한 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하였습니다.

<script src="/jqgrid/src/i18n/grid.locale-kr.js"></script>

다시 실행을 해보도록 하겠습니다.

그리드 1페이지 결과

그리드 2페이지 결과

실행결과 정상적으로 출력되네요 

다음에 시간이 되면 컬럼 수정 및 기타 추가 기능에 대하여 포스팅 해보도록 하겠습니다.

by 개발로짜