진이의 Developer Story
jqGrid 기본 사용방법 본문
설연휴는 잘들 보내셨나요? 
저는 여기저기 다니느라 바쁜 연휴였던 것 같아요.
오늘은 jqGrid에 대해 알아보려고 합니다.
무료로 사용할 수 있는 jQuery 라이브러리로써 많이 사용되는 jqGrid.
jqGrid는 여러가지 데이터를 파싱해서 그리드로 뿌려줍니다.
오늘은 ajax를 호출하여 테이블의 내용을 그리드에 뿌리는 방법에 대해 알아보겠습니다.
CREATE TABLE invheader (
invid int(11) NOT NULL AUTO_INCREMENT,
invdate date NOT NULL,
client_id int(11) NOT NULL,
amount decimal(10,2) NOT NULL DEFAULT '0.00',
tax decimal(10,2) NOT NULL DEFAULT '0.00',
total decimal(10,2) NOT NULL DEFAULT '0.00',
note char(100) DEFAULT NULL,
PRIMARY KEY (invid)
);
위와 같은 데이터베이스가 존재하는 상황에서 해당 테이블 내의 select한 row들을 그리드에 뿌려주려고 합니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>My First Grid</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.8.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<style type="text/css">
html, body {
margin: 0;
padding: 0;
font-size: 75%;
}
</style>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#list").jqGrid({
url: "example.json",
datatype: "json",
mtype: "POST",
colNames: ["Inv No", "Date", "Amount", "Tax", "Total", "Notes"],
colModel: [
{ name: "invid", width: 55 },
{ name: "invdate", width: 90 },
{ name: "amount", width: 80, align: "right" },
{ name: "tax", width: 80, align: "right" },
{ name: "total", width: 80, align: "right" },
{ name: "note", width: 150, sortable: false }
],
pager: "#pager",
rowNum: 10,
rowList: [10, 20, 30],
sortname: "invid",
sortorder: "desc",
viewrecords: true,
gridview: true,
autoencode: true,
caption: "My first grid"
});
});
</script>
</head>
<body>
<table id="list"><tr><td></td></tr></table>
<div id="pager"></div>
</body>
</html>
해당 URL로 호출을 하면 호출한 결과 JSON 형태의 데이터를 불러옵니다.
그리고 그 데이터가 그리드에 매핑이 되면서 그려지는 것입니다.
여기서 중요한 점은 받아오는 JSON 데이터의 키값과 colModel의 name값이 일치해야만 매핑이 된다는 점 잊지마세요!
그리고 그리드는 테이블에 그려지기 때문에, 처음 jqGrid가 호출되는 부분을 보시면 $("#list").jqGrid로 되어 있지요?
id값이 list인 값에 호출이 되는데 위의 html 태그에서는 id가 list인 엘리먼트는 table태그네요!
그리고 paging(페이징)은 jqGrid에서 제공되는 부분이기 때문에, jqGrid가 요구하는 페이징 값만 서버사이드에서 제공을 해준다면 자동 페이징도 구현이 가능합니다.
페이징을 구현하기 위해서는 div 태그가 필요합니다.
jqGrid 옵션에 보시면 paging : "#pager" 라고 되어 있는 부분 확인하셨나요?
id값이 pager인 엘리먼트에 페이징을 구현하겠다는거죠!
id값이 pager인 div태그가 존재해야만 페이징이 구현이 됩니다.
아래는 jqGrid의 기본적인 프로퍼티들입니다.
발번역인점 죄송합니다. 
프로퍼티 | 설명 |
|---|---|
| url | 데이터를 받아오는 주소(위치)입니다. |
| datatype | jqGrid에서 그리드에 매칭될 수 있는 반환되는 정보의 타입입니다. |
| mtype | ajax 호출 방법(GET 또는 POST)을 정의합니다. |
| colNames | 컬럼의 이름을 담은 배열이며, 그리드의 열이름을 나타냅니다. |
| colModel | 컬럼의 모델을 나타내주는 배열이며, 그리드의 가장 중요한 부분입니다.
name: 컬럼의 이름입니다. 이름은 데이터베이스 테이블의 이름일 필요는 없습니다. 하지만 나중에 우리는 서로 다른 데이터 형식이있을 때 우리는 이것을 사용하는 방법을 볼 수 있습니다. |
| pager | 페이징 기능을 사용하고 싶다면 정의합니다. 반드시 유효한 HTML 엘리먼트이여야만 합니다. |
| rowNum | 그리드에 보여줄 레코드 수를 지정합니다. |
| rowList | 한 페이지당 보여줄 수 있는 레코드수를 변경할 수 있는셀렉트 박스를 구성하는 배열입니다. 실행 중에 변경하는 경우,이 매개 변수는 URL로 전달되는 ROWNUM 파라미터를 대체합니다. |
| sortname | 초기 정렬 열을 설정합니다. 이름이나 번호가 될 수 있습니다. 이 파라미터는 서버 루틴에 의해 사용되기 위해 URL에 추가됩니다. |
| viewrecords | 페이징 바에서 총 레코드 수를 표시할지 여부를 정의합니다. |
| caption | 그리드의 캡션을 설정합니다. 파라미터가 설정되지 않은 경우 캡션은 볼 수 없습니다. |
'Script > jQuery' 카테고리의 다른 글
| when() 함수 (0) | 2016.11.04 |
|---|---|
| jQuery Form Validation 사용중 iCheck errorPlacement 처리 (0) | 2016.09.30 |
