[jqGrid] onPaging 이벤트 설명

 [ jqGrid 한글 API 문서 링크 ]

환경: jqGrid v4.7.1 이하 (무료버전)



아래 모습에서 페이지를 이동 및 페이지 갯수 설정을 위한 액션을 취할 때 발생하는 이벤트로 Pager 에서 발생하는 Event 에 대해서 정리를 하려 한다.

jqGrid 가 초기화 될 때 setPager 로직이 수행되며 onPaging 이벤트를 등록한다.
(링크 - setPager 설명)
1004lucifer

Property	Type	Description
onPaging	pgButton	이 이벤트는 '페이지버튼'을 클릭하고 데이터를 채우기전에 실행된다. 또한 사용자가 페이지 input box에 입력 후 'Enter'를 누르면 발생하고 select box를 변경했을 때에도 작동한다. first, last, prev, next 중의 버튼을 클릭하는 경우 pgButton(string)으로 한개의 파라메터를 전달한다. 요청된 행의 수가 변경되거나 사용자가 페이지의 번호를 변경했을때를 기록한다. 'stop'을 리턴하는경우 해당 페이징 함수는 멈춘다.

아래 데모에서 보듯이 pgButton 문자열이 넘어오는 것을 볼 수 있으며, first, last, prev, next 같은 경우에는 해당 문자열 뒤에 '_{PAGER_ID}' 문자열이 추가로 붙어서 넘어온다.

 주의할 점은 onPaging 함수 내에서

 사용자가 InputBox 에 값을 입력 후 엔터를 입력 시 (현재페이지)
 $('#grid_id').getGridParam('page') 를 이용시 변경전 값을 가져오며
 $('.ui-pg-input').val() 를 이용시 새로 입력한 값을 가져올 수 있다.

 사용자가 SelectBox 의 값을 변경 시 (노출 갯수)
 $('.ui-pg-selbox option:selected').val() 를 이용하여 새로 변경한 값을 가져올 수 있다.

아래 데모는 inputbox에 입력된 값이 올바르지 않은 값인경우 입력한 값을 원래대로 돌리고 paging 기능을 중단한다.