下面的例子展示了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