SAPUI5 (29) - 使用 ViewSettingsDialog 实现排序分组和筛选

主页 » SAP文库 » Fiori

作者 stone0823 2018-03-20    760

应用程序的筛选、排序和分组必不可少。为简化开发的工作量,SAPUI5 做了几个通用控件,包括 OpenUI5 的 sap.m.ViewSettingsDialog 和 SAPUI5 的 Smart Filter Toolbar (只在 SAPUI5 中, OpenUI5 中没有)。基本上,sap.m.ViewSettingsDialog 能够满足常规需求。本篇介绍 ViewSettingsDialog 如何帮助在 UI 中实现数据的筛选、排序和分组。

应用的界面如下:

当点击这个按钮,弹出对话框。第一个界面是排序,可以按照 Table 的所有字段,进行升序或降序排序。

点击切换到筛选,我们设置为允许按照【城市】进行筛选:

点击城市,可以看到涉及的所有城市,允许勾选:

切换到分组,设置为按【国家】进行分组:

应用代码的结构:

index.html

创建一个 sap.m.App 的实例, App 包含一个 xmlView 的实例:


    
        
        

        
        

        

    
    
        
    12345678910111213141516171819202122232425262728

Table.view.xml

这是一个 View 文件,用于展示界面。View 中包含一个 Table,有【供应商ID】,【供应商名称】,【地址】,【城市】和【国家】五列。绑定到 Suppliers:



    
        
            
                
                    
                        
                                               
                        
                    
                

                
                    
                        
                    
                    
                        
                    
                    
                        
                    
                    
                        
                    
                    
                        
                    
                

                
                    
                        
                            
                            
                            
                            
                            
                        
                    
                

            
        
     1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253

SettingsDialog.fragment.xml

这是一个 OpenUI5 的 Fragement 文件。新建的时候,新建一个文件,然后输入下面的内容。


    

        
            
                       
        

        
                 
           

        
            
                             
                    
                    
                    
                
            
        

    123456789101112131415161718192021222324

主要是申明一个 sap.m.ViewSettingsDialog, 其中包括 sortItems (排序项),groupItems (分组项) 和 filterItems (筛选项)。对这些些项,我们先用用硬编码的方式,后面再来通用化。比如,现在筛选时,目前界面只出现 Tykyo, London 和 Manchester 三个城市,后面根据 Table 中的数据中涉及的城市,全部出现在筛选项中。

Table.controller.js

主要的控制逻辑都在控制器代码中,先给出完整代码:

sap.ui.define(["sap/ui/core/mvc/Controller",    "sap/ui/model/odata/v2/ODataModel",    "sap/ui/model/json/JSONModel",    "sap/ui/model/Sorter",    "sap/ui/model/Filter"],    function (Controller, ODataModel, JSONModel, Sorter, Filter) {        "use strict";        return Controller.extend("webapp.controller.Table", {            // -------------------------------
            // Initialization event
            // -------------------------------
            onInit: function () {
                // Application model
                var sServiceUrl = "https://cors-anywhere.herokuapp.com/"
                    + "http://services.odata.org/V3/Northwind/Northwind.svc/";                var oModel = new ODataModel(sServiceUrl);
                oModel.setUseBatch(false);                this.getView().setModel(oModel);
            },            // ---------------------------------------------
            // 设置 Table 的 排序,分组和筛选
            // ---------------------------------------------
            onTableSettings: function (oEvent) {
                var oDialog = this.getView().byId("SettingsDialog");                if (!oDialog) {
                    oDialog = sap.ui.xmlfragment("webapp.view.SettingsDialog", this);
                }

                oDialog.open();
            },

            onConfirm: function (oEvent) {
                var oBinding = this.getView().byId("idTable").getBinding("items");                var mParams = oEvent.getParameters();                // Apply grouping
                var aSorters = [];                if (mParams.groupItem) {                    var sGroupKey = mParams.groupItem.getKey();                    var bDescending = mParams.groupDescending;

                    aSorters.push(new Sorter(sGroupKey, bDescending, true));
                }                // Apply sorter
                if (mParams.sortItem) {                    var sSortKey = mParams.sortItem.getKey();                    var bDescending = mParams.sortDescending;
                    aSorters.push(new Sorter(sSortKey, bDescending));
                }
                oBinding.sort(aSorters);                // Apply filters
                var aFilters = [];                if (mParams.filterItems) {                    var count = mParams.filterItems.length;                    for (var i = 0; i < count; i++) {                        var oFilterItem = mParams.filterItems[i];                        var oFilter = new Filter(oFilterItem.getKey(),
                            sap.ui.model.FilterOperator.EQ, oFilterItem.getText());

                        aFilters.push(oFilter);
                    }
                }
                oBinding.filter(aFilters);
            } // end of onConfirm
        });
    });12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273

代码说明:

  • onInit 事件处理函数,实例化 oDataModel 并绑定到服务器端数据,设置当前的 View 所用的 Model 为这个 oDataModel

  • 分组:

var aSorters = [];if (mParams.groupItem) {
    var sGroupKey = mParams.groupItem.getKey();
    var bDescending = mParams.groupDescending;

    aSorters.push(new Sorter(sGroupKey, bDescending, true));}

var oBinding = this.getView().byId("idTable").getBinding("items");oBinding.sort(aSorters);12345678910
  • 排序:

if (mParams.sortItem) {
    var sSortKey = mParams.sortItem.getKey();
    var bDescending = mParams.sortDescending;
    aSorters.push(new Sorter(sSortKey, bDescending));}

var oBinding = this.getView().byId("idTable").getBinding("items");oBinding.sort(aSorters);12345678
  • 筛选:

var aFilters = [];if (mParams.filterItems) {
    var count = mParams.filterItems.length;
    for (var i = 0; i < count; i++) {
        var oFilterItem = mParams.filterItems[i];
        var oFilter = new Filter(oFilterItem.getKey(),
            sap.ui.model.FilterOperator.EQ, oFilterItem.getText());

        aFilters.push(oFilter);
    }
}

var oBinding = this.getView().byId("idTable").getBinding("items");oBinding.filter(aFilters);1234567891011121314

实现按 Table 的所有字段排序

上面 Controller 对筛选、排序和分组,代码基本上实现了通用的代码。比如通过 var sGroupKey = mParams.groupItem.getKey(); 获取 Group item 的 Key, 通过 var bDescending = mParams.groupDescending; 获取是否按降序排列。 但 Table 中有多个字段,为了实现灵活性,通过代码将所有字段加载到 Sort item 中:

首先获得 Table 的所有 Headers, 包括 id 和 header text:

_getColumnHeaders: function(){
    var aColumnHeaders = [];    var aColumns = this.getView().byId("idTable").getColumns();    for (var i = 0; i < aColumns.length; i++){        var sColumnID = aColumns[i].sId;        var sHeaderText = aColumns[i].getHeader().getText();;        // ID 中包含 view 的信息,分解得到字段的 id
        var aID = sColumnID.split('--');
        aColumnHeaders.push({
            key: aID[1],
            text: sHeaderText
        });
    }    return aColumnHeaders;
}1234567891011121314151617

然后在 onTableSettings() 事件处理程序中将列增加到 Sort Item:

onTableSettings: function (oEvent) {    var oDialog = this.getView().byId("SettingsDialog");
    if (!oDialog) {
        oDialog = sap.ui.xmlfragment("webapp.view.SettingsDialog", this);
    }

    // 增加 sort item
    var aColumnHeaders = this._getColumnHeaders();              
    oDialog.destroySortItems();
    for (var i = 0; i < aColumnHeaders.length; i++){
        oDialog.addSortItem(new sap.m.ViewSettingsItem({
            key: aColumnHeaders[i].key,
            text: aColumnHeaders[i].text
        }));
    }

    oDialog.open();}12345678910111213141516171819

从 Northwind 数据源中加载供应商的城市

为了实现动态的数据,从 Northwind 数据源中加载数据。使用 JSON Model:

_getCities: function(){
    var aCities = [];    //var uniqueCities = [];

    // 使用 JSON model 
    var sServiceUrl = "http://services.odata.org/V3/Northwind/Northwind.svc/Suppliers";    var oJSONModel = new JSONModel();
    oJSONModel.loadData(sServiceUrl, null, false, "GET", false, false, null);    var oData = oJSONModel.getProperty("/value");    // 获取城市并且消除重复项
    if (oData instanceof Array){
        $.each(oData, function(i, element){
            if ($.inArray(element.City, aCities) === -1) {
                aCities.push(element.City);
            }
        });
    }    return aCities.sort();
            }123456789101112131415161718192021

然后在 onTableSettings 事件处理程序中添加 Filter Item:

onTableSettings: function (oEvent) {

    var oDialog = this.getView().byId("SettingsDialog");    if (!oDialog) {
        oDialog = sap.ui.xmlfragment("webapp.view.SettingsDialog", this);
    }    // 增加 sort item
    ...    // 增加 filter items
    var aSupplierCities = this._getCities();                
    var aFilterItems = [];    for (var i = 0; i < aSupplierCities.length; i++){
        aFilterItems.push(            new sap.m.ViewSettingsItem({
                text: aSupplierCities[i],
                key: "City"
            })
        );
    }

    oDialog.destroyFilterItems();
    oDialog.addFilterItem(new sap.m.ViewSettingsFilterItem({
        key: "Filter_by_City",
        text: "城市",
        items: aFilterItems
    }));

    oDialog.open();
}1234567891011121314151617181920212223242526272829303132

这样,就实现了动态加载供应商的城市。最后给出 Table.controller.js 重构后的完整代码。

sap.ui.define(["sap/ui/core/mvc/Controller",    "sap/ui/model/odata/v2/ODataModel",    "sap/ui/model/json/JSONModel",    "sap/ui/model/Sorter",    "sap/ui/model/Filter"],    function (Controller, ODataModel, JSONModel, Sorter, Filter) {        "use strict";        return Controller.extend("webapp.controller.Table", {            // -------------------------------
            // Initialization event
            // -------------------------------
            onInit: function () {
                // Application model
                var sServiceUrl = "https://cors-anywhere.herokuapp.com/"
                    + "http://services.odata.org/V3/Northwind/Northwind.svc/";                var oModel = new ODataModel(sServiceUrl);
                oModel.setUseBatch(false);                this.getView().setModel(oModel);
            },            // ---------------------------------------------
            // 设置 Table 的 排序,分组和筛选
            // ---------------------------------------------
            onTableSettings: function (oEvent) {

                var oDialog = this.getView().byId("SettingsDialog");                if (!oDialog) {
                    oDialog = sap.ui.xmlfragment("webapp.view.SettingsDialog", this);
                }                // 增加 sort item
                var aColumnHeaders = this._getColumnHeaders();
                oDialog.destroySortItems();                for (var i = 0; i < aColumnHeaders.length; i++) {
                    oDialog.addSortItem(new sap.m.ViewSettingsItem({
                        key: aColumnHeaders[i].key,
                        text: aColumnHeaders[i].text
                    }));
                }                // 增加 filter items
                var aSupplierCities = this._getCities();                var aFilterItems = [];                for (var i = 0; i < aSupplierCities.length; i++) {
                    aFilterItems.push(                        new sap.m.ViewSettingsItem({
                            text: aSupplierCities[i],
                            key: "City"
                        })
                    );
                }

                oDialog.destroyFilterItems();
                oDialog.addFilterItem(new sap.m.ViewSettingsFilterItem({
                    key: "Filter_by_City",
                    text: "城市",
                    items: aFilterItems
                }));

                oDialog.open();
            },

            onConfirm: function (oEvent) {
                var oBinding = this.getView().byId("idTable").getBinding("items");                var mParams = oEvent.getParameters();                // Apply grouping
                var aSorters = [];                if (mParams.groupItem) {                    var sGroupKey = mParams.groupItem.getKey();                    var bDescending = mParams.groupDescending;

                    aSorters.push(new Sorter(sGroupKey, bDescending, true));
                }                // Apply sorter
                if (mParams.sortItem) {                    var sSortKey = mParams.sortItem.getKey();                    var bDescending = mParams.sortDescending;
                    aSorters.push(new Sorter(sSortKey, bDescending));
                }
                oBinding.sort(aSorters);                // Apply filters
                var aFilters = [];                if (mParams.filterItems) {                    var count = mParams.filterItems.length;                    for (var i = 0; i < count; i++) {                        var oFilterItem = mParams.filterItems[i];                        var oFilter = new Filter(oFilterItem.getKey(),
                            sap.ui.model.FilterOperator.EQ, oFilterItem.getText());

                        aFilters.push(oFilter);
                    }
                }
                oBinding.filter(aFilters);
            }, // end of onConfirm

            _getColumnHeaders: function () {
                var aColumnHeaders = [];                var aColumns = this.getView().byId("idTable").getColumns();                for (var i = 0; i < aColumns.length; i++) {                    var sColumnID = aColumns[i].sId;                    var sHeaderText = aColumns[i].getHeader().getText();                    // ID 中包含 view 的信息,分解得到字段的 id
                    var aID = sColumnID.split('--');
                    aColumnHeaders.push({
                        key: aID[1],
                        text: sHeaderText
                    });
                }                return aColumnHeaders;
            },   // end of _getColumnHeaders

            //-----------------------------------------------
            // 从 OData 数据服务获取供应商的城市,并且消除重复项
            //-----------------------------------------------
            _getCities: function () {
                var aCities = [];                //var uniqueCities = [];

                // 使用 JSON model 
                var sServiceUrl = "http://services.odata.org/V3/Northwind/Northwind.svc/Suppliers";                var oJSONModel = new JSONModel();
                oJSONModel.loadData(sServiceUrl, null, false, "GET", false, false, null);                var oData = oJSONModel.getProperty("/value");                // 获取城市并且消除重复项
                if (oData instanceof Array) {
                    $.each(oData, function (i, element) {
                        if ($.inArray(element.City, aCities) === -1) {
                            aCities.push(element.City);
                        }
                    });
                }                return aCities.sort();
            }
        });
    });123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147

源代码

29_odata_filter_sort_group_using_viewSettingsDialog


本文原始地址:http://sapdoc.cn/sap/theme/323.html

转载请注明出处来自 SAP文库

上一篇

AA固定资产|概述

下一篇

SAPUI5 (30) - OData 中 Image 的显示和编辑 (上)