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

 

所以全部代码：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://www.franto.com/blog2/wp-content/uploads/examples/filterfunction/srcview/

原创作者： Franto。翻译整理：一路风尘