Flex4 DataGrid分頁機制例析

首先要聲明DataGrid控件

如下所示：

<mx:DataGrid id="customgrid" width="100%" dataProvider="{acPageData}" columns="{arrColumns}" rowCount="{pageSize}"/>
           

然後加上一些上一頁，下一頁，第一頁，最後一頁等跳轉按鈕

如下所示：

<mx:HBox cornerRadius="12" borderStyle="solid" horizontalAlign="center" verticalAlign="middle">
           <mx:Text text="{' 第'+(totalPage>0?(currentPage+1):0)+'頁/共'+totalPage+'頁'+' 共'+(acAllData!=null?acAllData.length:0)+'條記錄'}" fontSize="12"/>
           <mx:LinkButton id="lbtnFirst" label="首頁" click="loadData(0)" enabled="{lbtnPrevious.enabled}" fontSize="12"/>
           <mx:LinkButton id="lbtnPrevious" label="上一頁" click="loadData(currentPage-1)" enabled="{currentPage!=0?true:false}" fontSize="12"/>
           <mx:LinkButton id="lbtnNext" label="下一頁" click="loadData(currentPage+1)" enabled="{totalPage>(currentPage+1)?true:false}" fontSize="12"/>
           <mx:LinkButton id="lbtnLast" label="尾頁" click="loadData(totalPage-1)" enabled="{lbtnNext.enabled}" fontSize="12"/>
           <mx:NumericStepper id="nsPageNum" stepSize="1" minimum="1" maximum="{totalPage}" enabled="{lbtnJump.enabled}"/>
           <mx:LinkButton id="lbtnJump" label="跳轉" click="loadData(nsPageNum.value-1)" enabled="{totalPage>1?true:false}" fontSize="12"/>
       </mx:HBox>
           

接下來在<fx:script></fx:script>中加入

import mx.collections.ArrayCollection;      
           [Bindable]public var pageSize:int=10;//每頁顯示行數
           [Bindable]private var totalPage:int=0;//總頁數
           [Bindable]private var currentPage:int=0;//目前頁          
           [Bindable]
           public var acAllData:ArrayCollection;//所有資料
           [Bindable]
           private var acPageData:ArrayCollection=new ArrayCollection();//目前頁資料
           [Bindable]
           public var arrColumns:Array;//DataGrid列,在調用時需要為這個數組設定資料
          
           //初始化
           public function init(value:ArrayCollection):void{
              acAllData=value;
              if(acAllData.length!=0 && acAllData!=null){
                  totalPage=Math.ceil(acAllData.length/pageSize);
                  loadData(0);
              }else{
                  currentPage=0;
                  totalPage=0;
              }
           }
          
           //加載資料
           private function loadData(pageNum:int):void {
              if(pageNum>=0 && pageNum<totalPage){
                  acPageData.removeAll();
                  currentPage=pageNum;//重新為目前頁的變量指派
                  var startIndex:int=pageNum*pageSize;//計算起始索引
                  for(var i:int=0;i<pageSize && startIndex<acAllData.length;i++){
                     acPageData.addItem(acAllData[startIndex]);
                     startIndex++;
                  }
              }
           }
           

這裡要注意的是：

DataGrid的dataprovider屬性要動态綁定一個ArrayCollection對象，這個對象要用[Binderable]進行綁定之。而且是目前頁的ArrayCollection對象。

dataProvider="{acPageData}" 
           

public var acAllData:ArrayCollection;//所有資料
           

[Bindable]
 private var acPageData:ArrayCollection=new ArrayCollection();//目前頁資料
           

當然，資料的來源在哪裡呢.

下面的代碼說明了資料的來源了，如下所示：

//擷取所有資料
	getAllCalenderService=new HTTPService();
	getAllCalenderService.url="http://192.168.17.66:8080/Smarter/calendarSetting!getMonthSettings.action?year=2011&month=11"
	getAllCalenderService.method="post";
	getAllCalenderService.addEventListener(ResultEvent.RESULT,getAllCalenderFunc);
	
	getAllCalenderService.send();
           

而getAllCalenderFunc中的函數細節如下：

//遠端從伺服器上取資料
public function getAllCalenderFunc(event:ResultEvent):void{
	var jsonData:String = new String(event.result);
	var allCalenders:Array = (JSON.decode(jsonData) as Array); 
	//Alert.show(allCalenders.length.toString());
	
	ArrCalenderArrColl = new ArrayCollection(allCalenders);
	
	//Alert.show(ArrCalenderArrColl.getItemAt(0).date);
	
	//dg_list.dataProvider=ArrCalenderArrColl;
	
	//重組一下ArrCalenderArrColl中的type,讓前端顯示的有意義
	
	for(var i:int;i<ArrCalenderArrColl.length;i++){
		var mark:int=ArrCalenderArrColl.getItemAt(i).type;
		switch(mark){
			case 1:
				ArrCalenderArrColl.getItemAt(i).type="工作日";
				break;
			case 2:
				ArrCalenderArrColl.getItemAt(i).type="工休日";
				break;
			case 3:
				ArrCalenderArrColl.getItemAt(i).type="節假日";
				break;
			default:
				break;
		}
	
		
	}
	
	//初始化，以分頁形式顯示
	init(ArrCalenderArrColl);
	
	
}
           

而這個Action中的資料細節如下所示：

分頁效果如下所示：

（待續）

天道酬情!!!!!!!!!!!!!!!!!