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