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

下面的例子展示了Flex中如何利用一个CheckBox控件以及ArrayCollection类的

filterFunctio

属性，对DataGrid控件中的项目进行过滤。

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


Download: main.mxml

<?xml version="1.0" encoding="utf-8"?>

<!-- http://blog.flexexamples.com/2008/03/12/using-a-combobox-to-filter-items-in-a-datagrid-in-flex/ -->

<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>

下面是执行实例（可以右键察看源代码）：

本文转自：http://elanso.com/ArticleModule/sourcearticle.aspx?idx=KAMbHlQwW6I5KeMGQcMGRRIi