首页 > 解决方案 > 如何使用参数将 oData 绑定到表

问题描述

我有路径Northwind Customers('ANATR')/Orders 的 oData 我无法将其绑定到表客户订单

在这里,我/Customers('" + oArgs.customerId + "')/Orders喜欢在 oData 链接中

OrderList.controller.js

sap.ui.define([
    "sap/ui/demo/nav/controller/BaseController"
], function (BaseController) {
    "use strict";

    return BaseController.extend("sap.ui.demo.nav.controller.customer.OrderList", {

        onInit: function () {
            var oRouter = this.getRouter();
            oRouter.getRoute("customer").attachMatched(this._onRouteMatched, this);

        },

        _onRouteMatched : function (oEvent) {
            var oArgs, oView;

            oArgs = oEvent.getParameter("arguments");
            oView = this.getView();

            oView.bindElement({
                path : "/Customers('" + oArgs.customerId + "')/Orders",
                events : {
                    change: this._onBindingChange.bind(this),
                    dataRequested: function (oEvent) {
                        oView.setBusy(true);
                    },
                    dataReceived: function (oEvent) {
                        oView.setBusy(false);
                    }
                }
            });
        }
    });

});

在这里我将它链接到绑定数据{path : '/Orders'}如何插入{CustomerID}参数?

OrderList.view.xml

<mvc:View
    controllerName="sap.ui.demo.nav.controller.customer.OrderList"
    xmlns="sap.m"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns:f="sap.ui.layout.form"
    xmlns:core="sap.ui.core">
    <Page
        id="orderListPage"
        title="{i18n>OrderList}"
        showNavButton="true"
        navButtonPress=".onNavBack"
        class="sapUiResponsiveContentPadding">
        <Panel accessibleRole="Region">
            <headerToolbar>
                <Toolbar>
                    <Title text="{i18n>orderListTitle}"/>
                    <ToolbarSpacer/>
                    <SearchField
                        width="50%"
                        search=".onFilterOrders"/>
                </Toolbar>
            </headerToolbar>
            <Table
                id="orderList"
                class="sapUiResponsiveMargin"
                width="auto"
                items="{
                    path : '/Orders'
                }">
                <columns>
                    <Column
                        hAlign="End"
                        minScreenWidth="Small"
                        demandPopin="true"
                        width="4em">
                        <Text text="{i18n>columnOrderID}"/>
                    </Column>
                    <Column>
                        <Text text="{i18n>columnCustomerID}"/>
                    </Column>
                    <Column
                        minScreenWidth="Tablet"
                        demandPopin="false">
                        <Text text="{i18n>columnOrderDate}"/>
                    </Column>
                    <Column
                        hAlign="End">
                        <Text text="{i18n>columnPrice}"/>
                    </Column>
                </columns>
                <items>
                    <ColumnListItem
                        type="Navigation"
                        press=".onPress">
                        <cells>
                            <ObjectNumber number="{OrderID}" emphasized="false"/>
                            <ObjectIdentifier title="{CustomerID}"/>
                            <Text text="{OrderDate}"/>
                            <ObjectNumber
                                number="{
                                    parts: [{path: 'Freight'}],
                                    type: 'sap.ui.model.type.Currency',
                                    formatOptions: {
                                        showMeasure: false
                                    }
                                }"/>
                        </cells>
                    </ColumnListItem>
                </items>
            </Table>
        </Panel>
    </Page>
</mvc:View>

标签: odatasapui5northwind

解决方案


path : '/Orders'是一个绝对绑定(斜线开头)。这意味着 UI5 将尝试获取https://services.odata.org/V2/Northwind/Northwind.svc/Orders.

您还将您的视图绑定到一个事物列表。一般来说,这不是你想要的。

您想要的是将您的视图与单个客户实体绑定

oView.bindElement({
    path : "/Customers('" + oArgs.customerId + "')",
    events: { 
        ... 
    }
});

然后对订单使用相对绑定(开头没有斜线):

items="{
    path : 'Orders'
}"

推荐阅读