[jqGrid cookbook] 1. jqGrid

jqGrid/노하우정보 2015. 5. 29. 15:11

728x90

jqGrid를 시작하며

jqGrid 는 jQuery 기반의 그리드 플러그인입니다. 보통 테이블 기반의 데이터를 웹상에 표시하는 것보다 편집, 페이징, 검색, 정렬등의 부가적인 기능을 하는데 번거로울 수 있는데 jqGrid 를 이용하면 이를 좀 더 쉽게 구현할 수 있습니다. 물론 jqGrid를 사용하기 위해서는 사용법을 잘 지켜야 합니다.

사용법을 익히기 전에 먼저 jqGrid 예제를 하나 보겠습니다. 아래의 그리드는 테이블 형식의 데이터를 출력하는 것은 물론이고 각 컬럼에 대한 정렬, 검색, 새로고침, 페이징 등을 구현한 화면입니다.

코드량은 얼마나 될까요?

HTML 단 2줄, 스크립트는 25줄이면 그리드를 표현하고 검색, 정렬, 페이징 등의 다양한 기능을 구현할 수 있습니다. 물론 데이터는 서버에 요청을 해서 가져오는 것으로 라인수에는 포함하지 않았습니다만 아주 짧은 코드로 그리드의 다양한 기능의 구현하였습니다. 놀랍지 않으신가요? 놀랍지 않다면 어쩔 수 없네요.;;;

자 그럼 이렇게 유용한 jqGrid 에 대해서 한번 살펴보도록 하겠습니다.

jqGrid 선언

그리드를 사용하려면 jqGrid 를 다운받아야 합니다. ( http://www.trirand.com/blog/?page_id=6 ) 현재 버전은 4.6.0 입니다. 이때 script 의 순서를 반드시 지켜야 합니다. jqGrid 는 jQuery 기반으로 jquery 관련 스크립트를 그리드 보다 앞서 선언해야 하고 jqGrid 에서 사용할 변수를 포함하는 언어팩이 그 다음입니다. 그리고 마지막으로 jqGrid 관련 js 입니다. 즉 jquery.js , grid.locale-kr.js , jqGrid.js 순이라는 것입니다.

jqGrid 그리기

jqGrid 를 그리기 위해서는 우선 그릴 영역이 필요합니다. 원하는 곳에 table 태그와 함께 id 를 지정합니다. 다음과 같이 말이죠. <table id="list4"></table> 그리고 나서 스크립트에 그리드를 위한 설정을 합니다. 이 설정을 그리드에서는 옵션이라고 합니다. 그럼 코드를 보면서 옵션들에 대해 살펴보겠습니다.

grid.jqGrid({

datatype: "local",

height: 'auto',

colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],

colModel:[

{name:'id',index:'id', width:60, sorttype:"int"},

{name:'invdate',index:'invdate', width:90, sorttype:"date"},

{name:'name',index:'name', width:100},

{name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},

{name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},

{name:'total',index:'total', width:80,align:"right",sorttype:"float"},

{name:'note',index:'note', width:150, sortable:false}

multiselect: true,

caption: "Manipulating Array Data"

});

위에서 진하게 표시한 부분이 jqGrid 옵션으로 6개를 사용하였지만 실제 프로젝트에서는 다양한 옵션을 사용할 수 있습니다. 그리고 여러 개의 그리드 사용시 공통 설정에 대한 부분도 추후에 설명하도록 하겠습니다. 일단 그에 앞서 위의 코드에 대한 설명으로 그리드가 왜 나오는지에 대해 이해해 보겠습니다.

옵션 설명에 앞서 그리드의 영역에 대해 잠깐 보겠습니다. 그리드는 크게 네 부분으로 나뉩니다. 네 부분은 제목을 표현하는 Caption, 컬럼명이 들어가는 Header, 데이터를 출력하는 Body, 검색이나 편집등 사용자를 편의를 위한 Navigation 입니다.

다시 옵션을 살펴보면 그리드 옵션에 대한 설명은 다음과 같습니다.

- datatype : 그리드에 표시할 데이터의 타입을 지정합니다. xml, json, local 등을 많이 사용하고 기본값은 xml 입니다.

- height : Body 부분의 사이즈를 지정합니다. 'auto' 로 지정시 데이터 갯수에 따라 자동으로 높이를 계산합니다. 물론 데이터가 없을 경우는 Body 의 높이가 0이 됩니다.

- colNames : 컬럼명을 지정합니다.

- colModel : 각각의 컬럼에 대한 속성을 정의하는 부분으로 그리드에서 가장 중요합니다. colModel 의 옵션에 대해서는 자세히 살펴보겠습니다.

- multiselect : 멀티셀렉트 여부를 결정합니다. true 로 지정시 컬럼의 맨앞에 체크박스가 표시되고 여러개의 행을 선택할 수 있습니다.

- caption : Caption 영역에 제목을 표시합니다.

colModel Option

colModel 은 그리드의 옵션중에서 가장 중요한 부분입니다. 각각의 컬럼에 대한 상세 설정을 합니다. 물론 다양한 설정을 위해 여러개의 colModel 옵션이 존재합니다만 우선은 간단하게 알아보고 앞으로 다양한 예제들을 통해 천천히 알아보도록 하겠습니다.

- name : 필수 속성으로 유일한 이름을 지정해야 합니다. 경우에 따라 데이터를 자동 매핑하는데 사용하기도 합니다.

- index : 정렬시 사용할 이름을 지정합니다. 미지정시 정렬시 name 속성을 사용합니다.

- key : 유일한 row id 값을 위해 id 값으로 지정할 수 있습니다. 물론 반드시 하나의 컬럼에만 지정해야 하고 유일한 값을 가져야 합니다.

- width : 컬럼의 너비를 픽셀단위로 지정을 합니다. 퍼센트로 지정을 할 수 없습니다.

- align : Body 부분의 셀속성을 정의 합니다. left, center, right 값을 지정할 수 있고 기본값은 'left' 입니다.

- hidden : 컬럼의 숨김 여부를 정의합니다. 기본값은 false 입니다.

전체소스

위의 옵션들을 바탕으로 간단하게 로컬데이터를 화면에 출력하는 예제를 보겠습니다.

<!DOCTYPE html>

<html>

<script src="../js/jquery-1.11.0.min.js" type="text/javascript"></script>

<script src="../js/jquery-ui-1.11.1.min.js" type="text/javascript"></script>

<script src="../js/i18n/grid.locale-kr.js" type="text/javascript"></script>

<script src="../js/jquery.jqGrid.min.js" type="text/javascript"></script>

$(function(){

// 변수 선언

var i, max, myData, grid = $("#list4");

// grid 설정

grid.jqGrid({

datatype: "local",

height: 'auto',

colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],

colModel:[

{name:'id',index:'id', width:60, sorttype:"int"},

{name:'invdate',index:'invdate', width:90, sorttype:"date"},

{name:'name',index:'name', width:100},

{name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},

{name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},

{name:'total',index:'total', width:80,align:"right",sorttype:"float"},

{name:'note',index:'note', width:150, sortable:false}

multiselect: true,

caption: "Manipulating Array Data"

});

// 로컬 데이터

myData = [

{id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},

{id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},

{id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},

{id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},

{id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},

{id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},

{id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},

{id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},

{id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}

];

// 데이터 추가

for( i=0, max = myData.length ; i<=max ; i++ ){

grid.jqGrid('addRowData', i+1, myData[i]);

}

});

</script>

</head>

<body>

<table id="list4"></table>

</body>

</html>

전체 코드가 눈에 들어오나요? 일단 jqGrid 사용을 위해 라이브러리 선언 부분이 있고 하단에 table 지정한 부분도 있고 jqGrid 관련된 설정도 눈에 들어오는 것이 보입니다. 이제 앞으로가 시작이라 할 수 있습니다. 앞으로 다양한 예제들을 통해 jqGrid 를 좀 더 풍부하게 사용해 보도록 하겠습니다.

☞ 전체 소스 다운로드

참고

jqGrid wiki : http://www.trirand.com/jqgridwiki/doku.php

jqGrid demo : http://www.trirand.com/blog/jqgrid/jqgrid.html

jqGrid docs : http://www.trirand.com/blog/jqgrid/downloads/jqgriddocs.pdf

Source: https://github.com/javapark/jqgrid/blob/master/html/01.html

Download ZIP : https://github.com/javapark/jqgrid/archive/master.zip

728x90

저작자표시

'jqGrid > 노하우정보' 카테고리의 다른 글

[jqGrid#1] 그리드 주요옵션 - jqGrid Option, colmodel option (0)	2015.11.12
jqgrid 틀고정(forzen) 제한사항 (0)	2015.11.12
JQGrid 참고사항 (0)	2015.10.22
jQuery: 그리드 플러그인 – jqGrid (2/2) (0)	2015.05.29
Javascript : 함수(function) 다시 보기 (0)	2015.05.29
jQuery: 그리드 플러그인 – jqGrid (1/2) (0)	2015.05.29

nineDeveloper

안녕하세요 현직 개발자 입니다 ~ 빠르게 변화하는 세상에 뒤쳐지지 않도록 우리모두 열심히 공부합시다 ~! 개발공부는 넘나 재미있는 것~!

160x600