Flex使用ArrayCollection的filterFunction属性过滤DataGrid

下面的实例演示了在Flex中怎样使用 CheckBox 组件和 ArrayCollection 的 filterFunction 属性来过滤 DataGrid 组件的 item 。

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
 layout="vertical"
 verticalAlign="middle"
 backgroundColor="white">

 <mx:Script>
 <![CDATA[
 import mx.controls.dataGridClasses.DataGridColumn;

 private function toggleFilter():void {
 if (checkBox.selected) {
 arrColl.filterFunction = processFilter;
 } else {
 arrColl.filterFunction = null;
 }
 arrColl.refresh();
 }

 private function processFilter(item:Object):Boolean {
 return parseFloat(item.value) == 0;
 }

 private function value_labelFunc(item:Object, col:DataGridColumn):String {
 return item[col.dataField].toFixed(2);
 }
 ]]>
 </mx:Script>

 <mx:ArrayCollection id="arrColl">
 <mx:source>
 <mx:Array>
 <mx:Object name="ColdFusion" value="0.00" />
 <mx:Object name="Dreamweaver" value="0.12" />
 <mx:Object name="Fireworks" value="1.01" />
 <mx:Object name="Flash" value="0" />
 <mx:Object name="Flash Player" value="-0.00" />
 <mx:Object name="Flex" value="0.00" />
 <mx:Object name="Illustrator" value="2.92" />
 <mx:Object name="Lightroom" value="0.32" />
 <mx:Object name="Photoshop" value="0.06" />
 </mx:Array>
 </mx:source>
 </mx:ArrayCollection>

 <mx:Panel status="{arrColl.length}/{arrColl.source.length} item(s)">
 <mx:DataGrid id="dataGrid"
 dataProvider="{arrColl}"
 verticalScrollPolicy="on">
 <mx:columns>
 <mx:DataGridColumn dataField="name" />
 <mx:DataGridColumn dataField="value"
 labelFunction="value_labelFunc" />
 </mx:columns>
 </mx:DataGrid>
 <mx:ControlBar>
 <mx:CheckBox id="checkBox"
 label="Filter DataGrid"
 click="toggleFilter();" />
 </mx:ControlBar>
 </mx:Panel>

</mx:Application>