실습 jqGrid 버전: CDN 제공하는 v4.6 버전으로 테스트
데이터가 많아지면 한 페이지에 데이터가 모두 보이기 힘들 수 있다.
이런경우 네비게이션바가 필요하게되는데 그에대해서 알아본다.
Pager는 현재 TreeGrid 에서 사용할 수 없다.
정의
1004lucifer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" type="text/css" media="screen" href="bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" media="screen" href="jquery/ui/jquery-ui.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="jqGrid/css/ui.jqgrid.css" />
<script src="jqGrid/jquery.js" type="text/javascript"></script>
<script src="jqGrid/js/i18n/grid.locale-kr.js" type="text/javascript"></script>
<script src="jqGrid/js/minified/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="bootstrap/dist/js/bootstrap.js" type="text/javascript"></script>
<script src="jquery/ui/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery.extend(jQuery.jgrid.defaults, { autowidth:true });
</script>
</head>
<body>
<table id="list"><tr><td></td></tr></table>
<div id="pager"></div>
<script>
var dataArray = [
{ "name": "Lorene Battle", "phone": "(936) 574-3976" },
{ "name": "Wendi Downs", "phone": "(815) 510-3017" },
{ "name": "Wendi Downs", "phone": "(815) 510-3017" },
{ "name": "Wendi Downs", "phone": "(815) 510-3017" },
{ "name": "Wendi Downs", "phone": "(815) 510-3017" },
{ "name": "Wendi Downs", "phone": "(815) 510-3017" },
{ "name": "Wendi Downs", "phone": "(815) 510-3017" }
];
$(document).ready(function() {
$("#list").jqGrid({
datatype: 'local',
styleUI: 'Foundation',
data: dataArray,
colModel: [
{name: 'name', label : 'Name'},
{name: 'phone', label : 'Phone Number'}
],
caption : 'Users Grid',
height: 'auto',
autowidth: true,
pager: '#pager',
rowNum: 5
});
});
</script>
</body>
</html>
jqGrid에 옵션으로 Pager를 정의하는 방법에는 3가지 방법이 있다.
1. pager: '#pager'
2. pager: 'pager'
3. pager: jQuery('#pager') 또는 pager: $('#pager')
3개중 어떤걸 써도 상관 없지만 jQuery의 모듈이 import/export 됨에 따라서 작동이 안될 수 있다는 점을 고려하면 1, 2번으로 사용하는 것을 권장한다.
* Pager의 넓이(width)는 jqGrid와 동일하다.
* 기본적으로 Pager는 그리드 아래에 위치하지만 document 내에서 독단적인 position을 가지고 있는경우 그리드 위에 배치가 된다.
* 커스텀 Pager를 사용하기 원하는경우 그리드에 pager옵션을 넣지 않고 직접 정의할 수 있다.
Pager와 언어셋
1004lucifer
* Pager의 문자열들은 언어셋파일의 변수에 따라 정의된다. (grid.locale-en.js 와 같은..)
$.jgrid = { defaults : { recordtext: "View {0} - {1} of {2}", emptyrecords: "No records to view", loadtext: "Loading...", pgtext : "Page {0} of {1}" }, ... }
* 전역적으로 설정하기 원한다면 아래와 같이 설정할 수 있다.
jQuery.extend(jQuery.jgrid.defaults,{emptyrecords: "Nothing to display",...});
* 특정 그리드에 대해서만 적용하려면 아래와 같이 할수 있다.
jQuery("#grid_id").jqGrid({ ... pager : '#gridpager', emptyrecords: "Nothing to display", ... });
* Pager는 기본적으로 가운데 보여지며 레코드 정보는 오른쪽에 위치하지만 pagerpos, recordpos 옵션을 통해 위치를 변경할 수 있다.
* Pager의 아이콘으로 표현되는 버튼은 jQuery UI 테마를 사용하고 있다.
옵션
1004lucifer
| Property | Type | Description |
|---|---|---|
| lastpage | integer | 읽기전용 (기본: 0) request에서 받아온 page의 총 갯수를 결정한다. |
| pager | mixed | 레코드의 네비게이션을 위해 Pager bar 를 정의한다. HTML Element 요소이어야만 한다.(필수) 예를들어 id 로 'pager'를 주었지만 어떠한 이름이라도 상관 없다. |
| pagerpos | string | 그리드에서 Pager의 위치를 결정한다. 기본적으로 Pager는 3개의 요소로 나뉘어 진다. (pager, navigator button, record infomation) (기본: center) |
| pgbuttons | boolean | Pager가 사용가능한경우 pager button이 보일지 여부. 정상적으로 설정이 되었다면 버튼은 pager bar에 표시된다. |
| pginput | boolean | 사용자가 요청할 페이지번호에 대한 input box의 사용여부. pager bar에 input box가 나타난다. |
| pgtext | string | 현재 페이지 상태에 대한 정보를 표시한다. 첫번째 값은 현재 로드된 페이지이며, 두번째 값은 페이지의 총 갯수. |
| reccount | integer | 읽기전용 (기본: 0) 그리드의 정확한 row 수를 결정한다. records 파라메터와 헷갈리지 마라. 대부분의 경우 records 파라메터와 같이 똑같겠지만 사실 똑같지 않다. 예를들어 rowNum옵션에 15를 정의한경우, 서버에서 20개를 받아왔을때 records는 20 이지만 reccount는 15이며, 그리드에는 15개만 보여지게 된다. |
| recordpos | string | Pager에서 record infomation의 위치를 결정한다. (기본: right) ex) left, center, right |
| records | integer | 읽기전용. request에서 받아온 그리드안에 있는 레코드 갯수 |
| recordtext | string | Pager에 보여지는 정보를 나타낸다. viewrecords옵션이 true인 경우에만 유효하다. 텍스트는 레코드 갯수가 0보다 큰 경우에만 나타난다. {0} - 페이지번호에 의존한 레코드 위치 and 요청했던 레코드 번호 {1} - 마지막 위치 {2} - 받아온 데이터의 총 레코드 |
| rowList | array[] | Pager 안에서 보여지는 row의 갯수를 변경가능한 select box element의 생성자 배열. 실행중에 변경이 되며, url로 전달되는 rowNum파라메터를 대체한다. 배열이 비어있으면 select box element가 나타나지 않는다. 일반적으로 [10,20,30] 으로 설정할 수 있으며 rowNum파라메터가 30이면 select box의 선택된 값은 30이다. |
| rowNum | integer | 그리드에서 보여질 레코드의 갯수를 설정한다. 이 파라메터는 데이터를 조회하는 서버 url에 전달된다. |
| viewrecords | boolean | Pager bar 안에있는 질의된 총 레코드 갯수를 보여줄지 여부를 정의한다. |
이벤트
1004lucifer
| Property | Type | Description |
|---|---|---|
| onPaging | pgButton | 이 이벤트는 '페이지버튼'을 클릭하고 데이터를 채우기전에 실행된다. 또한 사용자가 페이지 input box에 입력 후 'Enter'를 누르면 발생하고 select box를 변경했을 때에도 작동한다. first, last, prev, next 중의 버튼을 클릭하는 경우 pgButton(string)으로 한개의 파라메터를 전달한다. 요청된 행의 수가 변경되거나 사용자가 페이지의 번호를 변경했을때를 기록한다. 'stop'을 리턴하는경우 해당 페이징 함수는 멈춘다. (링크 - 이벤트 추가 설명) |
* jqGrid 객체 생성 후 Pager 옵션을 변경 시 그리드를 다시 로드해야 한다.
이 작업은 trigger('reloadGrid')를 통해 다시 로드할 수 있다.
참고
- http://www.trirand.com/jqgridwiki/doku.php?id=wiki:pager
댓글
댓글 쓰기