Flex DataGrid组件分页方法详尽解读-springboot pagehelper分页

在学习Flex的过程中，你可能会遇到Flex DataGrid组件的用法问题，这里和大家分享一下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();  
}

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

【编辑推荐】