Paging (페이징처리)

샘플개요

페이징 처리화면에 사용될 컴포넌트 및 스크립트가 동적으로 생성되는 라이브러리입니다.

페이징이란 대용량 처리 시 데이터 부하 및 로딩이 지연될 경우를 방지하기 위하여 각 페이지별로 데이터를 분할 조회하도록 만드는 기능입니다.

 

페이징 샘플 동작 예시

사용방법

1. 제공된 파일

Pagging.xfdl – UI에 표현될 데이터 리스트 및 pagging처리 버튼이 동적으로 생성될 DIV 컴포넌트 작성 및 transaction 처리 화면 form파일

Pagging.xjs – 페이징 처리가 될 컴포넌트 동적 생성 및 컨트롤 로직 작성 스크립트 파일

page_sample.jsp - transaction용 서비스 파일

 

2. 컴포넌트 배치 (nexacro studio Form Design)

페이징 처리에서 필수로 필요한 기본 컴포넌트는 리스트가 표현 될 "Grid 컴포넌트"와 페이징처리 버튼들이 동적으로 생성될 "Div 컴포넌트" 입니다.

설명의 편의를 위하여 조회 버튼(list search)을 클릭하였을 경우 리스트가 조회되도록 작성되었습니다.

사용될 컴포넌트 배치 예시

 

3. 화면 동작 가이드

#1. Form 화면 로딩 시 페이징 처리에 사용 될 설정 값을 기준으로 컴포넌트가 Div 안에 동적 생성됩니다.

#2. 동적으로 생성된 각 버튼 및 컴포넌트의 역할은 다음과 같습니다.

동적 생성 된 컴포넌트 설명

#3. 화면의 크기가 일정크기 이하로 줄어 들 경우 현재 페이지의 페이지 수와 이동을 컨트롤 하는 영역이 사라지도록 처리되었습니다.  

화면의 사이즈가 작아졌을 경우 배치 예시

주의사항

* 조회 서비스 호출 시, 리스트 초기화되지 않습니다. (19년 6월 10일 기준) 이는 추후 개선되어 추가될 예정입니다.

* 조회 재호출 2019년 8월 19일 수정하여 반영합니다.

* 라이브러리에 css 및 기타 디자인 요소가 적용되지 않았습니다. 컴포넌트 cssclass 적용 시 pagging.xjs 파일fnInitPageSet 함수에서 class id를 지정해 주세요.

* 이전, 다음, 맨 처음, 맨 끝 버튼 역시 css를 제외하여 예시를 위하여 text로 표기되었습니다. css로 변경할 경우 fnCreateDivComm 함수의 text를 삭제해주세요.

 

테스트 버전 정보

Product Version : 17.0.0.1902 (2019.4.24.1)

 

다운로드 경로

https://www.playnexacro.com/techtips/928/pagging-페이징-처리

play nexacro