Question

在我的应用程序中，我有一个包含9列的Spark DataGrid，包括名称，ID，加入日期，DOB，经验，手机号码，电子邮件，每列都有搜索字段，其中包括TextField，DateField，NumericStepper来搜索数据。我想根据用户输入过滤数据，这意味着我想根据用户输入匹配每个字段。我的示例代码是：

<fx:Script>
    <![CDATA[
        import mx.controls.Alert;
        import mx.events.FlexEvent;
        import mx.rpc.events.FaultEvent;
        import mx.rpc.events.ResultEvent;
        import mx.utils.ObjectUtil;

        import spark.components.Alert;

        private function xmlListCollectionFilterFun(item:Object):Boolean
        {
            var min:Number = startYear.value;
            var max:Number = endYear.value;
            var exp:Number = item.Experience;
            var bool:Boolean = false;

            if (employeeName.text.length != 0 
                || employeeID.text.length != 0 
                ||designation.text.length != 0
                ||department.text.length != 0
                ||empMobile.text.length != 0
                ||email.text.length != 0
                ||endYear.value != 0
                ||employeeDob.selectedDate
                ||employeeDoj.selectedDate)
            {
                if((item.Name).toLowerCase().indexOf(employeeName.text.toLowerCase())  != -1
                    &&(item.Id).toLowerCase().indexOf(employeeID.text.toLowerCase()) != -1                      
                    && (item.Designation).toLowerCase().indexOf(designation.text.toLowerCase())!= -1
                    && (item.Department).toLowerCase().indexOf(department.text.toLowerCase()) != -1
                    && (item.Mobile).toLowerCase().indexOf(empMobile.text.toLowerCase()) != -1
                    && (item.Email).toLowerCase().indexOf(email.text.toLowerCase()) != -1
                    && (Date.parse(item.DOB)<=employeeDob.selectedDate.time)
                    && (Date.parse(item.DOJ)<=employeeDoj.selectedDate.time)
                    && (min<=exp && exp<=max))
                {
                    bool = true;
                }

            }
            return bool;

        protected function employeeText_changeHandler():void
        {
            if (employeeName.text.length == 0 && department.text.length == 0 && designation.text.length == 0 && 
                empMobile.text.length == 0 && email.text.length == 0 && endYear.value == 0 && startYear.value == 0 &&
                employeeID.text.length == 0 && !employeeDob.selectedDate && !employeeDoj.selectedDate)
            {
                employeeXMLList.filterFunction = null;
            }
            else
            {
                employeeXMLList.filterFunction = xmlListCollectionFilterFun;
            }
            employeeXMLList.refresh();              

        }

        protected function employeeServiceResultHandler(event:ResultEvent):void
        {
            var xmlList:XMLList = XML(event.result).Employee;
            employeeXMLList = new XMLListCollection(xmlList);
        }

        protected function employeeServiceFaultHandler(event:FaultEvent):void
        {
            spark.components.Alert.show(event.fault.faultString,"Fault Information for POST");
        }

        protected function checkStep():void
        {
            if (startYear.value > endYear.value)
            {
                endYear.value = startYear.value+1;
            }
        }
    ]]>
</fx:Script>


<fx:Declarations>   
    <s:XMLListCollection id="employeeXMLList" filterFunction="xmlListCollectionFilterFun"/>
    <s:HTTPService id="employeeService" url="http://localhost/demo/TextXmlFile.xml" 
                   method="POST" result="employeeServiceResultHandler(event)"
                   fault="employeeServiceFaultHandler(event)"
                   resultFormat="xml"/>
</fx:Declarations>

    <s:VGroup width="100%">
        <s:HGroup width="100%">
            <s:TextInput id="employeeName" prompt="Employee Name" change="employeeText_changeHandler()" width="115"/>
            <s:TextInput id="employeeID" prompt="Employee ID" change="employeeText_changeHandler()" width="95"/>
            <mx:DateField id="employeeDob" yearNavigationEnabled="true" editable="false" change="employeeText_changeHandler()"
                          selectableRange="{{rangeStart:new Date(1970, 01, 01), rangeEnd:new Date()}}"
                          selectedDate="{new Date}"/>
            <s:TextInput id="designation" prompt="Designation" change="employeeText_changeHandler()" width="195"/>
            <s:TextInput id="department" prompt="Departmant" change="employeeText_changeHandler()" width="115"/>
            <mx:DateField id="employeeDoj" yearNavigationEnabled="true"  editable="false" change="employeeText_changeHandler()"
                          selectableRange="{{rangeStart:new Date(1970, 01, 01), rangeEnd:new Date()}}"
                          selectedDate="{new Date}"/>
            <s:NumericStepper id="startYear" minimum="0" maximum="50" snapInterval="1" change="checkStep(),employeeText_changeHandler()"/>
            <s:NumericStepper id="endYear" minimum="1" maximum="50" snapInterval="1"
                              change="employeeText_changeHandler()" value="20"/>
            <s:TextInput id="empMobile" prompt="Mobile Number" change="employeeText_changeHandler()" width="170"/>
            <s:TextInput id="email" prompt="Email ID" change="employeeText_changeHandler()" width="310"/>
        </s:HGroup>
        <s:HGroup height="100%" width="100%">
        <s:DataGrid id="dataGrid" dataProvider="{employeeXMLList}" width="100%" height="500">
            <s:columns>
                <s:ArrayCollection>
                    <s:GridColumn id="nameCol" dataField="Name" headerText="Name:" width="120"/>
                    <s:GridColumn id="idCol" dataField="Id" headerText="ID:" width="100"/>
                    <s:GridColumn id="dobCol" dataField="DOB" headerText="DOB:" width="100"/>
                    <s:GridColumn id="designationCol" dataField="Designation" headerText="Designation:" width="200"/>
                    <s:GridColumn id="departmentCol" dataField="Department" headerText="Department:" width="120"/>
                    <s:GridColumn id="dojCol" dataField="DOJ" headerText="DOJ:" width="100"/>
                    <s:GridColumn id="experienceCol" dataField="Experience" headerText="Experience:" width="100"/>
                    <s:GridColumn id="mobileCol" dataField="Mobile" headerText="Mobile:" width="200"/>
                    <s:GridColumn id="emailCol" dataField="Email" headerText="Email:" width="300"/>
                </s:ArrayCollection>
            </s:columns>
        </s:DataGrid>
            </s:HGroup>
    </s:VGroup>

我的问题是：

我希望从DateField中删除selectedDate属性，这意味着在DataGrid上加载数据时，所有过滤器字段都应为空。
我正在使用单个if条件进行过滤。我怎么拆分它？
我想过滤数据，甚至一些过滤字段都是空的。

修改

    <fx:Script>
    <![CDATA[
        import mx.controls.Alert;
        import mx.events.FlexEvent;
        import mx.rpc.events.FaultEvent;
        import mx.rpc.events.ResultEvent;
        import mx.utils.ObjectUtil;

        import spark.components.Alert;

        private function xmlListCollectionFilterFun(item:Object):Boolean
        {
            if (employeeName.text.length != 0)
            {
                var xmlName:String = (item.Name).toLowerCase();
                var textName:String = employeeName.text.toLowerCase();
                if((item.Name).toLowerCase().indexOf(employeeName.text.toLowerCase()) != -1)
                {
                    return true;
                }
            }
            if (employeeID.text.length != 0)
            {
                if ((item.Id).toLowerCase().indexOf(employeeID.text.toLowerCase()) != -1)
                {
                    return true;
                } 
            }
            if (employeeDob.selectedDate)
            {
                var dob:String = item.DOB;
                var dobDate:Date = new Date();
                var matches:Array = dob.split("/");
                dobDate.setUTCFullYear(int(matches[0]), int(matches[1]) - 1, int(matches[2]))
                if (ObjectUtil.dateCompare(employeeDob.selectedDate,dobDate) == -1)
                {
                    return true;        
                }
            } 
            if (designation.text.length != 0)
            {
                if ((item.Designation).toLowerCase().indexOf(designation.text.toLowerCase())!= -1)
                {
                    return true;
                }
            }
            if (department.text.length != 0)
            {
                if ((item.Department).toLowerCase().indexOf(department.text.toLowerCase()) != -1)
                {
                    return true;
                }
            }
            if (employeeDoj.selectedDate)
            {
                var doj:String = item.DOJ;
                var dojDate:Date = new Date();
                var matche:Array = doj.split("/");
                dojDate.setUTCFullYear(int(matche[0]), int(matche[1]) - 1, int(matche[2]))
                if (ObjectUtil.dateCompare(employeeDoj.selectedDate,dojDate) == -1)
                {
                    return true;        
                }
            } 
            if (endYear.value != 0)
            {
                var min:Number = startYear.value;
                var max:Number = endYear.value;
                var exp:Number = item.Experience;
                if ((min<=exp) && (exp<=max))
                {
                    return true;
                }
            } 
            if (empMobile.text.length != 0)
            {
                if ((item.Mobile).toLowerCase().indexOf(empMobile.text.toLowerCase()) != -1)
                {
                    return true;
                }
            } 
            if (email.text.length != 0)
            {
                if ((item.Email).toLowerCase().indexOf(email.text.toLowerCase()) != -1)
                {
                    return true;
                }
            }

            return false;
        }

        protected function employeeText_changeHandler():void
        {
            if (employeeName.text.length == 0 && department.text.length == 0 && designation.text.length == 0 && 
                empMobile.text.length == 0 && email.text.length == 0 && endYear.value == 0 && startYear.value == 0 &&
                employeeID.text.length == 0 && !employeeDob.selectedDate && !employeeDoj.selectedDate)
            {
                employeeXMLList.filterFunction = null;
            }
            else
            {
                employeeXMLList.filterFunction = xmlListCollectionFilterFun;
            }
            employeeXMLList.refresh();              

        }

        protected function employeeService_resultHandler(event:ResultEvent):void
        {
            var xmlList:XMLList = XML(event.result).Employee;
            employeeXMLList = new XMLListCollection(xmlList);
        }

        protected function employeeService_faultHandler(event:FaultEvent):void
        {
            spark.components.Alert.show(event.fault.faultString,"Fault Information for POST");
        }

    ]]>
</fx:Script>


<fx:Declarations>   
    <s:XMLListCollection id="employeeXMLList" filterFunction="xmlListCollectionFilterFun"/>
    <s:HTTPService id="employeeService" url="http://localhost/demo/TextXmlFile.xml" 
                   method="POST" result="employeeService_resultHandler(event)"
                   fault="employeeService_faultHandler(event)"
                   resultFormat="xml"/>
</fx:Declarations>

<s:layout>
    <s:VerticalLayout verticalAlign="top" horizontalAlign="center" paddingTop="30"/>
</s:layout>
<mx:VBox width="100%">
    <s:HGroup horizontalAlign="center" verticalAlign="middle">
        <s:Label id="mainLabel" text="Employee Details"/>
    </s:HGroup>
    <s:HGroup width="100%">
        <s:TextInput id="employeeName" prompt="Employee Name" change="employeeText_changeHandler()" width="115"/>
        <s:TextInput id="employeeID" prompt="Employee ID" change="employeeText_changeHandler()" width="95"/>
        <mx:DateField id="employeeDob" yearNavigationEnabled="true" editable="true" change="employeeText_changeHandler()"
                      selectableRange="{{rangeStart:new Date(1970, 01, 01), rangeEnd:new Date()}}"/>
        <s:TextInput id="designation" prompt="Designation" change="employeeText_changeHandler()" width="195"/>
        <s:TextInput id="department" prompt="Departmant" change="employeeText_changeHandler()" width="115"/>
        <mx:DateField id="employeeDoj" yearNavigationEnabled="true"  editable="true" change="employeeText_changeHandler()"
                      selectableRange="{{rangeStart:new Date(1970, 01, 01), rangeEnd:new Date()}}"/>
        <s:NumericStepper id="startYear" minimum="0" maximum="50" snapInterval="1" change="employeeText_changeHandler()"/>
        <s:NumericStepper id="endYear" minimum="0" maximum="50" snapInterval="1" change="employeeText_changeHandler()"/>
        <s:TextInput id="empMobile" prompt="Mobile Number" change="employeeText_changeHandler()" width="170"/>
        <s:TextInput id="email" prompt="Email ID" change="employeeText_changeHandler()" width="310"/>
    </s:HGroup>
    <s:DataGrid id="dataGrid" dataProvider="{employeeXMLList}" width="100%" height="100%">
        <s:columns>
            <s:ArrayCollection>
                <s:GridColumn id="nameCol" dataField="Name" headerText="Name:" width="120"/>
                <s:GridColumn id="idCol" dataField="Id" headerText="ID:" width="100"/>
                <s:GridColumn id="dobCol" dataField="DOB" headerText="DOB:" width="100"/>
                <s:GridColumn id="designationCol" dataField="Designation" headerText="Designation:" width="200"/>
                <s:GridColumn id="departmentCol" dataField="Department" headerText="Department:" width="120"/>
                <s:GridColumn id="dojCol" dataField="DOJ" headerText="DOJ:" width="100"/>
                <s:GridColumn id="experienceCol" dataField="Experience" headerText="Experience:" width="100"/>
                <s:GridColumn id="mobileCol" dataField="Mobile" headerText="Mobile:" width="200"/>
                <s:GridColumn id="emailCol" dataField="Email" headerText="Email:" width="300"/>
            </s:ArrayCollection>
        </s:columns>
    </s:DataGrid>
</mx:VBox>

我在这里做了一切。但过滤器的执行方式与employeeName.Text ||相同employeeId.text || .....但我需要像employeeName.Text＆amp;＆amp ;; employeeId.text＆amp;＆amp; .....

我目前的输出是： enter image description here

但我想这样： enter image description here

更新

                var bool:Boolean = true;
            if (employeeName.text.length != 0)
            {
                if((item.Name).toLowerCase().indexOf(employeeName.text.toLowerCase()) != -1) 

                {
                    bool = bool && true;
                }
                else
                {
                    bool = bool && false;
                }
            }

可能会更正。

Answer 1

关于spiting它你可以为每一列创建一个小的过滤函数并将它们组合起来

function nameFilter
function emailFilter

function collectionFilter(iterm:*):Boolean{
 return nameFilter(item)&&emailFilter(item)&&....
}

使用这种方法，您可以逐个实现它们并测试过滤。

如果过滤字段为空，则只需从过滤器

返回true

function nameFilter(item:*):Boolean{
 var name:String=item.name;
 var filter:String=employeeName.text;
 if(!filter||filter.length==0) return true;
 return name.indexOf(filter)==0;//change this to get your results
//you may want to make the name and filter lowercase before this
}

所以我的想法是将大型函数拆分为较小的函数，函数应该做一件事并且很简单，如果可能的话，我也尝试使它们没有副作用（计算并返回结果而不更改任何字段））。您有时可能会忽略此规则，但这有很多优点，尤其是易于阅读和推理的事实。

EDIT 这是错误的

    if (empMobile.text.length != 0)
    {
        if ((item.Mobile).toLowerCase().indexOf(empMobile.text.toLowerCase()) != -1)
        {
            return true;
        }
    }

因为代码不会到达其他检查，所以这是一个你会得到错误结果的地方，你可以通过否定并返回false来做到这一点，因为如果你想要AND（所有过滤器必须通过）那么你可以返回false当你发现第一个失败的过滤器

使用flex4中的更多TextInputs过滤xmllistcollection

1 个答案: