Flex-DataGrid使用关键字过滤结果

这里主要展示如何使用搜索的关键字过滤DataGrid的行。其实也不是很难，因为DataGrid使用dataProvier可以是ArrayCollection，并且ArrayCollection本身就有过滤的功能即使用变量filterFunction.所以基本上，你的DataGrid和dataProvider像如下的定义：

[Bindable] public var dpRows:ArrayCollection;

然后你可以用一种简单的方法来创建过滤的方法：

public function filterResults():void { dpRows.filterFunction = _sortRows; dpRows.refresh(); }

最后，是使用_sortRows方法来对符合过滤关键字的行返回一个ture--那行就可见,否则返回false--那行就被隐藏。

private function _sortRows(item:Object):Boolean { var col:String = cmbCol.selectedItem.data as String; var key:String = keyword.text; key = key.toLowerCase(); if (key != "") { if (col != "any") { var value:String = item[col]; value = value.toLowerCase(); if (value.indexOf(key)>= 0) { return true; } } else { for (var o:String in item) { value = item[o]; value = value.toLowerCase(); if (value.indexOf(key)>= 0) { return true; } } } } else { return true; } return false; }

查看Demo演示

<embed src="http://www.franto.com/blog2/wp-content/uploads/examples/filterfunction/FilterFunction.swf" width="750" height="405" type="application/x-shockwave-flash" wmode="transparent"></embed>

所以全部代码：FilterControl.as

package { import mx.collections.ArrayCollection; import mx.core.Application; import mx.controls.TextInput; import mx.controls.Button; import mx.controls.ComboBox; public class FilterControl extends Application { [Bindable] public var dpColumns:ArrayCollection; [Bindable] public var dpRows:ArrayCollection; public var keyword:TextInput; public var btnFilter:Button; public var cmbCol:ComboBox; public function FilterControl() { } public function init():void { dpColumns = new ArrayCollection(); dpColumns.addItem({data:'any', label:'Any'}); dpColumns.addItem({data:'type', label:'Type'}); dpColumns.addItem({data:'name', label:'Name'}); dpColumns.addItem({data:'url', label:'URL'}); dpColumns.addItem({data:'desc', label:'Descriptiom'}); dpColumns.addItem({data:'tags', label:'Tags'}); dpRows = new ArrayCollection(); var item:Object = new Object(); item.type = "Website"; item.name = "Expectal.com"; item.url = "http://www.expectal.com"; item.desc = "Your Professional Flash Photo Gallery with Slideshow and Background Music"; item.tags = "Flash, Gallery, Slideshow, Music"; dpRows.addItem(item); item = new Object(); item.type = "Website"; item.name = "Franto.com Blog"; item.url = "http://blog.franto.com"; item.desc = "Your Professional Flash Photo Gallery with Slideshow and Background Music"; item.tags = "Flash, Flex, AIR, Tutorial"; dpRows.addItem(item); item = new Object(); item.type = "Tutorial"; item.name = "FlexSpy - Flex/AIR inspector"; item.url = "http://www.franto.com/blog2/flexspy-inspector-in-your-flexair-application"; item.desc = "FlexSpy - Kind of what Firebug does for HTML/Ajax applications but for Flex 2.0/3.0 applications."; item.tags = "Flex, AIR, Tutorial"; dpRows.addItem(item); item = new Object(); item.type = "Tutorial"; item.name = "Quick Outline in FlexBuilder - Ctrl+O"; item.url = "http://www.franto.com/blog2/quick-outline-in-flexbuilder-ctrlo"; item.desc = "Speed up your development with Quick Outline in FlexBuilder"; item.tags = "Flex, AIR, Tutorial"; dpRows.addItem(item); item = new Object(); item.type = "Tutorial"; item.name = "Custom header in DataGrid"; item.url = "http://www.franto.com/blog2/custom-header-in-datagrid"; item.desc = "Custom header in DataGrid"; item.tags = "Flex, AIR, Tutorial"; dpRows.addItem(item); item = new Object(); item.type = "Tutorial"; item.name = "Custom header in DataGrid 2"; item.url = "http://www.franto.com/blog2/custom-header-in-datagrid-part-2"; item.desc = "Custom header in DataGrid - part 2"; item.tags = "Flex, AIR, Tutorial"; dpRows.addItem(item); item = new Object(); item.type = "Tutorial"; item.name = "Quick Outline in FlexBuilder - Ctrl+O"; item.url = "http://www.franto.com/blog2/quick-outline-in-flexbuilder-ctrlo"; item.desc = "Speed up your development with Quick Outline in FlexBuilder"; item.tags = "Flex, AIR, Tutorial"; dpRows.addItem(item); } public function resetFilter():void { keyword.text = ""; filterResults(); } public function filterResults():void { dpRows.filterFunction = _sortRows; dpRows.refresh(); } private function _sortRows(item:Object):Boolean { var col:String = cmbCol.selectedItem.data as String; var key:String = keyword.text; key = key.toLowerCase(); if (key != "") { if (col != "any") { var value:String = item[col]; value = value.toLowerCase(); if (value.indexOf(key) >= 0) { return true; } } else { for (var o:String in item) { value = item[o]; value = value.toLowerCase(); if (value.indexOf(key) >= 0) { return true; } } } } else { return true; } return false; } } }

FilterFunction.mxml:

<?xml version="1.0" encoding="utf-8"?> <FilterControl xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" layout="vertical" applicationComplete="init()"> <mx:Style source="default.css"/> <mx:HBox width="100%"> <mx:Label text="Filter:"/> <mx:TextInput id="keyword" width="100%"/> <mx:ComboBox id="cmbCol" dataProvider="{dpColumns}"/> </mx:HBox> <mx:HBox width="100%" horizontalAlign="right"> <mx:Button label="Filter" id="btnFilter" click="filterResults()" width="150"/> <mx:Button label="Reset" click="resetFilter()" width="150"/> </mx:HBox> <mx:DataGrid width="100%" height="100%" dataProvider="{dpRows}" variableRowHeight="true"> <mx:columns> <mx:DataGridColumn dataField="type" headerText="Type" width="80"/> <mx:DataGridColumn dataField="name" headerText="Name" width="180"/> <mx:DataGridColumn dataField="url" headerText="URL"/> <mx:DataGridColumn dataField="desc" headerText="Description"/> <mx:DataGridColumn dataField="tags" headerText="Tags" width="200"/> </mx:columns> </mx:DataGrid> </FilterControl>

本文转自:http://blog.chinaunix.net/u/21684/showart_973418.html