技术分享如何将外部数据绑定到Flex DataGrid组件中-51CTO.COM

在学习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();  
}

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

【编辑推荐】

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

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