Fiori2.0-如何对数据进行筛选。

引言

筛选数据是很常用的功能之一。本篇我们就来讲讲如何利用fragment对数据进行筛选。

流程

就拿我最近做的一个练习当做例子来说吧。
这是一个Master-Detail结构的APP，我们想对Master的数据进行字段筛选。

期望于点击筛选按钮后，出现一个fragment来显示选择筛选条件。
这里我们有两个大筛选条件Country、VAT（如图一），点击item后会出现详细的筛选条件（如图二）

代码

Master页

   <m:Page title="My Prospects (4)" showHeader="true" showFooter="true" showNavButton="false">
        <m:content>
             <m:List mode="SingleSelectMaster" width="100%" headerText="Header"  backgroundDesign="Solid" showSeparators="All" 
             growing="true" growingThreshold="20" growingScrollToLoad="true" 
             itemPress="ListItemPress" items="{/Prospect}" id="infoitems">
                <m:infoToolbar/>
                <m:headerToolbar>
                    <m:Toolbar visible="true" enabled="true" width="" design="Solid">
                        <m:content>
                            <m:SearchField placeholder="Search" showSearchButton="true" visible="true" width="100%"/>
                        </m:content>
                    </m:Toolbar>
                </m:headerToolbar>
                <m:items>
                    <m:ObjectListItem intro="" title="{CustomerName}" number="{CustomerID}" numberUnit="" numberState="None" type="Active" selected="false" showMarkers="false">
                        <m:attributes>
                            <m:ObjectAttribute title="Country" text="{Country}" active="false"/>
                            <m:ObjectAttribute title="City" text="{City}" active="false"/>
                            <m:ObjectAttribute title="VAT" text="{VAT}" active="false"/>
                        </m:attributes>
                        <m:firstStatus/>
                        <m:secondStatus/>
                    </m:ObjectListItem>
                </m:items>
            </m:List>
        </m:content>
        <m:footer>
            <m:Bar design="Auto">
                <m:contentLeft>
                    <m:Button text="New Prospect" type="Transparent" icon="sap-icon://create" iconFirst="true" width="auto" enabled="true" visible="true" iconDensityAware="false" press="Dialog_NewProspects"/>
                </m:contentLeft>
                <m:contentMiddle/>
                <m:contentRight>
                    <m:Button text="" type="Default" icon="sap-icon://sort" iconFirst="true" width="auto" enabled="true" visible="true" iconDensityAware="false" press="Dialog_sort"/>
                    <m:Button text="" type="Default" icon="sap-icon://filter" iconFirst="true" width="auto" enabled="true" visible="true" iconDensityAware="false" press="Dialog_filter"/>
                    <m:Button text="" type="Default" icon="sap-icon://switch-views" iconFirst="true" width="auto" enabled="true" visible="true" iconDensityAware="false" press="Dialog_select"/>
                </m:contentRight>
            </m:Bar>
        </m:footer>
        <m:headerContent>
            <m:Button text="" type="Default" icon="sap-icon://settings" iconFirst="true" width="auto" enabled="true" visible="true" iconDensityAware="false" press="Dialog_DSO"/>
        </m:headerContent>
    </m:Page>

fragment页

<core:FragmentDefinition
    xmlns="sap.m"
    xmlns:core="sap.ui.core">
    <ViewSettingsDialog
        title="Filter"
        confirm="onViewSettingsConfirm_filter">

        <filterItems>
            <ViewSettingsFilterItem
                text="Country"
                key="Country"
                multiSelect="true">
                <items>
                    <ViewSettingsItem text="Belgium" key="Country___EQ___Belgium" />
                    <ViewSettingsItem text="Germany" key="Country___EQ___Germany" />
                    <ViewSettingsItem text="Netherlands" key="Country___EQ___Netherlands" />
                </items>
            </ViewSettingsFilterItem>
            <ViewSettingsFilterItem
                text="VAT"
                key="VAT"
                multiSelect="true">
                <items>
                    <ViewSettingsItem text="BE0422191708" key="VAT___EQ___BE0422191708" />
                    <ViewSettingsItem text="BE0417173937" key="VAT___EQ___BE0417173937" />
                    <ViewSettingsItem text="DE125752382" key="VAT___EQ___DE125752382" />
                    <ViewSettingsItem text="NL001275823B01" key="VAT___EQ___NL001275823B01" />
                </items>
            </ViewSettingsFilterItem>

        </filterItems>

        </ViewSettingsDialog>
</core:FragmentDefinition>

controller页

    onViewSettingsConfirm_filter : function (oEvent) {
        var oinfoitems = this.getView().byId("infoitems");

            var oBindingItems = oinfoitems.getBinding("items");
            var mParams = oEvent.getParameters();


            var aFilters = [];
            jQuery.each(mParams.filterItems, function (i, oItem) {
                var aSplit = oItem.getKey().split("___");
                var sPath = aSplit[0];
                var sOperator = aSplit[1];
                var sValue1 = aSplit[2];
                var oFilter = new Filter(sPath, sOperator, sValue1);
                aFilters.push(oFilter);
            });
            oBindingItems.filter(aFilters);



        }

代码分析

首先，我们所有的数据都绑定在了LIST里，点击filter按钮后会弹出fragment。

然后，我们把fragment要以ViewSettingsDialog的容器承载，因为这里面的一些方法忒方便了，关于这个API可以查看我的上上一篇博客，反正就是专门做sort、filter和group的。

我们给ViewSettingsDialog一个Event。

<ViewSettingsDialog title="Filter" confirm="onViewSettingsConfirm_filter">

关于这个confirm的用法详细可以查看上上一篇，大意就是按下OK按钮，会将所选排序、组和筛选设置应用到该页面上的数据上头。

下面这个就比较厉害了，首先最关键的还是要绑对这个KEY值，filter的KEY值还和sorter不太一样，注意他的写法，是Country___EQ___Belgium，也就是，ID-比较符-ID 的形式，而且他们之间一定是三个下划线，笔者试了其他数量的，最后显示会是no-Data。

<ViewSettingsFilterItem
                text="Country"
                key="Country"
                multiSelect="true">
                <items>
                    <ViewSettingsItem text="Belgium" key="Country___EQ___Belgium" />
                    <ViewSettingsItem text="Germany" key="Country___EQ___Germany" />
                    <ViewSettingsItem text="Netherlands" key="Country___EQ___Netherlands" />
                </items>
            </ViewSettingsFilterItem>

最后就是controller部分了。

我们依然要获取到LIST的ID。

 var oinfoitems = this.getView().byId("infoitems");

获取绑定在页面上的数据。

  var oBindingItems = oinfoitems.getBinding("items");

获取到数据里面具体的参数

 var mParams = oEvent.getParameters();

还是要创建一个空数组，用来存储筛选后的数据。

var aFilters = [];

接下来要用JQuery.each的方法遍历所有数据。
其实就是对KEY值进行操作。
拿到需要的KEY值然后分隔成数组，我们看到aSplit，可怜的小玩应已经变成这模样了。

然后定义三个变量分别取到分隔后数组的三个值。
然后把这三个值放入一个新数组里。
最后把筛选的数据绑定到一个之前定义的aFilters中。

    jQuery.each(mParams.filterItems, function (i, oItem) {
                var aSplit = oItem.getKey().split("___");
                var sPath = aSplit[0];
                var sOperator = aSplit[1];
                var sValue1 = aSplit[2];
                var oFilter = new Filter(sPath, sOperator, sValue1);
                aFilters.push(oFilter);
            });

最后把筛选过的数据绑定到页面上。over。

oBindingItems.filter(aFilters);

小技巧

AIT+shift+W 可以快速关闭web-IDE的所有代码窗口。
感觉用着贼潇洒。