最近有網友問到，Flex的DataGrid要怎麼作分頁，一開始梅干心裡還想說，不是把裡面的屬性開啟就好了嗎？於是便開啟那八百年沒用的Flex，實際測試一下才發現，原來那是aspx才可以，Flex內建的DataGrid並沒有分頁功能，梅干就上網Google一下，找到一個簡易的分頁功能，在梅干測試後，沒什麼太大問題，且也很方便使用，稍作了點整理，提供給有需要的朋友。
Step1
新增一個Flex的Compnent元件，並輸入下方語法。
DataGridAdv.mxml
<?xml version=“1.0” encoding=“utf-8”?>
mx:Script
import mx.collections.ArrayCollection;
[Bindable]
private var mypagedata:ArrayCollection = new ArrayCollection();
[Bindable]
public var mygridcolumns:Array;
public var mydata:ArrayCollection;//所有的數據
public var pagecount:int=10;//分頁筆數，預設為10筆
public var curpage:int;//當前的頁碼
public var totalpage:int;//總頁數
public var totalcount:int;//總筆數
public function DataProvider(value:ArrayCollection):void
{
mydata = value;
mypagedata.removeAll();//移除目前所顯示的資料
if(mydata.length>0 && null!=mydata)
{
totalcount = mydata.length;
totalpage = (totalcount + pagecount – 1) / pagecount;
setPager(0);
inputpage.minimum=1;
inputpage.maximum=totalpage;
}else{
totalcount = 0;
totalpage = 0;
curpage = 0;
inputpage.minimum = 0;
inputpage.maximum = 0;
pagedetail.text = “第0頁/共0頁 共0筆”;
}
}
public function setPager(value:int):void
{
if(value<0 || value>totalpage) return;
curpage = value;
var curNum:int = valuepagecount;
mypagedata.removeAll();
for(var i:int=0;curNum/mx:Script
Step2
新增一個Flex App，語法如下：
DataGrid2Page.mxml
<?xml version=“1.0” encoding=“utf-8”?>
<mx:Application xmlns:mx=“http://www.adobe.com/2006/mxml" layout=“absolute” xmlns:com=”” creationComplete=“init()” fontSize=“12” viewSourceURL=“srcview/index.html”>
import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;
[Bindable]
private var docData:ArrayCollection;
private function init():void
{
this.myxml.send();
}
private function resultHandler(event:ResultEvent):void {
this.docData=event.result.minwt.doc as ArrayCollection;
//將ArrayCollection放到DataGrid中
this.DG.DataProvider(docData);
}
/mx:Script
com:mygridcolumns
/com:mygridcolumns
/com:DataGridAdv
/mx:Panel
好久沒碰Flex忘的還真快，好在三不五時有加減用一下，還可找回一點片刻記憶，Flex真是一個蠻好用的工具，只不過好多元件都要再手工加強，但也好在網路資料都很蠻豐富，而這分頁功能方法真得很簡單喔！有需要的朋友不坊可以試試看。
[範例預覽] [範例下載]