sapui5 - 通过 XMLView 绑定(bind)项目时正确使用过滤器-6ren

sapui5 - 通过 XMLView 绑定(bind)项目时正确使用过滤器

转载作者：行者123 更新时间：2023-12-04 09:23:46

使用 sap.m.Select ，我有一个类似的代码如下:

<m:Select
    selectedKey='{state}'
    items="{
        path: 'states>/content',
        sorter: {
            path: 'name'
        }
    }">
    <core:Item key="{states>id}" text="{states>name}" />
</m:Select>

由于希望能够在另一个输入中选择状态时按国家/地区过滤状态，所以，我正在尝试使用 filters ，在以下文档中定义:

https://sapui5.netweaver.ondemand.com/docs/api/symbols/sap.ui.base.ManagedObject.html#bindAggregation

https://sapui5.netweaver.ondemand.com/#docs/api/symbols/sap.ui.model.Filter.html

问题是我找不到任何地方(文档、谷歌、SO、源代码、示例、测试)来展示如何正确使用它。我尝试了这两种方法都没有成功:

<m:Select
    selectedKey='{state}'
    items="{
        path: 'states>/content',
        sorter: {
            path: 'name'
        },
        filters: [{
            path: 'countryId',
            operator: 'EQ',
            value1: '10' // just example
        ]}
    }">
    <core:Item key="{states>id}" text="{states>name}" />
</m:Select>

和

# View
<m:Select
    selectedKey='{state}'
    items="{
        path: 'states>/content',
        sorter: {
            path: 'name'
        },
        filters: ['.filterByCountry'}
    }">
    <core:Item key="{states>id}" text="{states>name}" />
</m:Select>

# Controller
...
filterByCountry: new sap.ui.model.Filter({
    path: 'countryId',
    operator: 'EQ',
    value1: '10'
}),
...

有人知道正确的使用方法吗？

最佳答案

以下是过滤器在 XML View 中的工作方式 - 请参阅下面我为您编写的 2 个示例(如果它们不在 stackoverflow 上运行，请使用 jsbin 链接)。他们都使用 Northwind OData 服务。正如您将看到的那样，它非常简单:

<Select
    items="{
        path : '/Orders',
        sorter: {
            path: 'OrderDate',
            descending: true
        },
        filters : [
            { path : 'ShipCountry', operator : 'EQ', value1 : 'Brazil'}
        ]
    }">

当然，您也可以添加多个过滤器(参见下面的第二个示例)。

但是，请记住，过滤器是在 XMLView 中声明的。不幸的是，UI5 目前还没有那么动态，无法通过仅使用 XMLView 中的绑定(bind)语法来动态更改 XMLView 中定义的此类过滤器。相反，您需要一些 JavaScript 代码。在您的情况下，您可以监听另一个字段的更改事件。在事件处理程序中，您只需创建一个新的过滤器并应用它:

var oSelect, oBinding, aFilters, sShipCountry;

sFilterValue = ...; // I assume you can get the filter value from somewhere...
oSelect = this.getView().byId(...); //get the reference to your Select control
oBinding = oSelect.getBinding("items");
aFilters = [];

if (sFilterValue){
    aFilters.push( new Filter("ShipCountry", FilterOperator.Contains, sFilterValue) );
}
oBinding.filter(aFilters, FilterType.Application);  //apply the filter

这应该是你需要做的所有事情。下面的示例不使用任何 JavaScript 代码作为过滤器，但我想你明白了。

1. 示例 - 选择框:

运行代码: https://jsbin.com/wamugexeda/edit?html,output

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>SAPUI5 single file template | nabisoft</title>
        <script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
            id="sap-ui-bootstrap"
            data-sap-ui-theme="sap_bluecrystal"
            data-sap-ui-libs="sap.m"
            data-sap-ui-bindingSyntax="complex"
            data-sap-ui-compatVersion="edge"
            data-sap-ui-preload="async"></script>
            <!-- use "sync" or change the code below if you have issues -->
 
        <!-- XMLView -->
        <script id="myXmlView" type="ui5/xmlview">
            <mvc:View
                controllerName="MyController"
                xmlns="sap.m"
                xmlns:core="sap.ui.core"
                xmlns:mvc="sap.ui.core.mvc">
 
                <Select
                    items="{
                        path : '/Orders',
                        sorter: {
                            path: 'OrderDate',
                            descending: true
                        },
                        filters : [
                            { path : 'ShipCountry', operator : 'EQ', value1 : 'Brazil'}
                        ]					
                    }">
                    <core:Item key="{OrderID}" text="{OrderID} - {ShipName}" />
                </Select>
 
            </mvc:View>
        </script>
 
        <script>
            sap.ui.getCore().attachInit(function () {
                "use strict";
 
                //### Controller ###
                sap.ui.define([
                    "sap/ui/core/mvc/Controller",
                    "sap/ui/model/odata/v2/ODataModel"
                ], function (Controller, ODataModel) {
                    "use strict";
 
                    return Controller.extend("MyController", {
                        onInit : function () {
                            this.getView().setModel(
                                new ODataModel("https://cors-anywhere.herokuapp.com/services.odata.org/V2/Northwind/Northwind.svc/", {
                                    json : true,
                                    useBatch : false
                                })
                            );
                        }
                    });
                });
 
                //### THE APP: place the XMLView somewhere into DOM ###
                sap.ui.xmlview({
                    viewContent : jQuery("#myXmlView").html()
                }).placeAt("content");
 
            });
        </script>
 
    </head>
 
    <body class="sapUiBody">
        <div id="content"></div>
    </body>
</html>

2. 示例 - 表:

运行代码: https://jsbin.com/yugefovuyi/edit?html,output

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>SAPUI5 single file template | nabisoft</title>
        <script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
            id="sap-ui-bootstrap"
            data-sap-ui-theme="sap_bluecrystal"
            data-sap-ui-libs="sap.m"
            data-sap-ui-bindingSyntax="complex"
            data-sap-ui-compatVersion="edge"
            data-sap-ui-preload="async"></script>
            <!-- use "sync" or change the code below if you have issues -->
 
        <!-- XMLView -->
        <script id="myXmlView" type="ui5/xmlview">
            <mvc:View
                controllerName="MyController"
                xmlns="sap.m"
                xmlns:core="sap.ui.core"
                xmlns:mvc="sap.ui.core.mvc">
 
                <Table
                    id="myTable"
                    growing="true"
                    growingThreshold="10"
                    growingScrollToLoad="true"
                    busyIndicatorDelay="0"
                    items="{
                        path : '/Orders',
                        sorter: {
                            path: 'OrderDate',
                            descending: true
                        },
                        filters : [
                            { path : 'ShipCity', operator : 'Contains', value1 : 'rio'},
                            { path : 'ShipName', operator : 'EQ', value1 : 'Hanari Carnes'}
                        ]					
                    }">
                    <headerToolbar>
                        <Toolbar>
                            <Title text="Orders of ALFKI"/>
                            <ToolbarSpacer/>
                        </Toolbar>
                    </headerToolbar>
                    <columns>
                        <Column>
                            <Text text="OrderID"/>
                        </Column>
                        <Column>
                            <Text text="Order Date"/>
                        </Column>
                        <Column>
                            <Text text="To Name"/>
                        </Column>
                        <Column>
                            <Text text="Ship City"/>
                        </Column>
                    </columns>
                    <items>
                        <ColumnListItem type="Active">
                            <cells>
                                <ObjectIdentifier title="{OrderID}"/>

                                <Text
                                    text="{
                                        path:'OrderDate',
                                        type:'sap.ui.model.type.Date',
                                        formatOptions: { style: 'medium', strictParsing: true}
                                    }"/>

                                <Text text="{ShipName}"/>

                                <Text text="{ShipCity}"/>

                            </cells>
                        </ColumnListItem>
                    </items>
                </Table>
 
            </mvc:View>
        </script>
 
        <script>
            sap.ui.getCore().attachInit(function () {
                "use strict";
 
                //### Controller ###
                sap.ui.define([
                    "sap/ui/core/mvc/Controller",
                    "sap/ui/model/odata/v2/ODataModel"
                ], function (Controller, ODataModel) {
                    "use strict";
 
                    return Controller.extend("MyController", {
                        onInit : function () {
                            this.getView().setModel(
                                new ODataModel("https://cors-anywhere.herokuapp.com/services.odata.org/V2/Northwind/Northwind.svc/", {
                                    json : true,
                                    useBatch : false
                                })
                            );
                        }
                    });
                });
 
                //### THE APP: place the XMLView somewhere into DOM ###
                sap.ui.xmlview({
                    viewContent : jQuery("#myXmlView").html()
                }).placeAt("content");
 
            });
        </script>
 
    </head>
 
    <body class="sapUiBody">
        <div id="content"></div>
    </body>
</html>

关于sapui5 - 通过 XMLView 绑定(bind)项目时正确使用过滤器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36794281/

文章推荐： amazon-web-services - EC2-classic 中的源端点的 AWS DMS 问题

文章推荐： r - fread (data.table) 锁定文件

文章推荐： r - ggplot2 geom_line() 特定值之间的箭头方向

javascript - 有没有办法更改 sapui 中的排序器图标？
我正在使用 sapui5 创建一个表。我想知道我是否可以将升序排序和降序排序的默认图标更改为我自己的图标？补充问题:有没有一种方法可以在标题中显示我的自定义图标而无需先点击它？最佳答案只需在 W
xml - 如何在 sapUI XML View 中迭代 JSONModel？
我如何在 SapUI5 中构建一个 XML View 来迭代 JSONModel 中的所有元素？到目前为止，我有一个 Controller : sap.ui.define([ "sap/ui

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

sapui5 - 通过 XMLView 绑定(bind)项目时正确使用过滤器