FlexDataGrid组件分页方法详尽解读

在学习Flex的过程中，你可能会遇到Flex DataGrid组件的用法问题，这里和大家分享一下Flex DataGrid组件的分页，在很多语言中，分页技术都是很常见的。基本思路是先从数据库中读取一页的数据，在Flex DataGrid组件中显示出来，然后再读取，再显示。

成都创新互联成立于2013年，先为嘉陵等服务建站，嘉陵等地企业，进行企业商务咨询服务。为嘉陵企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

Flex DataGrid组件的分页与排序

当Flex DataGrid组件中的数据显示很多行的时候，使用者需要不停地下拉滚动条。这对于用户的体验极为不便，分页显示数据的方式就可以很好地解决这个问题。在应用软件开发中，分页也是常用的操作。排序的作用是为了用户可以更好地按照自己的方式排列数据，更加方便地阅读数据信息。

Flex DataGrid组件的分页

在很多语言中，分页技术都是很常见的。每种技术都有自己的优势和特点，但是基本思路都差不多。基本思路是，把全部数据一次性读到一个数据集中，然后，再与Flex DataGrid组件关联，分页的读取显示。另外一种思路是，先从数据库中读取一页的数据，在Flex DataGrid组件中显示出来，然后再读取，再显示。

下面，用***种思路设计一个分页的程序，数据集采用数组的形式，利用数组的slice()方法，读取一部分数据，然后分页显示。步骤如下。

◆步骤一：创建一个ActionScript3.0文件，命名为DataGridPageExample，类名为DataGridPage-Example，继承自Sprite类，导入用到的类库。代码如下：
 

 
 
 
    
  
  
  
  1. package  
    2. 
  
  
  
  2. {  
    3. 
  
  
  
  3. importfl.controls.Button;  
    4. 
  
  
  
  4. importfl.controls.DataGrid;  
    5. 
  
  
  
  5. importfl.controls.ScrollPolicy;  
    6. 
  
  
  
  6. importfl.data.DataProvider;  
    7. 
  
  
  
  7. importflash.display.Sprite;  
    8. 
  
  
  
  8. importflash.events.MouseEvent;  
    9. 
  
  
  
  9.  
    10. 
  
  
  
  10. publicclassDataGridPageExampleextendsSprite  
    11. 
  
  
  
  11. {  
    12. 
  
  
  
  12.  
    13. 
  
  
  
  13. }  
    14. 
  
  
  
  14. }  
    15. 
  
  
  
  15.  
    16.

 ◆步骤二：创建构造函数。代码如下所示：

 
 
 
    
  
  
  
  1. /************************  
    2. 
  
  
  
  2. *构造函数  
    3. 
  
  
  
  3. ***********************/  
    4. 
  
  
  
  4. publicfunctionDataGridPageExample()  
    5. 
  
  
  
  5. {  
    6. 
  
  
  
  6. CreateDataModel();  
    7. 
  
  
  
  7. CreateDataGrid();  
    8. 
  
  
  
  8. CreatePageButton();  
    9. 
  
  
  
  9. }  
    10. 
  
  
  
  10.  
    11.

 #p#◆步骤三：创建数据模型。实际开发中，是从外部数据库或者文件读取数据的，这里只是模拟数据源，便于讲解。在这里，插入了9条数据，然后传递到数组中，代码如下所示：
 

 
 
 
    
  
  
  
  1. privatevardp:DataProvider;  
    2. 
  
  
  
  2. privatevararray:Array;  
    3. 
  
  
  
  3. /************************  
    4. 
  
  
  
  4. *创建数据模型  
    5. 
  
  
  
  5. ***********************/  
    6. 
  
  
  
  6. privatefunctionCreateDataModel():void  
    7. 
  
  
  
  7. {  
    8. 
  
  
  
  8. //数据模型  
    9. 
  
  
  
  9. dp=newDataProvider();  
    10. 
  
  
  
  10.  
    11. 
  
  
  
  11. //插入9条数据  
    12. 
  
  
  
  12. dp.addItem({Name:"Tom",Phone:23579086,QQ:77788899,Software:"Flash"});  
    13. 
  
  
  
  13. dp.addItem({Name:"Kelly",Phone:33579080,QQ:56788823,Software:"Flex"});  
    14. 
  
  
  
  14. dp.addItem({Name:"Jim",Phone:83579085,QQ:56788882,Software:"Java"});  
    15. 
  
  
  
  15. dp.addItem({Name:"Sam",Phone:73579084,QQ:78988811,Software:"Dreamweaver"});  
    16. 
  
  
  
  16. dp.addItem({Name:"Kaiven",Phone:33576681,QQ:32188897,Software:"Photoshop"});  
    17. 
  
  
  
  17.  
    18. 
  
  
  
  18. dp.addItem({Name:"Gray",Phone:23229086,QQ:12388900,Software:"Fireworks"});  
    19. 
  
  
  
  19. dp.addItem({Name:"Luar",Phone:23579087,QQ:24681899,Software:"DAEMONTools"});  
    20. 
  
  
  
  20. dp.addItem({Name:"Kite",Phone:85579082,QQ:68080894,Software:"FlashDevelop"});  
    21. 
  
  
  
  21. dp.addItem({Name:"Polar",Phone:32579086,QQ:21586899,Software:"BeyondCompare"});  
    22. 
  
  
  
  22.  
    23. 
  
  
  
  23. array=dp.toArray();  
    24. 
  
  
  
  24. }  
    25. 
  
  
  
  25.  
    26.

 ◆步骤四：创建Flex DataGrid组件，封装在函数CreateDataGrid中，代码如下所示：
 

 
 
 
    
  
  
  
  1. privatevardg:DataGrid;  
    2. 
  
  
  
  2. //数据副本  
    3. 
  
  
  
  3. privatevararray_page:Array;  
    4. 
  
  
  
  4. /************************  
    5. 
  
  
  
  5. *创建Flex DataGrid组件  
    6. 
  
  
  
  6. ***********************/  
    7. 
  
  
  
  7. privatefunctionCreateDataGrid():void  
    8. 
  
  
  
  8. {  
    9. 
  
  
  
  9. //初始化Flex DataGrid组件，并实例化  
    10. 
  
  
  
  10. dg=newDataGrid();  
    11. 
  
  
  
  11.  
    12. 
  
  
  
  12. //设置位置  
    13. 
  
  
  
  13. dg.move(20,20);  
    14. 
  
  
  
  14. //设置宽和高  
    15. 
  
  
  
  15. dg.setSize(350,125);  
    16. 
  
  
  
  16. dg.verticalScrollPolicy=ScrollPolicy.AUTO;  
    17. 
  
  
  
  17. //定义列的标题  
    18. 
  
  
  
  18. dg.columns=["Name","Phone","QQ","Software"];  
    19. 
  
  
  
  19.  
    20. 
  
  
  
  20. //初始化数据  
    21. 
  
  
  
  21. arrayarray_page=array.slice(0,5);  
    22. 
  
  
  
  22. //绑定Flex DataGrid组件  
    23. 
  
  
  
  23. BingDataGrid(array_page);  
    24. 
  
  
  
  24.  
    25. 
  
  
  
  25. addChild(dg);  
    26. 
  
  
  
  26. }  
    27. 
  
  
  
  27.  
    28.

 #p#◆步骤五：绑定数据源，先是移除Flex DataGrid组件中的所有数据，然后遍历参数数组中的数据，增加到Flex DataGrid组件中。***封装在函数BingDataGrid中，便于分页时重复调用。代码如下所示：
 

 
 
 
    
  
  
  
  1. /************************  
    2. 
  
  
  
  2. *绑定数据源  
    3. 
  
  
  
  3. ***********************/  
    4. 
  
  
  
  4. privatefunctionBingDataGrid(array:Array):void  
    5. 
  
  
  
  5. {  
    6. 
  
  
  
  6. //绑定数据源  
    7. 
  
  
  
  7. dg.removeAll();  
    8. 
  
  
  
  8. vari:uint=0;  
    9. 
  
  
  
  9. for(i=0;i
  
  
  
  10. {  
    11. 
  
  
  
  11. dg.addItem(array[i]);  
    12. 
  
  
  
  12. }  
    13. 
  
  
  
  13. }  
    14.

 ◆步骤六：创建“上一页”和”下一页“按钮，封装在函数CreatePageButton中，代码如下：
 

 
 
 
    
  
  
  
  1. /************************  
    2. 
  
  
  
  2. *创建“上一页”和”下一页“按钮  
    3. 
  
  
  
  3. ***********************/  
    4. 
  
  
  
  4. privatefunctionCreatePageButton():void  
    5. 
  
  
  
  5. {  
    6. 
  
  
  
  6. varbtnPre:Button=newButton();  
    7. 
  
  
  
  7. varbtnNext:Button=newButton();  
    8. 
  
  
  
  8.  
    9. 
  
  
  
  9. btnPre.move(30,170);  
    10. 
  
  
  
  10. btnNext.move(240,170);  
    11. 
  
  
  
  11.  
    12. 
  
  
  
  12. btnPre.label="上一页";  
    13. 
  
  
  
  13. btnNext.label="下一页";  
    14. 
  
  
  
  14.  
    15. 
  
  
  
  15. btnPre.addEventListener(MouseEvent.CLICK,btnPreClick);  
    16. 
  
  
  
  16. btnNext.addEventListener(MouseEvent.CLICK,btnNextClick);  
    17. 
  
  
  
  17.  
    18. 
  
  
  
  18. addChild(btnPre);  
    19. 
  
  
  
  19. addChild(btnNext);  
    20. 
  
  
  
  20. }  
    21. 
  
  
  
  21.  
    22.

 #p#◆步骤七：创建“上一页”按钮的单击事件的函数，读取前5条数据，命名为btnPreClick，代码如下：
 

 
 
 
    
  
  
  
  1. /************************  
    2. 
  
  
  
  2. *“上一页”按钮的单击事件  
    3. 
  
  
  
  3. ***********************/  
    4. 
  
  
  
  4. publicfunctionbtnPreClick(e:MouseEvent)  
    5. 
  
  
  
  5. {  
    6. 
  
  
  
  6. arrayarray_page=array.slice(0,5);  
    7. 
  
  
  
  7. BingDataGrid(array_page);  
    8. 
  
  
  
  8. }  
    9.

 ◆步骤八：创建“下一页”按钮的单击事件的函数，读取后面的4条数据，命名为btnNextClick，代码如下：
 

 
 
 
    
  
  
  
  1. /************************  
    2. 
  
  
  
  2. *“下一页”按钮的单击事件  
    3. 
  
  
  
  3. ***********************/  
    4. 
  
  
  
  4. publicfunctionbtnNextClick(e:MouseEvent)  
    5. 
  
  
  
  5. {  
    6. 
  
  
  
  6. arrayarray_page=array.slice(5,10);  
    7. 
  
  
  
  7. BingDataGrid(array_page);  
    8. 
  
  
  
  8. }  
    9.

 ◆步骤九：把三个创建组件的函数增加到构造函数中，代码如下所示：
 

 
 
 
    
  
  
  
  1. /************************  
    2. 
  
  
  
  2. *构造函数  
    3. 
  
  
  
  3. ***********************/  
    4. 
  
  
  
  4. publicfunctionDataGridPageExample()  
    5. 
  
  
  
  5. {  
    6. 
  
  
  
  6. CreateDataModel();  
    7. 
  
  
  
  7. CreateDataGrid();  
    8. 
  
  
  
  8. CreatePageButton();  
    9. 
  
  
  
  9. }  
    10.

网页标题：FlexDataGrid组件分页方法详尽解读
文章转载：http://www.csdahua.cn/qtweb/news23/144373.html

网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网

成都快上网为您推荐相关内容

外贸建站知识

分类信息网

seo优化排名　　 　cdsyaren.com　　 　西部信息中心　　 　宣威网站建设　　 　绵阳主机托管　　 　成都画册设计　　 　小程序开发　　 　定制网站设计　　 　成都做网站　　 　成都seo优化　　 　响应式网站　　 　宜宾网站设计　　 　王君美油画　　 　东方电机技改服务有限公司　　 　兴宏源活动板房　　 　云服务器　　 　成都装修公司　　 　成都添翼二手车　　 　亮美家　　 　网站建设公司