Flex DataGrid組件分頁方法詳盡解讀
在學習Flex的過程中，你可能會遇到Flex DataGrid組件的用法問題，這里和大家分享一下Flex DataGrid組件的分頁，在很多語言中，分頁技術都是很常見的?；舅悸肥窍葟臄祿熘凶x取一頁的數據，在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();
- }
【編輯推薦】
- 探秘Flex與JavaScript交互
- 常用FlexBuilder快捷鍵用法指導
- Flex框架Riawave的定制應用
- 技術前沿 Flex2.0 從零開始實現文件上傳
- FlexBuilder開發方法及特點解析
