본문 바로가기

공부방/Flex

[Flex] Flex Datagrid Paging 처리


소규모의 데이터를 다루어서 datagrid에 표시하고는 했는데 이번 프로젝트에서는 데이터의 양이 몇 천개씩 되다 보니 datagrid paging 처리를 생각하게 되었다.
togglebuttonbar를 이용해서 처리를 했고, 기본 시스템 개념은 제로보드의 그것을 참조했다.

1. getNumofROW()를 수행하여 데이터 베이스에서 최초로 전체 레코드 크기를 요청 한다.
2. myButtonBar.setCntData( parseInt(event.result.toString()) ) 에서 요청 결과를 바탕으로 한페이지에 게시글 20개씩 게시 할 시 총 페이지의 수를 산출하여 버튼 그룹을 생성한다.
3. 다음 getList(myButtonBar.currentPage)를 통해 해당 페이지의 게시물들을 받아서 출력한다.



[Main.mxml]
	
			//최소 실행
			public function listInit():void {
							getNumofROW();  //전체 페이지 크기를 요청하여 페이지 수 생성
							getList(myButtonBar.currentPage);  // 첫페이지 요청
			}

			/* 게시판 전체 레코드 개수 요쳥(페이지 산출 위함) */
			private function getNumofROW():void {
				rpc = new HTTPService();
				
				rpc.url = HOST_ROOT + "notices/numofRow";
				rpc.method = "GET";
				rpc.resultFormat = "text";
				rpc.addEventListener(ResultEvent.RESULT, cntResultHandler);
				
				rpc.send();
			}
			
			/* 전체 레코드 개수 결과 핸들러 */
			private function cntResultHandler(event:ResultEvent):void {
				myButtonBar.setCntData( parseInt(event.result.toString()) );  // 전체 레코드 개수 결과를 바탕으로 버튼 생성
				getList(myButtonBar.currentPage); //해당 페이지 데이터 요청
			}
			
			// 페이지 번호 클릭시에 처리 
			public function myBtnHandler(event:ItemClickEvent):void{
				myButtonBar.currentPage = parseInt(event.label);
				getList(myButtonBar.currentPage);  //해당 페이지 데이터 요청
			}
			
			// 무빙 버튼  클릭시에 데이터 처리 
			public function movingHandler(event:MouseEvent):void{ 
				if(myButtonBar.myButtonHandler(event)){
					getList(myButtonBar.currentPage);  // 해당 페이지 데이터 요청
				}
			}
			
			/* 페이지별 게시글 리스트 요청 */
			private function getList(page:int):void {
				rpc = new HTTPService();
				params = new Object();
				
				rpc.url = HOST_ROOT + "notices.xml";
				rpc.method = "GET";
				rpc.resultFormat = "e4x";
				rpc.addEventListener(ResultEvent.RESULT, listResultHandler);
				
				params.limit = myButtonBar.ROWLIMIT;
				params.page = page;
				rpc.send(params);
			}
			
			/* 리스트 결과 핸들러 */
			private function listResultHandler(event:ResultEvent):void {
				dgList.dataProvider = new XMLListCollection(event.result.notice);
			}

			
				
				
				
			

 [myToggleButtonBar.mxml]
	


	
		
	
	
	
		
	

[결과 화면]