在學習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組件中