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

开发 后端
本文向大家介绍一下将外部数据绑定到Flex DataGrid组件中,既是通过读取外部文件或者是数据库,绑定到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,内容结构如下所示:
 

  1. <?xmlversionxmlversion="1.0"encoding="UTF-8"?> 
  2. <root> 
  3. <nodelabelnodelabel="Flash"> 
  4. <Name>Flash</Name> 
  5. <Company>Adobe</Company> 
  6. <Version>9.0</Version> 
  7. </node> 
  8. <nodelabelnodelabel="Java"> 
  9. <Name>Java</Name> 
  10. <Company>Sun</Company> 
  11. <Version>6.0</Version> 
  12. </node> 
  13. <nodelabelnodelabel=".Net"> 
  14. <Name>.Net</Name> 
  15. <Company>Microsoft</Company> 
  16. <Version>2.0</Version> 
  17. </node> 
  18. <nodelabelnodelabel="Flex"> 
  19. <Name>Flex</Name> 
  20. <Company>Adobe</Company> 
  21. <Version>2.0</Version> 
  22. </node> 
  23. <nodelabelnodelabel="OICQ"> 
  24. <Name>OICQ</Name> 
  25. <Company>腾讯</Company> 
  26. <Version>2007</Version> 
  27. </node> 
  28. </root> 

 #p#

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

  1. *********************************  
  2. *加载外部XML数据  
  3. **/  
  4. privatefunctionGetData2():void  
  5. {  
  6. //加载外部XML文件  
  7. data_xml=newXML();  
  8. myXMLURL=newURLRequest("DataGrid_Data.xml");  
  9. myLoader=newURLLoader(myXMLURL);  
  10. }  

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

  1. importflash.net.URLRequest;  
  2. importflash.net.URLLoader;  

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

  1. privatevardata_xml:XML;  
  2. privatevarmyXMLURL:URLRequest;  
  3. privatevarmyLoader:URLLoader; 

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

  1. myLoader.addEventListener("complete",xmlLoaded);  
  2. XML对象的加载文件事件函数代码如下:  
  3. /*********************************  
  4. *绑定Flex DataGrid组件  
  5. **/  
  6. functionxmlLoaded(event:Event):void  
  7. {  
  8. data_xml=XML(myLoader.data);  
  9. //trace(data_xml.elements("node").toXMLString());  
  10. }  

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

  1. //DataProvider  
  2. vardp:DataProvider=newDataProvider(data_xml);  
  3.  
  4. //初始化Flex DataGrid组件,并实例化  
  5. vardg2:DataGrid=newDataGrid();  
  6. //设置宽和高  
  7. dg2.setSize(200,300);  
  8. //定义列的标题  
  9. dg2.columns=["Name","Company","Version"];  
  10. //绑定数据源  
  11. dg2.dataProvider=dp;  
  12. addChild(dg2);  
  13.  

***,在构造函数中,调用GetData2函数,代码如下:
 

  1. /*****************************************  
  2. *构造函数  
  3. **/  
  4. publicfunctionDataGrid_ShowData_Example()  
  5. {  
  6. GetData2();  
  7. }  

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

【编辑推荐】

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


 

责任编辑:佚名 来源: flashas.net)
相关推荐

2010-08-11 15:35:47

Flex DataGr

2010-07-30 10:37:23

Flex数据绑定

2010-07-28 12:41:18

Flex组件

2010-08-12 15:10:17

Flex4

2010-08-09 12:47:00

Flex4beta

2010-07-30 10:45:08

Flex数据绑定

2010-07-30 10:58:03

Flex数据绑定

2010-07-29 13:11:37

2010-08-06 11:19:24

FlexPaperFlex

2010-07-27 13:53:15

Flex ComboB

2010-08-11 16:10:27

Flex DataGr

2022-11-25 16:27:07

应用开发鸿蒙

2010-08-11 16:03:02

Flex DataGr

2010-08-12 11:05:33

Flex数据绑定

2010-07-27 10:11:04

Flex4

2010-08-09 15:41:13

Flex字体

2020-05-11 17:35:57

vue开发组件

2010-07-28 13:31:10

Flex数据绑定

2010-07-28 13:11:13

Flex数据绑定

2011-06-10 15:39:47

外链
点赞
收藏

51CTO技术栈公众号