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组件实现分页问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注亿速云行业资讯频道了解更多相关知识。