学习笔记如何将内部数据绑定到Flex DataGrid组件中-51CTO.COM

本文和大家重点讨论一下如何将内部数据绑定到Flex DataGrid组件中，数据的来源大概有两种，一种是内部数据，即在程序内部自定义数据，然后绑定到Flex DataGrid组件中。

使用Flex DataGrid组件显示数据列表

显示数据列表是Flex DataGrid组件最基本的应用，只有把数据显示出来，才可以实现其他的功能。数据的来源大概有两种，一种是内部数据，即在程序内部自定义数据，然后绑定到Flex DataGrid组件中；另一种是外部数据，通过读取外部文件或者是数据库，绑定到Flex DataGrid组件中。接下来，就这两种情况分别做介绍。

将内部数据绑定到Flex DataGrid组件中

要在Flex DataGrid组件中显示数据，首先就要建立数据源，建立数据源通常是通过DataProviderAPI类来实现。下面的示例说明如何在Flex DataGrid组件中显示数据，示例的步骤如下所示。

◆步骤一：创建一个ActionScript3.0文件，命名为DataGrid_ShowData_Example.as，类名为DataGrid_ShowData_Example，导入将用到的类库，代码如下所示：

package  
{  
importfl.controls.DataGrid;  
importfl.controls.ScrollPolicy;  
importfl.data.DataProvider;  
importflash.display.Sprite;  
publicclassDataGrid_ShowData_ExampleextendsSprite  
{  
/*****************************************  
*构造函数  
**/  
publicfunctionDataGrid_ShowData_Example()  
{  
 
}  
}  
}  
 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

◆步骤二：创建一个函数GetData1，在内部实现具体的功能。代码如下所示：

/*********************************  
*加载内部数据，绑定Flex DataGrid组件  
**/  
privatefunctionGetData1():void  
{  
}  
1.
2.
3.
4.
5.
6.

◆步骤三;在函数的内部，利用DataProvider类创建一个数据模型，这个数据模型有4列及10行数据，代码如下所示：

//数据模型

vardp1:DataProvider=newDataProvider();  
 
dp1.addItem({Name:"Tom",Phone:23579086,QQ:77788899,Software:"Flash"});  
dp1.addItem({Name:"Kelly",Phone:33579080,QQ:56788823,Software:"Flex"});  
dp1.addItem({Name:"Jim",Phone:83579085,QQ:56788882,Software:"Java"});  
dp1.addItem({Name:"Sam",Phone:73579084,QQ:78988811,Software:"Dreamweaver"});  
dp1.addItem({Name:"Kaiven",Phone:33576681,QQ:32188897,Software:"Photoshop"});  
dp1.addItem({Name:"Gray",Phone:23229086,QQ:12388900,Software:"Fireworks"});  
dp1.addItem({Name:"Luar",Phone:23579087,QQ:24681899,Software:"DAEMONTools"});  
dp1.addItem({Name:"Kite",Phone:85579082,QQ:68080894,Software:"FlashDevelop"});  
dp1.addItem({Name:"Polar",Phone:32579086,QQ:21586899,Software:"BeyondCompare"});  
 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

◆步骤四：初始化Flex DataGrid组件，并实例化，然后设置属性，包括位置、宽度、高度、滚动条的样式等。代码如下所示：

//初始化Flex DataGrid组件，并实例化  
vardg1:DataGrid=newDataGrid();  
//设置位置  
dg1.move(20,20);  
//设置宽和高  
dg1.setSize(350,150);  
dg1.verticalScrollPolicy=ScrollPolicy.AUTO;  
 
1.
2.
3.
4.
5.
6.
7.
8.

◆步骤五：定义列的标题，然后把数据模型和Flex DataGrid组件绑定在一起，放到舞台上，代码如下所示：

//定义列的标题  
dg1.columns=["Name","Phone","QQ","Software"];  
//绑定数据源  
dg1.dataProvider=dp1;  
addChild(dg1);  
1.
2.
3.
4.
5.

◆步骤六;编译代码并运行。

【编辑推荐】

学习笔记 如何将内部数据绑定到Flex DataGrid组件中

学习笔记如何将内部数据绑定到Flex DataGrid组件中