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真的是太有用了。
这个有利于看到你写过的东西到底硬不硬。