Flex中利用CheckBox对DataGrid控件中的项目进行过滤的例子

下面的例子展示了Flex中如何利用一个CheckBox控件以及ArrayCollection类的 filterFunctio属性，对DataGrid控件中的项目进行过滤。

下面是具体的例子以及源代码：

Download: main.mxml

1. <?xml version="1.0" encoding="utf-8"?>
2. <!-- http://blog.flexexamples.com/2008/03/12/using-a-combobox-to-filter-items-in-a-datagrid-in-flex/ -->
3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
4.         layout="vertical"
5.         verticalAlign="middle"
6.         backgroundColor="white">
8.     <mx:Script>
9.         <![CDATA[
10.             import mx.controls.dataGridClasses.DataGridColumn;
12.             private function toggleFilter():void {
13.                 if (checkBox.selected) {
14.                     arrColl.filterFunction = processFilter;
15.                 } else {
16.                     arrColl.filterFunction = null;
17.                 }
18.                 arrColl.refresh();
19.             }
21.             private function processFilter(item:Object):Boolean {
22.                 return parseFloat(item.value) == 0;
23.             }
25.             private function value_labelFunc(item:Object, col:DataGridColumn):String {
26.                 return item[col.dataField].toFixed(2);
27.             }
28.         ]]>
29.     </mx:Script>
31.     <mx:ArrayCollection id="arrColl">
32.         <mx:source>
33.             <mx:Array>
34.                 <mx:Object name="ColdFusion" value="0.00" />
35.                 <mx:Object name="Dreamweaver" value="0.12" />
36.                 <mx:Object name="Fireworks" value="1.01" />
37.                 <mx:Object name="Flash" value="0" />
38.                 <mx:Object name="Flash Player" value="-0.00" />
39.                 <mx:Object name="Flex" value="0.00" />
40.                 <mx:Object name="Illustrator" value="2.92" />
41.                 <mx:Object name="Lightroom" value="0.32" />
42.                 <mx:Object name="Photoshop" value="0.06" />
43.             </mx:Array>
44.         </mx:source>
45.     </mx:ArrayCollection>
47.     <mx:Panel status="{arrColl.length}/{arrColl.source.length} item(s)">
48.         <mx:DataGrid id="dataGrid"
49.                 dataProvider="{arrColl}"
50.                 verticalScrollPolicy="on">
51.             <mx:columns>
52.                 <mx:DataGridColumn dataField="name" />
53.                 <mx:DataGridColumn dataField="value"
54.                         labelFunction="value_labelFunc" />
55.             </mx:columns>
56.         </mx:DataGrid>
57.         <mx:ControlBar>
58.             <mx:CheckBox id="checkBox"
59.                     label="Filter DataGrid"
60.                     click="toggleFilter();" />
61.         </mx:ControlBar>
62.     </mx:Panel>
64. </mx:Application>