flex 中 datagrid 中的过滤功能

代码来自 http://try.flex.org/index.cfm

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                layout="vertical"
                creationComplete="initApp()">

<mx:Script>
<![CDATA[

    // On startup
    public function initApp():void
    {
        // Set filter function
        // Be careful to set filterFunction
        // only after ArrayCollection has been
        // populated.
        myData.filterFunction=processFilter;
    }

    // Filter function
    public function processFilter(item:Object):Boolean
    {
        var result:Boolean=false;

        // If no filter text, or a match, then true
        if (!item.name.length
                || item.name.toUpperCase().indexOf(txtFilter.text.toUpperCase()) >= 0)
        result=true;

        return result;
    }
]]>
</mx:Script>

<!-- Data (use ArrayCollection) -->
<mx:ArrayCollection id="myData">
    <mx:source>
        <mx:Object name="Ben Forta"
            location="Oak Park, MI"
            phone="(248)555-5555" />
        <mx:Object name="Jane Doe"
            location="New York, NY"
            phone="(212)555-1234" />
        <mx:Object name="Jim Jones"
            location="Atlanta, GA"
            phone="(414)555-1212" />
        <mx:Object name="Roberta Roberts"
            location="Chicago, IL"
            phone="(312)555-4321" />
        <mx:Object name="Steve Stevens"
            location="Boston, MA"
            phone="(617)555-5656" />
    </mx:source>
</mx:ArrayCollection>

<!-- UI -->
<mx:HBox width="100%">
    <mx:Label text="Filter:"/>
    <mx:TextInput id="txtFilter"
            width="100%"
            change="myData.refresh()"/>
</mx:HBox>

<mx:DataGrid dataProvider="{myData}"
        width="100%" height="100%">
    <mx:columns>
        <mx:DataGridColumn headerText="Name"
                    dataField="name"/>
        <mx:DataGridColumn headerText="Location"
                    dataField="location"/>
        <mx:DataGridColumn headerText="Phone"            dataField="phone"/>
    </mx:columns>
</mx:DataGrid>
</mx:Application>

其中主要的是 ArrayCollection 的 filterFunction 属性，他的使用方法如下:
ArrayCollection 的 filterFunction 属性是继承自 ListCollectionView 的，还有其他类具有这个功能，以下是一个继承关系图，详细的可以看 flex 的帮助文件：

filterFunction 属性的值是一个函数 (Function)：
参数：Object 类型的一个值，也可以不带参数；
返回值：Boolean 类型的值，如果返回值为 True 就把这个 Object 放到里面，反之亦然。
其函数格式事例如下：
f(item:Object):Boolean
在函数里面进行处理，以上的例子就是如此：
 public function processFilter(item:Object):Boolean
 {
       var result:Boolean=false;
      // 查看文本框里的字符串长度或字符串的匹配（大小写都可以），然后返回结果。
      if (!item.name.length || item.name.toUpperCase().indexOf(txtFilter.text.toUpperCase()) >= 0)
     result=true;
     return result;
 }
注意：filterFunction 函数只有在对象建立的时候和调用 reflash () 的时候执行的，所以一定要在显示之前调用下 reflash ()，否则显示就不正常了，切记！切记！

FireYang 2006-12-16 10:43 发表评论