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()方法进行刷新数据列。