소개
jqGrid는 jQuery라이브러리를 이용한 Grid Plugin입니다.
jqGrid는 웹에서 테이블 형식의 데이터를 표시하고 조작을 위한 Ajax기반 자바스크립트 컨트롤러입니다.
jqGrid는 기본적으로 jQuery-UI를 이용하기 때문에 원하는 테마를 만들어서 사용가능합니다.
환경설정
그리드를 사용하기 위해서는 먼저 라이브러리를 다운 받아야 합니다. ( 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>
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 : 서버에 파라미터로 넘길 데이터를 설정합니다. 배열의 형태로 설정 가능합니다.
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'
}
});
});
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) : 정렬하기 전에(컬럼 헤더를 클릭 후) 발생하는 이벤트
