在學習Flex的過程中，你可能會遇到Flex DataGrid組件的用法問題，這里和大家分享一下Flex DataGrid組件的分頁，在很多語言中，分頁技術都是很常見的。基本思路是先從數據庫中讀取一頁的數據，在Flex DataGrid組件中顯示出來，然后再讀取，再顯示。

Flex DataGrid組件的分頁與排序

當Flex DataGrid組件中的數據顯示很多行的時候，使用者需要不停地下拉滾動條。這對于用戶的體驗極為不便，分頁顯示數據的方式就可以很好地解決這個問題。在應用軟件開發中，分頁也是常用的操作。排序的作用是為了用戶可以更好地按照自己的方式排列數據，更加方便地閱讀數據信息。

Flex DataGrid組件的分頁

在很多語言中，分頁技術都是很常見的。每種技術都有自己的優勢和特點，但是基本思路都差不多。基本思路是，把全部數據一次性讀到一個數據集中，然后，再與Flex DataGrid組件關聯，分頁的讀取顯示。另外一種思路是，先從數據庫中讀取一頁的數據，在Flex DataGrid組件中顯示出來，然后再讀取，再顯示。

下面，用***種思路設計一個分頁的程序，數據集采用數組的形式，利用數組的slice()方法，讀取一部分數據，然后分頁顯示。步驟如下。

◆步驟一：創建一個ActionScript3.0文件，命名為DataGridPageExample，類名為DataGridPage-Example，繼承自Sprite類，導入用到的類庫。代碼如下：
 

package  
{  
importfl.controls.Button;  
importfl.controls.DataGrid;  
importfl.controls.ScrollPolicy;  
importfl.data.DataProvider;  
importflash.display.Sprite;  
importflash.events.MouseEvent;  
 
publicclassDataGridPageExampleextendsSprite  
{  
 
}  
}  
 

 ◆步驟二：創建構造函數。代碼如下所示：

/************************  
*構造函數  
***********************/  
publicfunctionDataGridPageExample()  
{  
CreateDataModel();  
CreateDataGrid();  
CreatePageButton();  
}  
 

 #p#◆步驟三：創建數據模型。實際開發中，是從外部數據庫或者文件讀取數據的，這里只是模擬數據源，便于講解。在這里，插入了9條數據，然后傳遞到數組中，代碼如下所示：
 

privatevardp:DataProvider;  
privatevararray:Array;  
/************************  
*創建數據模型  
***********************/  
privatefunctionCreateDataModel():void  
{  
//數據模型  
dp=newDataProvider();  
 
//插入9條數據  
dp.addItem({Name:"Tom",Phone:23579086,QQ:77788899,Software:"Flash"});  
dp.addItem({Name:"Kelly",Phone:33579080,QQ:56788823,Software:"Flex"});  
dp.addItem({Name:"Jim",Phone:83579085,QQ:56788882,Software:"Java"});  
dp.addItem({Name:"Sam",Phone:73579084,QQ:78988811,Software:"Dreamweaver"});  
dp.addItem({Name:"Kaiven",Phone:33576681,QQ:32188897,Software:"Photoshop"});  
 
dp.addItem({Name:"Gray",Phone:23229086,QQ:12388900,Software:"Fireworks"});  
dp.addItem({Name:"Luar",Phone:23579087,QQ:24681899,Software:"DAEMONTools"});  
dp.addItem({Name:"Kite",Phone:85579082,QQ:68080894,Software:"FlashDevelop"});  
dp.addItem({Name:"Polar",Phone:32579086,QQ:21586899,Software:"BeyondCompare"});  
 
array=dp.toArray();  
}  
 

 ◆步驟四：創建Flex DataGrid組件，封裝在函數CreateDataGrid中，代碼如下所示：
 

privatevardg:DataGrid;  
//數據副本  
privatevararray_page:Array;  
/************************  
*創建Flex DataGrid組件  
***********************/  
privatefunctionCreateDataGrid():void  
{  
//初始化Flex DataGrid組件，并實例化  
dg=newDataGrid();  
 
//設置位置  
dg.move(20,20);  
//設置寬和高  
dg.setSize(350,125);  
dg.verticalScrollPolicy=ScrollPolicy.AUTO;  
//定義列的標題  
dg.columns=["Name","Phone","QQ","Software"];  
 
//初始化數據  
arrayarray_page=array.slice(0,5);  
//綁定Flex DataGrid組件  
BingDataGrid(array_page);  
 
addChild(dg);  
}  
 

 #p#◆步驟五：綁定數據源，先是移除Flex DataGrid組件中的所有數據，然后遍歷參數數組中的數據，增加到Flex DataGrid組件中。***封裝在函數BingDataGrid中，便于分頁時重復調用。代碼如下所示：
 

/************************  
*綁定數據源  
***********************/  
privatefunctionBingDataGrid(array:Array):void  
{  
//綁定數據源  
dg.removeAll();  
vari:uint=0;  
for(i=0;i<array.length;i++)  
{  
dg.addItem(array[i]);  
}  
}  

 ◆步驟六：創建“上一頁”和”下一頁“按鈕，封裝在函數CreatePageButton中，代碼如下：
 

/************************  
*創建“上一頁”和”下一頁“按鈕  
***********************/  
privatefunctionCreatePageButton():void  
{  
varbtnPre:Button=newButton();  
varbtnNext:Button=newButton();  
 
btnPre.move(30,170);  
btnNext.move(240,170);  
 
btnPre.label="上一頁";  
btnNext.label="下一頁";  
 
btnPre.addEventListener(MouseEvent.CLICK,btnPreClick);  
btnNext.addEventListener(MouseEvent.CLICK,btnNextClick);  
 
addChild(btnPre);  
addChild(btnNext);  
}  
 

 #p#◆步驟七：創建“上一頁”按鈕的單擊事件的函數，讀取前5條數據，命名為btnPreClick，代碼如下：
 

/************************  
*“上一頁”按鈕的單擊事件  
***********************/  
publicfunctionbtnPreClick(e:MouseEvent)  
{  
arrayarray_page=array.slice(0,5);  
BingDataGrid(array_page);  
}  

 ◆步驟八：創建“下一頁”按鈕的單擊事件的函數，讀取后面的4條數據，命名為btnNextClick，代碼如下：
 

/************************  
*“下一頁”按鈕的單擊事件  
***********************/  
publicfunctionbtnNextClick(e:MouseEvent)  
{  
arrayarray_page=array.slice(5,10);  
BingDataGrid(array_page);  
}  

 ◆步驟九：把三個創建組件的函數增加到構造函數中，代碼如下所示：
 

/************************  
*構造函數  
***********************/  
publicfunctionDataGridPageExample()  
{  
CreateDataModel();  
CreateDataGrid();  
CreatePageButton();  
}  

【編輯推薦】

1. 探秘Flex與JavaScript交互
2. 常用FlexBuilder快捷鍵用法指導
3. Flex框架Riawave的定制應用
4. 技術前沿 Flex2.0 從零開始實現文件上傳
5. FlexBuilder開發方法及特點解析