ui5 sap.m.table 使用 ODataModel 动态绑定答案

【问题标题】：ui5 sap.m.table dynamic binding using ODataModelui5 sap.m.table 使用 ODataModel 动态绑定
【发布时间】：2020-02-10 12:43:39
【问题描述】：

我在处理我的表格及其数据时遇到了麻烦，让我给你一些上下文信息，我使用的是 1.72.3 版本，我的应用程序是托管在 Nginx 中的独立应用程序，所有代理都已就位并正常工作很好。

我有一个类似于工作列表的视图（一个表的视图），我需要使用过滤器查询后端，但 JSONModel 不允许这样做，所以我的想法很简单

我在 JSONModel 中创建了一个名为“salesOrders”的属性
使用事件 attachPatternMatched 我使用 oDataModel 调用后端
我将属性“salesOrders”设置为 oDataModel 调用的结果
我将表绑定到属性

我放置了所有代码，但我在屏幕上的最佳结果是

这是我的表在视图中的定义。

<Table noDataText="Drop column list items here and columns in the area above" items="{salesOrderListView>/salesOrders}"
    id="tableSalesOrders" growingScrollToLoad="true" sticky="ColumnHeaders" growing="true">
    <items>
        <ColumnListItem type="Navigation" id="item0" press="onPressSalesOrder">
            <cells>
                <ObjectIdentifier xmlns="sap.m" title="{ path: 'Vbeln', formatter: '.formatter.numberNoZeros' }" titleActive="fasle" id="identifier0"/>
                <Link xmlns="sap.m" text="{Customer/Name1}" id="link0" press="onPressCustomer"/>
                <Link xmlns="sap.m" text="{Vendor/Ename}" id="link1" press="onPressVendor"/>
                <core:Icon src="sap-icon://flag" size="2em" id="icon0" color="{ path: 'Lsstk', formatter: '.formatter.flagStatusColorC' }"/>
                <core:Icon xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:core="sap.ui.core"
                    src="sap-icon://flag" size="2em" id="icon0_copy2" color="{ path: 'Cmgst', formatter: '.formatter.flagStatusColorCred' }"/>
                <core:Icon xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:core="sap.ui.core"
                    src="sap-icon://flag" size="2em" id="icon0_copy" color="{ path: 'Lfstk', formatter: '.formatter.flagStatusColor' }"/>
                <Text xmlns="sap.m" text="{Vdatu}" id="text1"/>
                <ObjectNumber xmlns="sap.m" number="{ path: 'Kwmeng', formatter: '.formatter.numberNoDecimals' }" unit="CJ" id="number0" textAlign="Center"/>
                <ObjectNumber xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="sap.m"
                    number="{ path: 'Kwmengdlvy', formatter: '.formatter.numberNoDecimals' }" unit="CJ" id="number0_copy2" textAlign="Center"/>
                <ObjectNumber xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="sap.m"
                    number="{ path: 'Kwmengdiff', formatter: '.formatter.numberNoDecimals' }" unit="CJ" id="number0_copy" textAlign="Center"/></cells>
        </ColumnListItem>
    </items>
    <columns>
        <Column id="column0">
            <header>
                <Label text="{i18n>vbelnLabel}" id="label0"/>
            </header>
        </Column>
        <Column id="column1" minScreenWidth="Large" demandPopin="true" popinDisplay="Inline">
            <header>
                <Label text="{i18n>customerName1Label}" id="label1"/>
            </header>
        </Column>
        <Column id="column2" minScreenWidth="Large" demandPopin="true" popinDisplay="Inline" popinHAlign="Left">
            <header>
                <Label text="{i18n>vendorEnameLabel}" id="label2"/>
            </header>
        </Column>
        <Column xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="sap.m" id="column2_copy6"
            demandPopin="true">
            <header>
                <Label text="Aprobación Comercial" id="label2_copy6" wrapping="true"/>
            </header>
        </Column>
        <Column xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="sap.m" id="column2_copy5"
            demandPopin="true">
            <header>
                <Label text="Aprobación Crediticia" id="label2_copy5" wrapping="true"/>
            </header>
        </Column>
        <Column xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="sap.m" id="column2_copy4"
            demandPopin="true">
            <header>
                <Label text="Expedición" id="label2_copy4"/>
            </header>
        </Column>
        <Column xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="sap.m" id="column2_copy2">
            <header>
                <Label text="{i18n>vdatuLabel}" id="label2_copy2" wrapping="true"/>
            </header>
        </Column>
        <Column xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="sap.m" id="column2_copy"
            minScreenWidth="Large" demandPopin="true" popinDisplay="Inline">
            <header>
                <Label text="{i18n>kwmengLabel}" id="label2_copy" wrapping="true"/>
            </header>
        </Column>
        <Column xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="sap.m" id="column2_copy7"
            demandPopin="true" minScreenWidth="Large" popinDisplay="Inline">
            <header>
                <Label text="{i18n>kwmengDlvyLabel}" id="label2_copy7" wrapping="true"/>
            </header>
        </Column>
        <Column xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="sap.m" id="column2_copy3">
            <header>
                <Label text="{i18n>kwmengDiffLabel}" id="label2_copy3" wrapping="true"/>
            </header>
        </Column>
    </columns>
    <headerToolbar>
        <Toolbar width="100%" id="toolbar1">
            <content>
                <Title id="SalesOrderListHeader" text="{salesOrderView>/salesOrderTableTitle}"/>
                <ToolbarSpacer/>
                <SearchField id="searchField" tooltip="{i18n>salesOrderSearchTooltip}" search="onSearch" width="auto"/>
            </content>
        </Toolbar>
    </headerToolbar>
</Table>

在我的控制器中我有这个

sap.ui.define([
    //  "sap/ui/core/mvc/Controller",
    "riders/polux/controller/BaseController",
    "sap/ui/model/json/JSONModel",
    "sap/ui/core/routing/History",
    "riders/polux/model/formatter"
], function (BaseController, JSONModel, History, formatter) {
    "use strict";
    return BaseController.extend("riders.polux.controller.SalesOrderList", {
        formatter: formatter,
        /**
         * Called when a controller is instantiated and its View controls (if available) are already created.
         * Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
         * @memberOf riders.polux.view.SalesOrderList
         */
        onInit: function () {
            var headerTitle, oViewModel, iOriginalBusyDelay, oTable = this.byId("tableSalesOrders");
            // Put down salesOrderList table's original value for busy indicator delay,
            // so it can be restored later on. Busy handling on the table is
            // taken care of by the table itself.
            iOriginalBusyDelay = oTable.getBusyIndicatorDelay();
            // Model used to manipulate control states
            oViewModel = new JSONModel({
                headerTitle: headerTitle,
                queryMode: "", //queryMode,
                tableBusyDelay: 0,
                salesOrders: null
            });
            this.getRouter().getRoute("SalesOrderList").attachPatternMatched(this._onObjectMatched, this);
            this.setModel(oViewModel, "salesOrderListView");
            // Make sure, busy indication is showing immediately so there is no
            // break after the busy indication for loading the view's meta data is
            // ended (see promise 'oWhenMetadataIsLoaded' in AppController)
            oTable.attachEventOnce("updateFinished", function () {
                // Restore original busy indicator delay for salesOrderList's table
                oViewModel.setProperty("/tableBusyDelay", iOriginalBusyDelay);
            });
            // Add the page to the flp routing history

        },
        _onObjectMatched: function (oEvent) {
            var oViewModel = this.getModel("salesOrderListView");
            var oTable = this.getView().byId("tableSalesOrders");
            var headerTitle, oResourceBundle = this.getResourceBundle();
            var queryMode = oEvent.getParameter("arguments").queryMode;
            switch (queryMode) {
            case "P":
                headerTitle = oResourceBundle.getText("salesOrderListViewTitleP");
                break;
            case "H":
                headerTitle = oResourceBundle.getText("salesOrderListViewTitleH");
                break;
            }
            oViewModel.setProperty("/headerTitle", headerTitle);
            this.addHistoryEntry({
                title: headerTitle,
                icon: "sap-icon://table-view",
                intent: "#PortalPollux-display&/SalesOrderList/" + queryMode
            }, true);
            var salesOrders = oViewModel.getProperty("/salesOrders");
            if (!salesOrders) {
                var odata = new sap.ui.model.odata.v2.ODataModel("/sap/opu/odata/sap/ZPOLLUX_SRV/");
                odata.read("/SalesOrderSet", {
                    success: function (oData, response) {
                        oViewModel.setData({
                            salesOrders: oData
                        }, true);
                    }
                });
            }
        },
        /*
         *@memberOf riders.polux.controller.SalesOrderList
         */
        onGoBack: function (oEvent) {
            //This code was generated by the layout editor.
            var oHistory = History.getInstance();
            var sPreviousHash = oHistory.getPreviousHash();
            // Go one screen back if you find a Hash
            if (sPreviousHash !== undefined) {
                window.history.go(-1);
            }
            // If you do not find a correct Hash, go to the Source screen using default router;
            else {
                var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
                oRouter.navTo("TargetLaunchpad", true);
            }
        },
        onPressCustomer: function (oEvent) {
            // The source is the list item that got pressed - custom
            this._showObjectCustomer(oEvent.getSource());
        },
        onPressVendor: function (oEvent) {
            // The source is the list item that got pressed - custom
            this._showObjectVendor(oEvent.getSource());
        },
        onPressSalesOrder: function (oEvent) {
            // The source is the list item that got pressed - custom
            this._showObjectSalesOrder(oEvent.getSource());
        },
        _showObjectCustomer: function (oItem) {
            this.getRouter().navTo("customer", {
                objectId: oItem.getBindingContext().getProperty("Kunnr")
            });
        },
        _showObjectVendor: function (oItem) {
            this.getRouter().navTo("vendor", {
                objectId: oItem.getBindingContext().getProperty("Pernr")
            });
        },
        _showObjectSalesOrder: function (oItem) {
            this.getRouter().navTo("RouteSalesOrder", {
                objectId: oItem.getBindingContext().getProperty("Vbeln")
            });
        }

    });
});

我为此奋斗了两天，我可以弄清楚我的错误在哪里。有人可以帮我吗？最好的问候，并在此先感谢您

【问题讨论】：

标签： binding sapui5

【解决方案1】：

根据我使用 JSONModel 作为解决方案的经验，会引入其他问题： - 您只过滤您获取的数据集。但是您可能不会全部加载它们 - 没有自动加载指示，加载时没有错误处理 - 对加载的数据集进行操作的复杂编码

我的解决方案是获取表格绑定并在控制器中应用过滤器。然而，这不能在 init() 函数中完成，因为没有设置表绑定。我通常使用导航事件，该事件可能携带来自 url 的查询参数，该参数也必须应用于过滤器。

onInit: function() {
   ...
   this.getRouter().getRoute("master").attachPatternMatched(this._onMasterMatched, this);
   ...
}

_onMasterMatched: function() {
   var oList = this.byId("myTable");
   oList.getBinding("items").filter(new Filter(...)); 
}

【讨论】：

【解决方案2】：

您将 items 属性绑定到路径 salesOrderListView>/salesOrders，因此您使用的是名为 salesOrderListView 的命名模型。同时，您的字段绑定路径看起来像 Customer/Name1，它实际上指向一个未命名的模型。在您的情况下，它必须类似于 salesOrderListView>Customer/Name1
当您调用 odata.read 时，您可以通过以下方式直接设置 JSON 模型数据：

oViewModel.setData({ 销售订单：oData }, true);

但是如果你在调试过程中查看 oData 变量，你会发现它很可能不是一个数组，它是一个具有结构的对象：

{ d: { results: [.....] } }

所以，我会尝试以这种方式将数据分配给模型：

oViewModel.setData({
   salesOrders: oData.d.results
}, true);

【讨论】：