有没有现场mxml mx:datagrid全文搜索示例\ tutorial?

时间:2010-10-16 22:29:20

标签: flex flash actionscript-3 datagrid mxml

所以我在我的RIA中有一个mx:DataGrid连接到一些从中获取数据的Web服务(Dataprovider)。我有一个简单的文本fild。我想对文本字段中的文本进行更改,以便在我的表中仅查看包含任何列中任何单词的某些部分中的输入文本的行。该怎么办?

1 个答案:

答案 0 :(得分:1)

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    initialize="init();">

    <fx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;

        import spark.events.TextOperationEvent;

        [Bindable]
        private var dataProvider:ArrayCollection;

        private var filterString:String;

        private function init():void
        {
            dataProvider = new ArrayCollection(
                [
                    { name: "Alan", surname: "Cooper" },
                    { name: "James", surname: "Gosling" },
                    { name: "Mike", surname: "Chambers" },
                    { name: "Hare", surname: "Krishna" },
                    { name: "Otto", surname: "Thunder" }
                ]);
            dataProvider.filterFunction = filterFunction;
        }   

        private function filterFunction(item:Object):Boolean
        {
            if (!filterString)
                return true;

            for (var p:String in item)
            {
                var string:String = item[p] as String;
                if (!string)
                    continue;

                if (string.toLocaleLowerCase().indexOf(filterString) >= 0)
                    return true;
            }
            return false;
        }

        private function input_changeHandler(event:TextOperationEvent):void
        {
            filterString = input.text.toLocaleLowerCase();
            dataProvider.refresh();
        }

    ]]>
    </fx:Script>

    <s:layout>
        <s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/>
    </s:layout>

    <s:TextInput id="input" change="input_changeHandler(event)"/>

    <mx:DataGrid dataProvider="{dataProvider}"/>

</s:Application>