[jQuery jqGrid] 데이터 목록을 그리드로 좀더 깔끔하게 사용하기

이번에는 jqGrid 는 jQuery UI 테마랑 연동이 되는거 같다.. 하지만 소개이니 간단히 

설명과 샘플링을 해보도록 하겠음..

그리트 형태는 약간 엑셀? 이랑 비슷하다. 언뜻보면 FLEX의 그리드처럼 만들어 놓았다.

무료 그리드중에서는 jqGrid가 유명한거 같기도 하고...

어쨋든! jqGrid 다운로드부터 세팅까지 진행을 해보자~

jqGrid 다운로드 

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

해당 URL에서 다음 그림과 같이 본인이 그리드에서 사용하고자 하는 기능? 들을 체크후 

다운로드 버튼 클릭!

본인은 그냥 기본적으로 모두 체크 되있는데 다운받았다 

jqGrid API 문서겸 데모페이지

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

제공 기능들이 엄청나다 샘플링으로 jqGrid에서 데모와 소스를 제공한다.

화면을 보면서 필요한 샘플링을 응용해서 쓰도록 하자

지원하는 기능을 보니까 전에 소개한 tablednd.js 로 그리드 순서를 바꾸는 플러그인도 

적용되있는거 같다 +_+ 

본인은 이번에 심플하게 그리드에 리스트만 뿌리도록 해보겠다!!

아! 여기서 빠져있는것이 그리드 UI에 테마를 적용해줘야 테두리나 이쁜 색들이 나오니까

jQueryUI 사이트에서 테마를 다운받자!

jQueryUI 테마다운로드 페이지

http://jqueryui.com/themeroller/

위 사이트에 들어가면 다음 이미지 처럼 화면이 나온텐데

좌측 Roll your own인가 탭의 Download버튼 클릭

클릭을 하게되면 여러개의 다양한 테마를 다운받을 수 있는데 테마 종류는 Gallery 탭을 보면 달력들이 각각의 테마의 화면으로 표출되고 하단에 테마종류가 나온다

거기서 확인하고 받고싶은 테마를 Roll Your Own탭의 Download theme 버튼 클릭후 다음 페이지에서 설정해서 받도록 한다.

모든 준비는 끝 

우선 프로젝트에 플러그인 import를 하도록 하자

1. jQueryUI 세팅 

   다운받은 테마 압축파일을 해제하면 /css/테마이름 디렉토리 내에 "images" 폴더랑 

   jquery-ui-xxxx.css 가 2가지가 있을 것이다.

   min.css 버전은 저용량 버전이긴 하지만 나중에 우리가 수정하거나 보기 쉽게 하기 위해서

   는 min.css 보다는 그냥 .css 파일을 복사하자

   즉 해당 jQueryUI 폴더내에서 필요한거는 images 폴더 + min.css가아닌 그냥 .css 파일 

2. jqGrid 세팅

   지원하는 기능들을 추가로 쓰고 싶으면 plugins 폴더까지 필요하지만 심플하게 리스트만 

   출력할 예정이므로 본인은 "css" 디렉토리와 "js" 디렉토리만 복사하였다.

    

프로젝트 include구조는 다음과 같다.

버전이 업데이트 되면서 jquery.jqGrid.src.js 파일이 없어진듯 하다. 

만약 jquery.jqGrid.js 파일을 include하게된다면 jquery.jqGrid.js와 같은 경로로 jqgrid의 js디렉토리 내에 있는 모든 경로를 넣어주거나 jquery.jqGrid.js 파일의 path변수를 좀 변경해주어야 할거이다.

jquery는 어짜피 cdn 연동할꺼라 따로 include하지 않았다 필요하신분은 include

DEMO페이지 기준으로 샘플링 하는것이므로 영문은 한글로, 여러개의 컬럼은 2개정도로 

해서 소스를 작성해보았다.

구조를 대략 보니 extJS 의 GRID PANEL과 비슷한 구조인듯 -_-ㅋ

html페이지에 그리드 출력에 필요한 스크립트와 css파일을 import 해보자

<link rel="stylesheet" href="/grid/css/jquery-ui-1.9.2.custom.css" />
<link rel="stylesheet" href="/grid/css/ui.jqgrid.css" />
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript" src="/grid/js/jquery.jqGrid.src.js"></script>

다음에는 그리드를 표출시킬 html의 테이블 껍데기를 만들어보자

<table id="list"></table>

샘플링 첫번째 table 빈껍데이터 그리드 껍데기만 만들어 보기!!

데이터 리스트는 존재 하지않는 상태에서 실행하는 코드입니다.

배열 코드는 화면 보시고 작성하시죠

     $(function(){
		$("#list").jqGrid({
			datatype: "local",
			height: 250,
		   	colNames:['컬럼1','컬럼2'],
		   	colModel:[
		   		{name:'col1',index:'col1'},
		   		{name:'col2',index:'col2'},
		   	],
		   	caption: "그리드 배열 데이터 샘플링"
		});
	})

실행화면입니다

오 깔끌하네요 +_+ ㅋㅋㅋ

다음은 데이터를 한번 넣어보자고요~

추가로 넣어주셔야 할 스크립트 코드입니다.

             //그리드에 들어갈 데이터
		var mydata = [
			     	   {col1:"내용1",col2:"내용1"},
			     	   {col1:"내용2",col2:"내용2"},
			     	 ];
	    //배열을 반복문으로 돌려서 그리드에 add 시킨다
		for(var i=0;i<=mydata.length;i++) {
			$("#list").jqGrid('addRowData',i+1,mydata[i]);
		}

자 한번 실행 ㄱㄱ???

오홋 잘 나오네요 ㅎㅎ 

jqgrid의 데모사이트를 응용하셔서 드래드기능, ajax로 데이터 뽑아오는기능 , 페이징 기능등잘 응용하시면 되실거 같습니다~ 

도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!