Flex3学习轨迹：使用DataGrid实现过滤显示

DataGrid组件主要用于显示数据，其本身有排序，自定义列布局，优化列标题，应用渲染器和项编辑等功能。但是DataGrid并没有实现数据过滤显示功能。

效果图如下：

 

代码如下：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" fontSize="12">
    <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 title="实现数据过滤显示" width="360" height="240" 
        horizontalAlign="center" 
        status="{arrColl.length}/{arrColl.source.length} 行">
        <mx:ApplicationControlBar dock="true" width="100%">
            <mx:CheckBox id="checkBox" label="过滤数据（value=0）" 
                click="toggleFilter();" />
        </mx:ApplicationControlBar>
        <mx:DataGrid id="dataGrid" dataProvider="{arrColl}" rowCount="5" 
            verticalScrollPolicy="on" width="300">
            <mx:columns>
                <mx:DataGridColumn dataField="name" />
                <mx:DataGridColumn dataField="value" 
                    labelFunction="value_labelFunc" />
            </mx:columns>
        </mx:DataGrid>
    </mx:Panel>
</mx:Application>

集合的关联这里不再赘述，有几点需要注意的地方。

1、AS中使用了toFixed(2)方法对数据进行格式化操作。

2、使用了filterFunction函数完成了判断Value是否等于0的任务。

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

3、使用refresh()方法进行刷新数据列。