jQuery: 그리드 플러그인 – jqGrid (1/2)

1. 소개

• jqGrid는 jQuery라이브러리를 이용한 Grid Plugin입니다.
• jqGrid는 웹에서 테이블 형식의 데이터를 표시하고 조작을 위한 Ajax기반 자바스크립트 컨트롤러입니다.
• jqGrid는 기본적으로 jQuery-UI를 이용하기 때문에 원하는 테마를 만들어서 사용가능합니다.

jqGrid Wiki에서는 jqGrid를 위와 같이 소개하고 있습니다. (편의상 이제부터 jqGrid를 그리드라고 호칭하겠습니다.) 즉 그리드는 Ajax가 내장되어 있어서 조금만 이해하고 공부한다면 쉽게 데이터를 화면에 뿌려줄 수 있지만, 반대로 jQuery 기반의 플러그인이기 때문에 jQuery에 대한 기본적인 지식이 없다면 사용하기 어려울 것입니다. 그리드의 최고 장점 중의 하나는 페이징, 정렬과 같은 기능을 제공해주는 것입니다. 물론 그리드 내부에서 규정하고 있는 형식을 맞춰서 사용하여야 하지만 그리드에 조금만 익숙해진다면 페이징, 정렬을 서버에서 구현하는 것보다 효율적으로 개발할 수 있습니다. 또 jQuery-UI에서 제공하는 CSS로 자기 입맛에 맞는 디자인을 할 수 있으니 이 또한 그리드의 장점입니다.

* jqGrid는 jQuery-UI 제공하는 CSS로 디자인을 바꿀 수 있습니다.

 다음은 그리드의 동작원리입니다. 먼저 클라이언트가 페이지를 서버에게 요청합니다. 서버는 요청한 페이지를 응답할 것이고 페이지가 로드된 후 스크립트를 호출합니다. 스크립트 내에 있는 그리드는 Ajax통신으로 데이터를 가지고 와서 html내에 있는 table에 그려주는 방식으로 동작합니다.

 

2. 환경설정

그리드를 사용하기 위해서는 먼저 라이브러리를 다운 받아야 합니다. ( http://www.trirand.com/blog/?page_id=6) 다운을 받은 후 사용 시 유의할 점은 script 선언 순서입니다. 그리드는 jQuery 기반이기 때문에 꼭 jQuery를 그리드보다 먼저 선언하여야 합니다.

// jqGrid 환경설정입니다. <link rel="stylesheet" type="text/css" media="screen" href="../resources/css/jquery-ui-1.10.4.custom.css" /> <link rel="stylesheet" type="text/css" media="screen" href="../resources/css/ui.jqgrid.css" /> // jQuery js파일을 jqGrid js파일보다 먼저 선언해주어야 합니다. <script src="../resources/js/jquery-1.11.0.min.js" type="text/javascript"></script> <script src="../resources/js/i18n/grid.locale-kr.js" type="text/javascript"></script> <script src="../resources/js/jquery.jqGrid.min.js" type="text/javascript"></script>

1 2 3 4 5 6 7 8

// jqGrid 환경설정입니다. <link rel="stylesheet" type="text/css" media="screen" href="../resources/css/jquery-ui-1.10.4.custom.css" /> <link rel="stylesheet" type="text/css" media="screen" href="../resources/css/ui.jqgrid.css" />   // jQuery js파일을 jqGrid js파일보다 먼저 선언해주어야 합니다. <script src="../resources/js/jquery-1.11.0.min.js" type="text/javascript"></script> <script src="../resources/js/i18n/grid.locale-kr.js" type="text/javascript"></script> <script src="../resources/js/jquery.jqGrid.min.js" type="text/javascript"></script>

 

 

3. Option

우선 그리드를 그리기 위해서는 그리드를 그려줄 table이 필요합니다. 선언한 테이블에 ID 값을 주고 스크립트에서는 그 ID 값에 그리드를 설정해주면 됩니다. 그리드를 그리기 위한 설정 시 기본 옵션들의 규칙은 “name : value”의 형태입니다. 여기서 value 값은 단순한 값일 수도 있지만, 함수일 수도 있습니다. 그리드의 옵션 개수는 상당히 많지만 중요한 옵션 몇 가지 소개하겠습니다.

• url : 데이터를 가지고 올 수 있는 주소를 입력합니다.
• mtype : 요청방식을 설정합니다. GET/POST
• datatype : 가지고 오는 데이터의 타입을 설정합니다. 보통 xml, json,local 이렇게 세 가지를 자주 사용합니다.
• colNames : 그리드 각각의 컬럼에 출력되는 이름입니다. 배열로 설정합니다.
• colModel : 각 컬럼에 대한 상세 정보입니다. 서버로부터 받아온 데이터를 매핑해서 출력합니다.
• jsonReader/xmlReader : 데이터 타입이 json/xml일 경우 reader를 통해서 데이터를 어떻게 읽어드릴지 설정할 수 있습니다.
• rowNum : 초기에 출력할 데이터의 개수를 설정합니다.
• pager : 그리드의 대표기능인 페이저를 설정합니다. 그리드 테이블 밑에 div를 넣어주고 그 div의 id값을 써주면 됩니다.
• multiselect : row마다 selectbox가 생깁니다.
• postData : 서버에 파라미터로 넘길 데이터를 설정합니다. 배열의 형태로 설정 가능합니다.

 

4. colModel Option

그리드의 옵션 중에서도 중요한 옵션이 여러 가지 있겠지만, 가장 중요하다고 생각하는 옵션은 data와 직접 관련있는  colModel이라고 생각합니다. 중요한 만큼 그리드에서도  colModel만을 위한 옵션들을 제공하고 있습니다. colModel의 기본적인 특징은 데이터를 매핑 해준다는 것입니다. 매핑이 이뤄지는 방식은 colModel 옵션 중 하나인 “name”을 이용하여 이뤄집니다. 이때 “name”의 value값을 데이터의 변수명과 일치시켜주면 자동으로 매핑이 됩니다.

• name : 출력할 데이터의 이름입니다. 서버에서 받은 데이터의 변수명을 명시해줍니다.
• index : 컬럼 정렬 시 서버에 넘어가는 값입니다. index값을 설정하지 않으면 name값이 넘어갑니다.
• width : 컬럼의 넓이를 설정합니다.
• align : 컬럼 내 데이터의 정렬을 설정합니다.
• hidden : 데이터값은 설정하고 화면에서 보이고 싶지 않을 때 사용합니다.
• formatter : 데이터로 들어온 값을 특정 형식으로 변환해서 보여줄 수 있습니다.

 

// jqGrid 예제 // jqGrid option, jqGrid colModel option 포함 <table id="grid"></table> <div id="pager"></div> <script type="text/javascript"> var $Grid = {}; $(document).ready(function(){ $Grid = $('#grid'); $Grid.jqGrid({ url : '../resources/server.json', datatype : "json", mtype : "get", jsonReader : { id : "id" // 대표 아이디를 설정 ,root : "employee" // 데이터의 시작을 설정 }, colNames : [ '아이디', '이름', '나이', '성별', '직위' ], colModel : [ { name : 'id', width:40, align:'center'}, { name : 'name', width:80, align:'left' }, { name : 'age', width:80, align:'left' }, { name : 'sex', width:80, align:'right' }, { name : 'position', width:50, align:'right' } ], pager : '#pager', rowNum : '10', multiselect : true, postData : { id : 'id', name : 'name' } }); });

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

// jqGrid 예제 // jqGrid option, jqGrid colModel option 포함 <table id="grid"></table> <div id="pager"></div> <script type="text/javascript"> var $Grid = {}; $(document).ready(function(){      $Grid = $('#grid');      $Grid.jqGrid({           url : '../resources/server.json',           datatype : "json",           mtype : "get",           jsonReader : {                id : "id" // 대표 아이디를 설정                ,root : "employee" // 데이터의 시작을 설정           },           colNames : [                           '아이디',                           '이름',                           '나이',                           '성별',                           '직위'                      ],           colModel : [                     { name : 'id',        width:40,  align:'center'},                     { name : 'name',      width:80,  align:'left'  },                     { name : 'age',       width:80,  align:'left'  },                     { name : 'sex',       width:80,  align:'right' },                     { name : 'position',  width:50,  align:'right' }             ],           pager : '#pager',           rowNum : '10',           multiselect : true,           postData : {                id : 'id',                name : 'name'           }     }); });

* jqGrid 예제

colModel 옵션을 정리하고 예제까지 살펴보았습니다. colModel옵션 중 프로젝트를 진행하면서 유용하게 사용한 formatter라는 옵션이 있습니다. formatter는 그리드 내에서 기본적으로 제공해주는 타입도 존재하지만, 사용자가 자기 스타일대로 바꾸어서 사용할 수 있는 custom_formatter도 존재합니다. custom_formatter는 함수의 형태로 되어 있습니다. 파라미터로 받는 값은 cellValue, options, rowObject 인대 여기서 유의할 점은 파라미터 명은 바뀌어도 상관없으나, 파라미터의 순서는 지켜줘야 합니다.

• cellValue : 형식이 바뀔 값입니다. 즉 초기에 들어온 데이터 그 상태
• options : 해당 row의 colModel의 정보와 rowId의 정보가 들어있습니다.
• rowObject : 해당 row의 데이터 정보 전부를 가지고 있습니다.

<table id="grid"></table> <div id="pager"></div> <script type="text/javascript"> var $Grid = {}; $(document).ready(function(){ $Grid = $('#grid'); $Grid.jqGrid({ url : '../resources/server.json', datatype : "json", mtype : "get", jsonReader : { id : "id" // 대표 아이디를 설정 ,root : "employee" // 데이터의 시작을 설정 }, colNames : [ '아이디', '이름', '나이', '성별', '직위' ], colModel : [ { name : 'id', width:40, align:'center'}, { name : 'name', width:80, align:'left' }, { name : 'age', width:80, align:'left' }, // custom_formatter 적용 { name : 'sex', width:80, align:'right' , formatter : function(cellValue,options,rowObject){ if(cellValue == 'male'){ return '남자'; }else if(cellValue== 'female'){ return '여자'; } }}, { name : 'position', width:50, align:'right' } ], pager : '#pager', rowNum : '10', multiselect : true, postData : { id : 'id', name : 'name' } }); });

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

<table id="grid"></table> <div id="pager"></div> <script type="text/javascript"> var $Grid = {}; $(document).ready(function(){      $Grid = $('#grid');      $Grid.jqGrid({           url : '../resources/server.json',           datatype : "json",           mtype : "get",           jsonReader : {                id : "id" // 대표 아이디를 설정                ,root : "employee" // 데이터의 시작을 설정           },           colNames : [                            '아이디',                           '이름',                           '나이',                           '성별',                           '직위'                      ],           colModel : [                     { name : 'id',         width:40,  align:'center'},                     { name : 'name',       width:80,  align:'left'  },                     { name : 'age',        width:80,  align:'left'  },                     // custom_formatter 적용                     { name : 'sex',        width:80,  align:'right' , formatter : function(cellValue,options,rowObject){                          if(cellValue == 'male'){                               return '남자';                          }else if(cellValue== 'female'){                               return '여자';                          }                     }},                     { name : 'position',  width:50,  align:'right' }             ],           pager : '#pager',           rowNum : '10',           multiselect : true,           postData : {                id : 'id',                name : 'name'           }     }); });

 

* custom_formatter 적용

보통 custom_formatter를 사용 시 위의 예제처럼 사용합니다. 하지만 자바스크립트에서의 함수는 일급객체의 특성을 가집니다.(자세한 내용은 넥스트리 블로그에 게시된 이재욱님의 “Javascript : 함수(function) 다시보기“를 참조하세요.) 이런 특성을 이용한다면 덤으로 코드 읽기가 편해집니다.

{name : 'sex' , width : 80, formatter : function(cellValue,options,rowObject){if(cellValue == 'male') return '남자';}} // 일급객체의 특성 이용 var formatter = function(cellValue,options,rowObject){if(cellValue == 'mail') return '남자';} {name : 'sex' , width : 80, formatter : formatter} // 두개의 코드는 같은 결과를 보여준다.

1 2 3 4 5 6 7 8 9

{name : 'sex' , width : 80, formatter : function(cellValue,options,rowObject){if(cellValue == 'male') return '남자';}}   // 일급객체의 특성 이용   var formatter = function(cellValue,options,rowObject){if(cellValue == 'mail') return '남자';}   {name : 'sex' , width : 80, formatter : formatter}   // 두개의 코드는 같은 결과를 보여준다.

 

5. Event

그리드에서 이벤트를 부여하는 방법은 옵션을 주는 것과 같습니다. 해당하는 이벤트가 발생할 때를 고려해서 함수를 지정해주면 됩니다.(이벤트 이름 뒤에 오는 것은 파라미터입니다.)

• afterInsertRow(rowId,rowData,rowElement) : 각 줄이 삽입된 후 일어나는 이벤트입니다. 그리드 데이터가 5개가 있어서 5줄이 삽입된다면 이벤트도 결국 5번 일어납니다.
• beforRequest(없음) : 서버로 데이터를 요청하기 전에 이루어지는 이벤트입니다.
• gridComplete(없음) : 그리드가 모든 작업이 이루어진 후에 발생하는 이벤트입니다.
• loadComplete(data) : 서버에 요청을 보낸 직후 호출하는 이벤트입니다. data는 Ajax호출 후 받아오는 데이터입니다.
• loadError(xhr,status,error) : 서버에 보낸 요청이 실패했을 때 발생하는 이벤트입니다.
• onCellSelect(rowId,indexColumn,cellContent,eventObject) : 그리드 셀을 선택하였을 때 발생하는 이벤트입니다. 선택한 컬럼의 정보와 셀의 정보도 반환해 줄 수 있습니다.
• onSelectRow(rowId,status,eventObject) : 그리드의 행을 선택하였을 때 발생하는 이벤트입니다. 옵션중 multiselect로 인해서 체크박스가 활성화되었을 때, 체크박스의 상태도 반환해 줄 수 있습니다.
• onSortCol(index,indexColumn,sortOrder) : 정렬하기 전에(컬럼 헤더를 클릭 후) 발생하는 이벤트

 

6. 맺음말

그리드를 사용하기 위한 환경설정에서부터 기본적인 옵션,이벤트까지 훑어 보았습니다. 개개인의 차이가 분명 있겠지만, 프로젝트를 하면서 자주 사용하였던 옵션 및 이벤트를 중심으로 살펴보았습니다. 그 외에 그리드에서 제공하는 메소드도 존재합니다. 빠른 시일 내에 그리드에서 제공하는 메소드와 프로젝트에서의 경험사례를 글로 담아 찾아뵙겠습니다. 감사합니다.
참고도서 및 사이트

• jqGrid Wiki (http://www.trirand.com/jqgridwiki)
• jQuery-UI (http://jqueryui.com/themeroller)
• jqGrid Demos(http://trirand.com/blog/jqgrid/jqgrid.html)
• jqGrid 소개 블로그(http://insnote.com/xe/index.php?mid=kkang&page=2&document_srl=297)
• 데꾸벅-정리되지 않은 생각들(http://techbug.tistory.com/158)