技术分享 如何将外部数据绑定到Flex DataGrid组件中

在学习Flex的过程中，你会遇到Flex DataGrid组件用法的问题，这里和大家分享一下使用Flex DataGrid组件显示数据列表，显示数据列表是Flex DataGrid组件最基本的应用，只有把数据显示出来，才可以实现其他的功能。

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

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

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

外部数据通常指的是数据库、文本本件和XML文件。在实际开发中，与数据层传入数据大多是通过XML格式传输的。所以，下面就创建一个读取外部XML文件的数据，然后在Flex DataGrid组件中显示的例子，步骤如下：

◆步骤一：创建一个XML文件，命名为DataGrid_Data.xml，内容结构如下所示：
 

 


  
<?xmlversionxmlversion="1.0"encoding="UTF-8"?> 

  
<root> 

  
<nodelabelnodelabel="Flash"> 

  
<Name>Flash</Name> 

  
<Company>Adobe</Company> 

  
<Version>9.0</Version> 

  
</node> 

  
<nodelabelnodelabel="Java"> 

  
<Name>Java</Name> 

  
<Company>Sun</Company> 

  
<Version>6.0</Version> 

  
</node> 

  
<nodelabelnodelabel=".Net"> 

  
<Name>.Net</Name> 

  
<Company>Microsoft</Company> 

  
<Version>2.0</Version> 

  
</node> 

  
<nodelabelnodelabel="Flex"> 

  
<Name>Flex</Name> 

  
<Company>Adobe</Company> 

  
<Version>2.0</Version> 

  
</node> 

  
<nodelabelnodelabel="OICQ"> 

  
<Name>OICQ</Name> 

  
<Company>腾讯</Company> 

  
<Version>2007</Version> 

  
</node> 

  
</root> 

 

 #p#

◆步骤二;继续使用15.2.1节的文件，在DataGrid_ShowData_Example.as文件中，创建一个名为GetData2的函数，在函数中读取刚才创建的XML文件，代码如下所示：

 


  
*********************************  

  
*加载外部XML数据  

  
**/  

  
privatefunctionGetData2():void  

  
{  

  
//加载外部XML文件  

  
data_xml=newXML();  

  
myXMLURL=newURLRequest("DataGrid_Data.xml");  

  
myLoader=newURLLoader(myXMLURL);  

  
}  

 

 ◆步骤三：在类的外部，引入刚才使用的命名空间，包括URLRequest和URLLoader，代码如下：
 

 


  
importflash.net.URLRequest;  

  
importflash.net.URLLoader;  

 

 
◆步骤四：创建上面的全局变量，data_xml、myXMLURL和myLoader。代码如下所示：
 

 


  
privatevardata_xml:XML;  

  
privatevarmyXMLURL:URLRequest;  

  
privatevarmyLoader:URLLoader; 

 

◆步骤五：创建XML对象的加载文件事件，并且在GetData2函数中添加侦听事件的语句，添加的侦听语句代码如下：
 

 


  
myLoader.addEventListener("complete",xmlLoaded);  

  
XML对象的加载文件事件函数代码如下：  

  
/*********************************  

  
*绑定Flex DataGrid组件  

  
**/  

  
functionxmlLoaded(event:Event):void  

  
{  

  
data_xml=XML(myLoader.data);  

  
//trace(data_xml.elements("node").toXMLString());  

  
}  

 

 #p#◆步骤六：在侦听事件函数中，把从外部读取的数据文件绑定到Flex DataGrid组件中，代码如下：
 

 


  
//DataProvider  

  
vardp:DataProvider=newDataProvider(data_xml);  

  
 

  
//初始化Flex DataGrid组件，并实例化  

  
vardg2:DataGrid=newDataGrid();  

  
//设置宽和高  

  
dg2.setSize(200,300);  

  
//定义列的标题  

  
dg2.columns=["Name","Company","Version"];  

  
//绑定数据源  

  
dg2.dataProvider=dp;  

  
addChild(dg2);  

  
 

 

***，在构造函数中，调用GetData2函数，代码如下：
 

 


  
/*****************************************  

  
*构造函数  

  
**/  

  
publicfunctionDataGrid_ShowData_Example()  

  
{  

  
GetData2();  

  
}  

 

 ◆步骤七：编译代码并运行。

【编辑推荐】

1. 探秘Flex与JavaScript交互
2. 常用FlexBuilder快捷键用法指导
3. Flex框架Riawave的定制应用
4. 技术前沿 Flex2.0 从零开始实现文件上传
5. 学习笔记 如何将内部数据绑定到Flex DataGrid组件中