gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 09:23:46 30 4
gpt4 key购买 nike

使用 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/

    30 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com