fiori2.0-如何对数据进行某一字段排序。

引言

很多情况下，单一的正序ID是无法满足客服的需求的，他们往往希望对某一字段进行排序。下面提供一个拙法可以当做参考。

流程

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

期望于点击排序按钮后，出现一个fragment来显示选择排序条件。
这里，我们上侧为正序与倒叙排序，下侧我们希望针对四个字段CustomerName，CustomerID，Country，VAT进行与上侧的关联排序

代码

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="Sorting"
        confirm="onViewSettingsConfirm">
        <sortItems>
            <ViewSettingsItem text="CustomerName" key="CustomerName" />
            <ViewSettingsItem text="CustomerID" key="CustomerID" />
            <ViewSettingsItem text="Country" key="Country" />
            <ViewSettingsItem text="VAT" key="VAT" />
        </sortItems>

    </ViewSettingsDialog>
</core:FragmentDefinition>

controller页

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


            var oBindingItems = oinfoitems.getBinding("items");
            var mParams = oEvent.getParameters();
            var aSorters = [], sPath, vGroup, bDescending;

            if (mParams.sortItem) {
                sPath = mParams.sortItem.getKey();//get sortItems of key

                bDescending = mParams.sortDescending;
                aSorters.push(new Sorter(sPath, bDescending));
            }

            oBindingItems.sort(aSorters);

        }

代码分析

首先，我们所有的数据都绑定在了LIST里。

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

我们给ViewSettingsDialog一个Event

    <ViewSettingsDialog   title="Sorting"   confirm="onViewSettingsConfirm">

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

这里我们要给想要排序的字段一个KEY值，这个很重要。这个KEY值得相关资料我也没找到，但是我觉得是跟ID差的不多的东西，我这个练习中绑定的是JSONMODEL，所以这个KEY值就是我JSON文件中的字段名字。我想在实际开发中，应该也是差不多的用法吧。如果我说的不对，望指正。

<sortItems>
            <ViewSettingsItem text="CustomerName" key="CustomerName" />
            <ViewSettingsItem text="CustomerID" key="CustomerID" />
            <ViewSettingsItem text="Country" key="Country" />
            <ViewSettingsItem text="VAT" key="VAT" />
        </sortItems>

然后就是controller部分了。
首先我们要获取到LIST的ID。

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

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

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

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

    var mParams = oEvent.getParameters();

这个地方我理解的可能不对，我认为这个是创建一个空数组，期望于把排序好的数组放到这个数组里面。

var aSorters = [], sPath, bDescending;

下面是我console输出的aSorters，应该差不多是这意思

排序逻辑

if (mParams.sortItem) {
                sPath = mParams.sortItem.getKey();//get sortItems of key

                bDescending = mParams.sortDescending;
                aSorters.push(new Sorter(sPath, bDescending));
            }

把排序好的数据再绑定到页面上。

BindingItems.sort(aSorters);

就做好了。

小技巧

这里最后补一个小技巧。
就是不断console.log真的是太有用了。
这个有利于看到你写过的东西到底硬不硬。