在學(xué)習(xí)Flex的過程中，你可能會遇到Flex組合框的使用，這里和大家分享一下通過Flex組合框來過濾DataGrid，相信本文介紹一定會讓你有所收獲。

通過Flex組合框來過濾DataGrid

Flex中一個很普遍的應(yīng)用就是用Flex組合框過濾顯示在DataGrid中的數(shù)據(jù)。在這個技巧里，目的是把一個“作者”數(shù)據(jù)庫表里的數(shù)據(jù)顯示到DataGrid里，表的結(jié)構(gòu)如下：

CODE:
 

authorId:String;  
authorName:String;  
status:String; 

◆另外，用戶可以選擇Flex組合框中包含的不同的作者狀態(tài)的值來過濾DataGrid顯示的作者信息。推薦你把從服務(wù)器請求獲得的結(jié)果轉(zhuǎn)換為ArrayCollection，然后把這個ArrayCollection作為DataGrid的dataProvider。這樣做你會發(fā)現(xiàn)操作和過濾顯示的數(shù)據(jù)會很變得容易。獲取數(shù)據(jù)超出了現(xiàn)在這個技巧的范圍，不過關(guān)于這個問題有很多的例子可以參考。

首先，把結(jié)果轉(zhuǎn)換為ArrayCollection。

CODE:
 

importmx.utils.ArrayUtil;  
 
importmx.collections.ArrayCollection;  
 
//event.resultcontainsthedatafromtheauthorssearch.  
 
publicvarauthorsArray:Array=mx.utils.ArrayUtil.toArray(event.result);  
 
//UseauthorsDataProviderasthedataProviderforthedataGrid.  
 
[Bindable]  
 
publicvarauthorsDataProvider:ArrayCollection=newArrayCollection(authorsArray);  
 

 ◆接下來，把搜索結(jié)果中的作者狀態(tài)值動態(tài)加載到Flex組合框中。在這里，數(shù)據(jù)庫中可能的作家狀態(tài)值是"Active","Inactive"和"Deleted"。但是在進行之前，讓我們來回顧一下用例。我們把搜索作者得到的結(jié)果通過DataGrid視圖向用戶顯示出來，在看過之后，用戶可能希望過濾這些數(shù)據(jù)讓它只顯示“Active”的作者。當(dāng)然，F(xiàn)lex組合框中的"Active","Inactive"和"Deleted"可以直接硬編碼，但是如果那樣做的話，當(dāng)數(shù)據(jù)庫中添加了一個新的狀態(tài)值得時候我們必須修改程序。

而且，F(xiàn)lex組合框中的值應(yīng)該只包含搜索結(jié)果中的作者狀態(tài)，如果搜索結(jié)果只包含狀態(tài)為"Active"和"Inactive"的作者，F(xiàn)lex組合框應(yīng)該只包含相應(yīng)的值（沒有”Delete”）。如果所有數(shù)據(jù)庫中可能的作者狀態(tài)值都在Flex組合框中硬編碼，用戶就可以選擇”Delete”這個值，然后就會看到一個沒有任何數(shù)據(jù)的DataGrid。我們不想困擾用戶，所以接下來的代碼會動態(tài)加載作者狀態(tài)值到一個數(shù)組，然后把這個數(shù)組作為Flex組合框的dataProvider。

CODE:
 

//UsetheauthorsStatusArrayasthedataProviderfortheCombox.  
 
[Bindable]  
publicvarauthorsStatusArray:Array=populateAuthorsStatusArray(authorsArray);  
 
publicfunctionpopulateAuthorsStatusArray(authorsArray:Array):Array  
{  
varstatusArrayHashMap:Object=newObject();  
varstatusArray:Array=newArray;  
 
varn:int=authorsArray.length;  
for(vari:int=0;i<n;i++)  
{  
if(statusArrayHashMap[authorsArray[i].status]==undefined)  
{  
statusArrayHashMap[authorsArray[i].status]=newObject();  
statusArray.push(authorsArray[i].status);  
}  
}  
statusArray.sort();  
statusArray.unshift("All");  
 
//The"All"valueisusedprogrammaticallytoun-filter(reset)theresultinthedataGrid.  
returnstatusArray;  
}  
 

 下面是mxml寫的代碼：
CODE: 

<mx:Comboxidmx:Comboxid="cboAuthorsStatusFilter" 
dataProvider="{authorsStatusArray}" 
change="filterAuthorsGrid();"/> 

這就是全部的技巧。因為DataGrid的dataProvider利用了綁定（binding），所以當(dāng)用戶在Flex組合框中選中了一個值的時候，DataGrid會動態(tài)顯示過濾后的結(jié)果。請緊記，這只是一個小技巧而且可能有一些生澀的地方。但是你應(yīng)該可以通過這些代碼領(lǐng)會這種思想。

【編輯推薦】

1. 探秘Flex與JavaScript交互
2. 常用FlexBuilder快捷鍵用法指導(dǎo)
3. Flex框架Riawave的定制應(yīng)用
4. 技術(shù)前沿 Flex2.0 從零開始實現(xiàn)文件上傳
5. FlexBuilder開發(fā)方法及特點解析