Flex过滤筛选DataGrid里的数据

 

Mxml代码

1. <?xml version= "1.0"  encoding= "utf-8" ?>  
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"    
3.     layout="absolute"    
4.     creationComplete="http_test.send()"    
5.     >  
6.       
7.     <mx:Script>  
8.         <![CDATA[  
9.             import mx.collections.ArrayCollection;  
10.             [Bindable]  
11.             var datas:ArrayCollection;  
12.             private function onResult():void{  
13.                 this.datas=http_test.lastResult.blog.channel.item;  
14.             }  
15.             private function applyFilter():void{  
16.                 if(this.datas.filterFunction==null){  
17.                     this.datas.filterFunction=this.filterCities;  
18.                 }  
19.                 this.datas.refresh();  
20.             }  
21.             private function filterCities(item:Object):Boolean{  
22.                 var match:Boolean=true;  
23.                 if(cityFilter.text!="" ){  
24.                     var city:String=item["city" ];  
25.                     var filter:String=cityFilter.text;  
26.                     //          转成小写字母          搜索字符串（输入的信息转成小字后）  
27.                     //          也就是把它们全部都转换成小写再进行搜索  
28.                     //          city.indexOf(filter)    如果没有找就就返回一个-1   
29.                     if(!city || city.toLowerCase().indexOf(filter.toLowerCase())<0 ){  
30.                         match=false;  
31.                     }  
32.                 }  
33.                 return match;  
34.             }  
35.         ]]>  
36.     </mx:Script>  
37.       
38.     <mx:HTTPService id="http_test"    
39.         url="/flex_xml/date.xml"    
40.         useProxy="false"   
41.         resultFormat="object"   
42.         result="onResult();" >      
43.     </mx:HTTPService>   
44.       
45.     <mx:Panel title="{http_test.lastResult.blog.channel.title}"  width= "90%"  height= "90%"  verticalAlign= "middle"  horizontalAlign= "center" >  
46.         <mx:Form>  
47.             <mx:FormItem label="City" >  
48.                 <mx:TextInput id="cityFilter"  change= "applyFilter();" />  
49.             </mx:FormItem>  
50.         </mx:Form>  
51.         <mx:DataGrid id="http_dataGird"    
52.             dataProvider="{datas}"    
53.             width="100%"  height= "50%" >  
54.             <mx:columns>  
55.                 <mx:DataGridColumn headerText="标题"  dataField= "title" />  
56.                 <mx:DataGridColumn headerText="作者"  dataField= "author" />  
57.                 <mx:DataGridColumn headerText="类型"  dataField= "category" />  
58.                 <mx:DataGridColumn headerText="连接"  dataField= "link" />  
59.                 <mx:DataGridColumn headerText="城市"  dataField= "city" />  
60.             </mx:columns>  
61.         </mx:DataGrid>  
62.     </mx:Panel>  
63.   
64. </mx:Application>