Grid Library

강의를 진행하다 보면 수강생들중 Grid Library 를 목적으로 수업을 들어온 경우를 자주 본다. 

내가 수업에서 진행하는 많은 기능중에서 Grid 만을 목적으로 들어온 경우인데 역시다 Grid 의 성격상 Javascript 라이브러리중 내용이 많은 라이브러리 축에 드는가보다.. 수업을 들어올정도면..

 

사실 관리자 페이지 등등의 웹에서 Grid 화면을 제공해주는건 필요한데 문제는 너무 많은 라이브러리들이 있다는 것이다. 나도 사실 다 테스트 해보지 않았다..

이런 라이브러리들중 어떤 것을 사용할것인가에 대한 의사 결정은 여러가지가 고려되어야 할것 같다. 

일단 라이센스도 고민이되고 제공하는 기능도 단순 그리드 화면을 벗어나 Edit, Search, Delete, Sub Grid 등등 필요한 기능이 제공되는것인가 그 기능이 얼마나 파워풀한가도 중요 고려사항이다.

또한 Grid 의 특성상 성능도 어느정도인지가 중요한 문제가 된다.


내가 어느정도까지 테스트 해볼수 있을지 모르겠지만 가장 많이 화자가 되는 jqGrid 부터 시작해서 몇몇 무로 라이브러리들을 테스트 해보고 강좌도 올릴 생각이다.


jqGrid 소개 및 기본 설정

  • jQgrid(http://www.trirand.com/blog/) 는 jQuery 를 이용하는 플러그인이며 MIT 라이센스를 따르고 있다.
  • Ajax 기능이 내장되어 있으며 Ajax 통신을 통해서 서버와 통신을 통해서 동적 데이터를 이용한 Grid화면 제공에 최적화 되어 있다.
  • jgGrid 는 여러 모듈로 나누어져 있으며 다운로드시 필요한 모듈만 선택해서 다운로드가 가능하다.
  • jqGrid 를 위해서는 여러개의 파일이 필요한데 기본으로 jqGrid 가 jQuery UI Theme 를 이용함으로 jQuery UI 쪽 CSS 파일이 필요하며 jqGrid CSS 파일이 필요하다. 
  • 그리고 jQuery 라이브러리 파일과 jqGrid 라이브러리 파일 그리고 국제화와 관련된 라이브러리 파일이 필요하다. 


        <link rel="stylesheet" type="text/css" media="screen" href="./libs/css/ui-lightness/jquery-ui-1.8.18.custom.css"/>

        <link rel="stylesheet" type="text/css" media="screen" href="./libs/css/ui.jqgrid.css"/>

        <script src="./libs/js/jquery-1.7.2.min.js">

        </script>

        <script src="./libs/js/grid.locale-en.js">

        </script>

        <script src="./libs/js/jquery.jqGrid.min.js">

        </script> 


1.jpg 


가장 위에 jqGrid 화면의 title 등과 jqGrid 화면을 접거나 펼칠수 있는 버튼을 제공하는 Caption Layer 가 존재한다.

그 아래 각 column 데이터의 이름이 들어가는 Header Layer 가 위치한다. Header Layer 에는 Column 의 이름이 기본이며 만약 정렬을 제공한다면 정렬 올름차순 내림차순등을 표현하는 간단한 icon 이 같이 나온다.

실제 데이터가 보이는 부분을 body layer 라고 한다.

맨 마지막 Navigation Layer 가 존재한다. 

Navigation Layer 에는 기본 몇페이지 인지를 보여주는 화면과 페이지 이동을 위한 next, prev 등의 버튼 그리고 한 페이지에 몇개의 데이터를 출력할것인지를 결정하는 콤보박스가 위치하며 설정한다면 전체 데이터에서 몇번째 데이터를 보고 있는지에 대한 정보등이 출력될수 있다.


HTML 페이지 내에서 jqGrid 화면을 위해 우선 태그로 영역을 먼저 확보한다.

jqGrid 화면이 출력될 위치를 두가지로 구분하고 있는데 데이터가 들어갈 부분과 page 번호등을 보여주는 Navigation Layer 가 들어갈 위치를 지정한다. 

데이터가 들어갈 위치는 table 태그를 이용하도록 되어 있으며 navigation layer 가 들어갈 위치는 div 태그로 지정한다.

 

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

<div id="pager"></div>

 

 

HTML 페이지에 jqGrid 를 적용하기 위해서 $("#list").jqGrid({ }); 을 사용한다. list 라는 id 값을 가지는 html 구성요소에 적용하며 { } 에 jqGrid 를 위한 옵션을 설정한다

 

<script type="text/javascript">

$(function(){

$("#list").jqGrid({


}); });

</script> 

 

 

 

jqGrid 기초 Option

 

  • url:'example.php' : 데이터를 획득하기 위한 url 이다. 고정적인 xml 파일이나 json 파일도 가능하지만 일반적으로 서버사이드 스크립트를 위한 url 이며 서버 DB 에서 데이터를 추출해서 xml 혹은 json 스타일로 데이터를 반환하는 url 이다.
  • datatype: 'xml' : 핸들링 하는 데이터의 type 이다. json, 혹은 xml 이 설정된다
  • mtype: 'GET' : HTTP Request Method 지정, GET POST 지정
  • colNames:['Inv No','Date', 'Amount','Tax','Total','Notes'] : Header Layer 에 출력되는 각 column 의 이름이며 배열 정보로 설정한다.
  • colModel :[  ] : 각 column 에 대한 상세 정보 설정이다. 화면에 서버로부터의 데이터를 출력하기 위해 가장 중요한 설정이며 이후 colModel 설정을 자세히 살펴보도록 하겠다.
  • xmlReader : 서버로부터 넘어오는 데이터가 xml 인경우 xmlReader 설정을 통해 각 의미의 데이터를 읽는 방법에 대해 명시한다. 여러 설정이 들어가는데 이후 자세히 살펴보도록 하겠다.
  • pager: '#pager' : 페이지를 표현하는 도구 모음이 화면에 보일 html 의 id 값이다.
  • rowNum:10 : 초기 화면에 출력할 데이터의 row 갯수이다.
  •  
  • rowList:[10,20,30] : 유저 선택에 의해서 화면에 출력할 row 갯수이며 콤보박스로 표현.
  • caption: 'My first grid' : jqGrid 의 title 이름이다. 


$("#list").jqGrid({ 

url : '/WebAppTest/spring/member', 

datatype : 'xml', 

mtype : 'GET', 

colNames : [ 'UserId9', "Phone", 'Email', 'Address',Reg Date', 'Note' ], 

colModel : [ 

 {name : 'memberId',index : 'memberId'}, 

 {name : 'phone',index : 'phone'}, 

 {name : 'email',index : 'email'}, 

 {name : 'address',index : 'address'}, 

 {name : 'regDate',index : 'regDate'}, 

 {name : 'note',index : 'note'} 

], 

xmlReader : { 

root : "page",  row : "rows", page : "page>page",  total:"page>total", 

records : "max", id : "rows>id" 

}, 

pager : jQuery('#pager'), 

rowNum : 10, 

rowList : [ 10, 20, 30, 40 ], 

caption : 'My first grid', 

}); 



colModel Option


  • name : 해당 column 에 출력해야할 데이터 이름이다. 서버로부터 넘어오는 데이터의 이름값을 명시한다.
  • index : 데이터 출력과 관계 없으며 해당 컬럼을 정렬하기 위해서 서버에 데이터 전송시에 넘어가는 이름이다. 이런 이름으로 정렬해서 데이터를 넘겨달라고 할때의 키값으로 사용된다.
  • width : column 의 사이즈 지정 
  • align : column 내에서의 데이터 정렬. left, right, center 등을 지정한다.
  • sortable : 해당 컬럼이 정렬될수 있는지를 지정한다. 전체 jqGrid 에 sortable true 설정될때 특정 컬럼의 정렬을 허용하지 않을때 사용된다.
  • hidden : 특정 컬럼의 내용을 보이지 않게 하기 위해서 설정된다.
  • format : intefer, number, currency, date 등의 컬럼 데이터의 format 을 설정하기 위해서 사용된다.



xmlReader, jsonReader


xmlReader

  • root : 읽어 들여야할 xml 데이터의 root 태그를 지칭한다.
  • row : Grid화면의 row 데이터를 표현하는 xml 에서의 태그를 지칭한다.
  • page : page 정보를 표현한다. 현재 페이지 정보를 의미하는 태그를 지칭한다.
  •  
  • total : 전체 페이지 갯수의 데이터를 가지는 태그를 지칭한다.
  • rocods : 전체 데이터 갯수를 지칭하는 태그를 지칭한다.


jsonReader

jQuery("#gridid").jqGrid({

...

   jsonReader : {

     root: "rows",

     page: "page",

     total: "total",

     records: "records",

     repeatitems: true,

     cell: "cell",

     id: "id",

     userdata: "userdata",

     subgrid: {root:"rows",

        repeatitems: true,

       cell:"cell"

     }

   },

...

});

 

 

 


jqGrid 추가 옵션


  • postData : jqGrid 데이터 요청을 위해서 서버 request 시 추가로 넘기고자 하는 데이터가 있다면 설정한다. key=value 형태로 요청 query 에 추가되어 전송된다.
  • sortable :  초기 sort 조건과 관련되며 true 이면 초기 데이터가 정렬되서 보인다.
  • sortname : 초기 데이터 정렬시 정렬조건이다. 이곳에 설정된 값이 서버에 정렬 조건으로 전송된다.
  • sortorder : desc asc 등 순방향 정렬, 역방향 정렬

  • viewrecords : 화면 하단에 총 몇개중에서 몇번째꺼를 보여주고 있는지에 대한 문자열을 표시할것인가에 대한 설정이다.
  • width : 전체 grid 화면의 사이즈를 지정하며 column 각각의 사이즈는 colModel 에서 지정한다. column 에 각각 width 가 설정되지 않으면 가장 큰 컬럼을 기준으로 동일하게 사이즈를 맞추어 준다.
  • autowidth : width 속성과 같이 사용못하며 자동으로 column size 조정된다.
  • toolbar : toolbar 의 사용여부와 위치를 지정할수 있다.
  • loadonce : reload 여부이며 true 로 설정하면 한번만 데이터를 받아오고 그 다음부터는 데이터를 받아오지 않는다. 그 경우 sort 는 서버 연동에 의해 되지 않고 자체적으로 처리된다.
  • rownumbers : 각 row 의 맨 앞줄에 각 row 의 번호가 자동으로 부여된다.
  • rownumWidth : 줄번호의 size 지정
  • height: 전데 grid 화면의 세로 사이즈
  • loadtext : 서버연동시 loading 중이라는 표시가 뜨는데 그곳의 문자열 지정
  • emptyrecords : 데이터가 없을경우 보여줄 문자열 지정
  • recordtext:  총 몇건중 몇건을 보고 있다는 문자열을 원하는데로 바꾸기 위해서 사용된다


$("#grid").jqGrid({

           .........

           postData : { hello : 'world’},

           colNames : [ 'UserId9', "Phone", 'Email', 'Address',Reg Date', 'Note' ],

           colModel : [ ......................],

           xmlReader : {.........................},

           pager : jQuery('#pager'),

           rowNum : 10,

           rowList : [ 10, 20, 30, 40 ],

           sortable : false,

           sortorder : "desc",

           viewrecords : true,

           caption : 'My first grid',

           autowidth : 'true',

           toolbar : [ true, 'top' ],

           gridview : true,

           loadonce : true,

           rownumbers : true,

           rownumWidth : 40,

           height:200,

           loadtext:"Loading..!!.",

           emptyrecords:"No records to view",

           recordtext:"View11 {0} - {1} of {2}",

            

}); 


jqGrid Event


처리하고자 하는 이벤트를 jqGrid에 속성으로 주며 해당 이벤트가 발생했을때 호출될 함수를 지정하면 된다


onSelectRow : function(id){

           if(id && id!==lastsel){

                     jQuery('#grid').jqGrid('restoreRow',lastsel);

                     jQuery('#grid').jqGrid('editRow',id,true);

                     lastsel=id;

           }

},


afterInsertRow

afterInsertRow 이벤트는 각 row 가 추가된후 발생한다. 만약 10개의 row 가 추가되는 grid가 있다면 결국 10번 발생하게 된다. 각 row의 id 값과 row 의 데이터 그리고 row 를 구성하기 위한 response element 가 매게변수로 전달된다.

 

beforeProcessing

서버로부터 데이터를 받은후 화면에 찍기 위한 processing 을 진행하기 직전에 호출된다. 넘어온 data 와 status, xhr 을 받을수 있는데 status 값을 이용해서 성공했는지에 대한 여부를 확인할수 있다.

 

beforeRequest

서버로 데이터를 요청하기 직전에 호출된다.

 

beforeSelectRow

유저가 row 를 클릭하는 순간 발생하며 선택한 row 의 id 값이 전달된다. 이곳의 return 값이 중요한데 true 로 설정하면 유저의 선택으로 보고 false 로 선택하면 선택을 안한걸로 본다. 결국 false 로 리턴하면 그다음 이벤트가 발생하지 않는다.

 

gridComplete

grid 가 모든 작업을 완료한 후 발생한다.

 

loadBeforeSend

XHR 에 의해 서버로 요청이 들어가기 전에 호출된다. 요청전 헤더값 설정등에 사용된다. 만약 이 함수가 false 를 리턴하면 요청이 취소된걸로 본다.

 

loadComplete

서버에 요청을 보낸 직후 호출된다.

 

loadError

요청 실패시에 호출된다.

 

onCellSelect

유저의 각 column 선택을 처리하기 위해서 사용된다. 각 row 선택 이벤트도 있지만 선택한 cell 을 식별하기 위해서 사용되며 매개변수로 선택한 rowid, columnidex 그리고 column 데이터가 반환된다.

 

onHeaderClick

유저에 의해 grid화면의 header 부분이 선택되었을때 호출된다. 유저가 grid헤더의 접었다 폈다를 지원하는 아이콘 클릭시 호출된다.

 

onPaging

유저에 의해 페이징이 변경이 되는 경우 호출된다. next, prev, first, last 버튼 클릭시 호출되며 어느 버튼을 눌렀는지를 매게변수로 받을수 있다.

 

onRightClickRow

유저의 오른쪽 마우스 버튼을 누른순간 호출된다.

 

onSelectAll

체크박스를 눌러 모든 row 를 선택한 순간 호출된다.

 

onSelectRow

각 row 에 제공되는 체크박스를 선택한 순간 호출된다.

 

onSortCol

유저가 각 column을 정렬시킬수 있는데 정렬시키기 위해서 버튼을 누르는 순간 호출된다.

 

resizeStart

유저에 의해 column 의 사이즈가 조정되는 순간 호출된다

  


jqGrid 추가 기능


사실 앞에까지 살펴본 내용은 jqGrid 를 이용하기 위한 가장 기본적인 option 및 설정들이었고 이런 Grid 시스템을 적용시키는 주된 이유는 강력한 Search 기능 이거나 Edit 기능 혹은 Delete 등의 기능이 필요하기 때문일 것이다.

jqGrid 홈페이지에서 다루는 내용을 이곳에서 모두 다루는것도 의미가 없을뿐더러 웹이라는 공간에서 이를 일일이 이야기하는것도 한계가 느껴진다. 자세한건 수업시간에 실습을 통해서 다루겠다....


jqGrid 검색

jQuery("#grid").jqGrid('navGrid','#pager',

           {edit:false,add:false,del:false,search:true},

           {},

           {},

           {},

           {}

);


2.jpg 


jqGrid 수정

jQuery('#grid').jqGrid('editRow',id,true); 

 

3.jpg 


jqGrid 삭제

데이터 삭제를 위해서 왼쪽 아래에 삭제를 위한 버튼을 제공해누고 Row 를 선택한후 버튼을 눌러 간단하게 삭제가 가능하도록 제공해줄수 있다


4.jpg 

이 이외에 jqGrid 는 정말 기능이 많다는 생각이 들정도로 sub grid, tree grid 등도 제공이 된다.