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 。翻译整理：一路风尘

评论

1 楼 echozhjun 2009-11-13  

在选择any的时候的代码：
for (var o:String in item) 
{ 
       value = item[o]; 
       value = value.toLowerCase(); 
       if (value.indexOf(key) >= 0) 
       { 
             return true; 
       } 
}
有个小Bug。item本身有个系统key：mx_internal_uid，有可能该UUID中包含搜索的key。那么过滤的内容就不对了。