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();  }

◆步驟三：創建數據模型。實際開發中，是從外部數據庫或者文件讀取數據的，這里只是模擬數據源，便于講解。在這里，插入了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);  }

◆步驟五：綁定數據源，先是移除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);  }

◆步驟七：創建“上一頁”按鈕的單擊事件的函數，讀取前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 中如何使用DataGrid組件實現分頁問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。