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

Flex DataGrid組件的分頁與排序

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

Flex DataGrid組件的分頁

在很多語言中，分頁技術(shù)都是很常見的。每種技術(shù)都有自己的優(yōu)勢和特點(diǎn)，但是基本思路都差不多?；舅悸肥牵讶繑?shù)據(jù)一次性讀到一個數(shù)據(jù)集中，然后，再與Flex DataGrid組件關(guān)聯(lián)，分頁的讀取顯示。另外一種思路是，先從數(shù)據(jù)庫中讀取一頁的數(shù)據(jù)，在Flex DataGrid組件中顯示出來，然后再讀取，再顯示。

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

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

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

 ◆步驟二：創(chuàng)建構(gòu)造函數(shù)。代碼如下所示：

/************************  
*構(gòu)造函數(shù)  
***********************/  
publicfunctionDataGridPageExample()  
{  
CreateDataModel();  
CreateDataGrid();  
CreatePageButton();  
}  
 

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

privatevardp:DataProvider;  
privatevararray:Array;  
/************************  
*創(chuàng)建數(shù)據(jù)模型  
***********************/  
privatefunctionCreateDataModel():void  
{  
//數(shù)據(jù)模型  
dp=newDataProvider();  
 
//插入9條數(shù)據(jù)  
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();  
}  
 

 ◆步驟四：創(chuàng)建Flex DataGrid組件，封裝在函數(shù)CreateDataGrid中，代碼如下所示：
 

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

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

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

 ◆步驟六：創(chuàng)建“上一頁”和”下一頁“按鈕，封裝在函數(shù)CreatePageButton中，代碼如下：
 

/************************  
*創(chuàng)建“上一頁”和”下一頁“按鈕  
***********************/  
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#◆步驟七：創(chuàng)建“上一頁”按鈕的單擊事件的函數(shù)，讀取前5條數(shù)據(jù)，命名為btnPreClick，代碼如下：
 

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

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

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

 ◆步驟九：把三個創(chuàng)建組件的函數(shù)增加到構(gòu)造函數(shù)中，代碼如下所示：
 

/************************  
*構(gòu)造函數(shù)  
***********************/  
publicfunctionDataGridPageExample()  
{  
CreateDataModel();  
CreateDataGrid();  
CreatePageButton();  
}  

【編輯推薦】

1. 探秘Flex與JavaScript交互
2. 常用FlexBuilder快捷鍵用法指導(dǎo)
3. Flex框架Riawave的定制應(yīng)用
4. 技術(shù)前沿 Flex2.0 從零開始實(shí)現(xiàn)文件上傳
5. FlexBuilder開發(fā)方法及特點(diǎn)解析