如何在 SAPUI5 中的表中显示修改后的 oData



我所做的是从oData服务中提取oData,然后我对此数据进行了计算,现在我想在表中显示修改后的数据。

用于修改 oData 并将其存储在 JSON 模型中的代码如下所示:

$.each(customers,function(i){
                sum = 0;
                $.each(payerName,function(j){
                    if (payerName[j] === customers[i] && year[j] === ySelect && mSelectKey === "a" ){
                        sum += amount[j];
                    }
                    else if (payerName[j] === customers[i] && year[j] === ySelect && month[j] === mSelect){
                        sum += amount[j];
                    }
                });
                total[i] = sum;
               });
               for (var i = 0; i < customers.length; i++){
            tableView.push({
                "customer": customers[i],
                "total": total[i],
                "currencyCode": currencyCode
            }); 
            }
        var tableObject = {"Data": tableView};
        tableModel = new sap.ui.model.json.JSONModel(tableObject);
        this.setModel(tableModel, "tableModel");

我现在想在表中显示这些数据。我尝试了以下方法,但似乎不起作用:

<semantic:content>
        <Table
            id="customersTable"
            width="auto"
            items="{tableModel>/Data}"
            noDataText="{worklistView>/tableNoDataText}"
            busyIndicatorDelay="{worklistView>/tableBusyDelay}"
            growing="true"
            growingScrollToLoad="false"
            updateFinished="onUpdateFinished">
            <columns>
                <Column id="nameColumn">
                    <Text text="{i18n>tableNameColumnTitle}" id="nameColumnTitle"/>
                </Column>
                <Column id="unitNumberColumn" hAlign="End">
                    <Text text="{i18n>tableUnitNumberColumnTitle}" id="unitNumberColumnTitle"/>
                </Column>
            </columns>
            <items>
                <ColumnListItem>
                    <cells>
                        <ObjectIdentifier
                            title="{tableModel>customer}"
                            />
                        <ObjectNumber
                            number="{
                                    parts: [
                                        {path: 'tableModel>total'},
                                        {path: 'tableModel>currencyCode'}
                                    ],
                                    type: 'sap.ui.model.type.Currency',
                                    formatOptions: {
                                        currencyCode: false
                                    }
                                }"
                        />
                    </cells>
                </ColumnListItem>
            </items>
        </Table>
    </semantic:content>

更新

我正在添加我的所有代码,希望有人能发现我的错误:工作列表视图.xml:

<mvc:View
controllerName="know.billingdocuments.KnowTable.controller.Worklist"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
xmlns:semantic="sap.f.semantic"
xmlns:footerbar="sap.ushell.ui.footerbar"
xmlns:core="sap.ui.core">
<semantic:SemanticPage
    id="page"
    headerPinnable="false"
    toggleHeaderOnTitleClick="false">
    <semantic:titleHeading>
        <Title text="{i18n>worklistTitle}" />
    </semantic:titleHeading>
    <semantic:content>
        <Table
            id="customersTable"
            width="auto"
            items="{model: 'tableModel', path: '/Data'}"
            noDataText="{worklistView>/tableNoDataText}"
            busyIndicatorDelay="{worklistView>/tableBusyDelay}"
            growing="true"
            growingScrollToLoad="false"
            updateFinished="onUpdateFinished">
            <headerToolbar>
                <Toolbar>
                    <Title id="tableHeader" text="{worklistView>/worklistTableTitle}"/>
                    <ToolbarSpacer />
                    <Label text = "{i18n>filterYear}:"/>
                    <Select id="YearSelect">
                        <items>
                            <core:Item text="2018"/> 
                            <core:Item  text="2017"/>
                            <core:Item text="2016"/>
                            <core:Item text="2015"/> 
                        </items>
                    </Select>
                    <Label text = "{i18n>filterMonth}:"/>
                    <Select id="MonthSelect">
                        <items>
                            <core:Item text="{i18n>filterWholeYear}" key = "a"/>
                            <core:Item text="{i18n>filterJanuary}"/>
                            <core:Item text="{i18n>filterFebruary}"/>
                            <core:Item text="{i18n>filterMarch}"/>
                            <core:Item text="{i18n>filterApril}"/>
                            <core:Item text="{i18n>filterMay}"/>
                            <core:Item text="{i18n>filterJune}"/>
                            <core:Item text="{i18n>filterJuly}"/>
                            <core:Item text="{i18n>filterAugust}"/>
                            <core:Item text="{i18n>filterSeptember}"/> 
                            <core:Item text="{i18n>filterOctober}"/>
                            <core:Item text="{i18n>filterNovember}"/>
                            <core:Item text="{i18n>filterDecember}"/> 
                        </items>
                    </Select>
                    <Button text="{i18n>filterDisplay}" press="onPress"/>
                    <ToolbarSpacer />
                    <SearchField
                        id="searchField"
                        tooltip="{i18n>worklistSearchTooltip}"
                        search="onSearch"
                        width="auto">
                    </SearchField>
                </Toolbar>
            </headerToolbar>
            <columns>
                <Column id="nameColumn">
                    <Text text="{i18n>tableNameColumnTitle}" id="nameColumnTitle"/>
                </Column>
                <Column id="unitNumberColumn" hAlign="End">
                    <Text text="{i18n>tableUnitNumberColumnTitle}" id="unitNumberColumnTitle"/>
                </Column>
            </columns>
            <items>
                <ColumnListItem>
                    <cells>
                        <ObjectIdentifier
                            title="{tableModel>customer}"
                            />
                        <ObjectNumber
                            number="{
                                    parts: [
                                        {path: 'tableModel>total'},
                                        {path: 'tableModel>currencyCode'}
                                    ],
                                    type: 'sap.ui.model.type.Currency',
                                    formatOptions: {
                                        currencyCode: false
                                    }
                                }"
                        />
                    </cells>
                </ColumnListItem>
            </items>
        </Table>
    </semantic:content>

</semantic:SemanticPage>

和Worklist.controller.js:

sap.ui.define([
    "know/billingdocuments/KnowTable/controller/BaseController",
    "sap/ui/model/json/JSONModel",
    "sap/ui/core/routing/History",
    "know/billingdocuments/KnowTable/model/formatter",
    "sap/ui/model/Filter",
    "sap/ui/model/FilterOperator"
], function (BaseController, JSONModel, History, formatter, Filter, FilterOperator) {
    "use strict";
    return BaseController.extend("know.billingdocuments.KnowTable.controller.Worklist", {
        formatter: formatter,
        /* =========================================================== */
        /* lifecycle methods                                           */
        /* =========================================================== */
        /**
         * Called when the worklist controller is instantiated.
         * @public
         */
        onInit : function () {
            var oViewModel,
                iOriginalBusyDelay,
                oTable = this.byId("customersTable");
            // Put down worklist 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();
            // keeps the search state
            this._aTableSearchState = [];
            // Model used to manipulate control states
            oViewModel = new JSONModel({
                worklistTableTitle : this.getResourceBundle().getText("worklistTableTitle"),
                tableNoDataText : this.getResourceBundle().getText("tableNoDataText"),
                tableBusyDelay : 0
            });
            this.setModel(oViewModel, "worklistView");
            // 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 worklist's table
                oViewModel.setProperty("/tableBusyDelay", iOriginalBusyDelay);
            });
            var oModel = new sap.ui.model.odata.v2.ODataModel("/Demo21/sap/opu/odata/sap/CB_BILLING_DOCUMENT_SRV/");

            var tableView = [];
            var tableModel;
            var customers = [];
            var payerName = [];
            var netValue = [];
            var date = [];
            var currencyCode = "USD";
            var amount = [];
            var year = [];
            var month = [];
            var monthNumber = [];
            var sum;
            var total = [];
            sap.ui.getCore().setModel(oModel);
            oModel.read("/Customers", {
               async: false,
               success: function (oEvent) {
               $.each(oEvent.results, function (i, item) {
               customers.push(
               item.CustomerName
               );
               });
              }
            });
            oModel.read("/BillingDocuments", {
               async: false,
               success: function (oEvent) {
               $.each(oEvent.results, function (i, item) {
               payerName.push(
               item.PayerName
               );
               });
               $.each(oEvent.results, function (i, item) {
               netValue.push(
               item.NetValue
               );
               });
               $.each(oEvent.results, function (i, item) {
               date.push(
               item.BillingDocumentDate
               );
               });
               $.each(netValue,function(i){
                amount[i] = parseInt(netValue[i],10);
               });
               $.each(date,function(i){
                var now = date[i];
                year[i] = now.getFullYear();
               });
                $.each(date,function(i){
                var now = date[i];
                monthNumber[i] = now.getMonth();
               });
               $.each(monthNumber,function(i){
                switch (monthNumber[i]) {
                    case 0 :
                    month[i] = "January";
                    break;
                    case 1 :
                    month[i] = "February";
                    break;
                    case 2 :
                    month[i] = "March";
                    break;
                    case 3 :
                    month[i] = "April";
                    break;
                    case 4 :
                    month[i] = "May";
                    break;
                    case 5 :
                    month[i] = "June";
                    break;
                    case 6 :
                    month[i] = "July";
                    break;
                    case 7 :
                    month[i] = "August";
                    break;
                    case 8 :
                    month[i] = "September";
                    break;
                    case 9 :
                    month[i] = "October";
                    break;
                    case 10 :
                    month[i] = "November";
                    break;
                    case 11 :
                    month[i] = "December";
                    break;
                } 
               });
               $.each(customers,function(i){
                sum = 0;
                $.each(payerName,function(j){
                    if (payerName[j] === customers[i]){
                        sum += amount[j];
                    }
                                        });
                total[i] = sum;
               });
               for (var i = 0; i < customers.length; i++){
            tableView.push({
                "customer": customers[i],
                "total": total[i],
                "currencyCode": currencyCode
            }); 
            }

              }
            });
        var tableObject = {"Data": tableView};
        tableModel = new sap.ui.model.json.JSONModel(tableObject);
        this.setModel(tableModel, "tableModel");
        console.log(tableObject);
        console.log(tableModel);
        },
        /* =========================================================== */
        /* event handlers                                              */
        /* =========================================================== */
        /**
         * Triggered by the table's 'updateFinished' event: after new table
         * data is available, this handler method updates the table counter.
         * This should only happen if the update was successful, which is
         * why this handler is attached to 'updateFinished' and not to the
         * table's list binding's 'dataReceived' method.
         * @param {sap.ui.base.Event} oEvent the update finished event
         * @public
         */
        onUpdateFinished : function (oEvent) {
            // update the worklist's object counter after the table update
            var sTitle,
                oTable = oEvent.getSource(),
                iTotalItems = oEvent.getParameter("total");
            // only update the counter if the length is final and
            // the table is not empty
            if (iTotalItems && oTable.getBinding("items").isLengthFinal()) {
                sTitle = this.getResourceBundle().getText("worklistTableTitleCount", [iTotalItems]);
            } else {
                sTitle = this.getResourceBundle().getText("worklistTableTitle");
            }
            this.getModel("worklistView").setProperty("/worklistTableTitle", sTitle);
        },
        /**
         * Event handler when a table item gets pressed
         * @param {sap.ui.base.Event} oEvent the table selectionChange event
         * @public
         */
        onPress : function () {
            // The source is the list item that got pressed
            var oModel = new sap.ui.model.odata.v2.ODataModel("/Demo21/sap/opu/odata/sap/CB_BILLING_DOCUMENT_SRV/");
            var ySelect = parseInt(this.getView().byId("YearSelect").getSelectedItem().getText(),10);
            var mSelect = this.getView().byId("MonthSelect").getSelectedItem().getText();
            var mSelectKey = this.getView().byId("MonthSelect").getSelectedKey();
            var tableView = [];
            var tableModel;
            var customers = [];
            var payerName = [];
            var netValue = [];
            var date = [];
            var currencyCode = "USD";
            var amount = [];
            var year = [];
            var month = [];
            var monthNumber = [];
            var sum;
            var total = [];
            sap.ui.getCore().setModel(oModel);
            oModel.read("/Customers", {
               async: false,
               success: function (oEvent) {
               $.each(oEvent.results, function (i, item) {
               customers.push(
               item.CustomerName
               );
               });
              }
            });
            oModel.read("/BillingDocuments", {
               async: false,
               success: function (oEvent) {
               $.each(oEvent.results, function (i, item) {
               payerName.push(
               item.PayerName
               );
               });
               $.each(oEvent.results, function (i, item) {
               netValue.push(
               item.NetValue
               );
               });
               $.each(oEvent.results, function (i, item) {
               date.push(
               item.BillingDocumentDate
               );
               });
               $.each(netValue,function(i){
                amount[i] = parseInt(netValue[i],10);
               });
               $.each(date,function(i){
                var now = date[i];
                year[i] = now.getFullYear();
               });
                $.each(date,function(i){
                var now = date[i];
                monthNumber[i] = now.getMonth();
               });
               $.each(monthNumber,function(i){
                switch (monthNumber[i]) {
                    case 0 :
                    month[i] = "January";
                    break;
                    case 1 :
                    month[i] = "February";
                    break;
                    case 2 :
                    month[i] = "March";
                    break;
                    case 3 :
                    month[i] = "April";
                    break;
                    case 4 :
                    month[i] = "May";
                    break;
                    case 5 :
                    month[i] = "June";
                    break;
                    case 6 :
                    month[i] = "July";
                    break;
                    case 7 :
                    month[i] = "August";
                    break;
                    case 8 :
                    month[i] = "September";
                    break;
                    case 9 :
                    month[i] = "October";
                    break;
                    case 10 :
                    month[i] = "November";
                    break;
                    case 11 :
                    month[i] = "December";
                    break;
                } 
               });
               $.each(customers,function(i){
                sum = 0;
                $.each(payerName,function(j){
                    if (payerName[j] === customers[i] && year[j] === ySelect && mSelectKey === "a" ){
                        sum += amount[j];
                    }
                    else if (payerName[j] === customers[i] && year[j] === ySelect && month[j] === mSelect){
                        sum += amount[j];
                    }
                });
                total[i] = sum;
               });
               for (var i = 0; i < customers.length; i++){
            tableView.push({
                "customer": customers[i],
                "total": total[i],
                "currencyCode": currencyCode
            }); 
            }

              }
            });
        var tableObject = {"Data": tableView};
        tableModel = new sap.ui.model.json.JSONModel(tableObject);
        this.setModel(tableModel, "tableModel");
        console.log(tableObject);
        console.log(tableModel);

        },




        onSearch : function (oEvent) {
            if (oEvent.getParameters().refreshButtonPressed) {
                // Search field's 'refresh' button has been pressed.
                // This is visible if you select any master list item.
                // In this case no new search is triggered, we only
                // refresh the list binding.
                this.onRefresh();
            } else {
                var aTableSearchState = [];
                var sQuery = oEvent.getParameter("query");
                if (sQuery && sQuery.length > 0) {
                    aTableSearchState = [new Filter("PayerName", FilterOperator.Contains, sQuery)];
                }
                this._applySearch(aTableSearchState);
            }
        },
        /**
         * Event handler for refresh event. Keeps filter, sort
         * and group settings and refreshes the list binding.
         * @public
         */
        onRefresh : function () {
            var oTable = this.byId("table");
            oTable.getBinding("items").refresh();
        },
        /* =========================================================== */
        /* internal methods                                            */
        /* =========================================================== */
        /**
         * Shows the selected item on the object page
         * On phones a additional history entry is created
         * @param {sap.m.ObjectListItem} oItem selected Item
         * @private
         */
        _showObject : function (oItem) {
            this.getRouter().navTo("object", {
                objectId: oItem.getBindingContext().getProperty("BillingDocument")
            });
        },
        /**
         * Internal helper method to apply both filter and search state together on the list binding
         * @param {sap.ui.model.Filter[]} aTableSearchState An array of filters for the search
         * @private
         */
        _applySearch: function(aTableSearchState) {
            var oTable = this.byId("table"),
                oViewModel = this.getModel("worklistView");
            oTable.getBinding("items").filter(aTableSearchState, "Application");
            // changes the noDataText of the list in case there are no filter results
            if (aTableSearchState.length !== 0) {
                oViewModel.setProperty("/tableNoDataText", this.getResourceBundle().getText("worklistNoDataWithSearchText"));
            }
        }
    });
}

(;

更新 2.其他数据。

当我在 setModel 之前放置一个断点时:断点

以及下一个命令中记录在控制台中的内容:安慰

项绑定需要指定模型。刚刚测试了这个,它对我有用。

<mvc:View
    controllerName="sap.m.sample.Table.Table"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns:core="sap.ui.core"
    xmlns="sap.m">
    <Table
            id="customersTable"
            width="auto"
            items="{ model: 'tableModel', path: '/Data' }"
            noDataText="No Data"
            growing="true"
            growingScrollToLoad="false">
            <columns>
                <Column id="nameColumn">
                    <Text text="Column Title" id="nameColumnTitle"/>
                </Column>
                <Column id="unitNumberColumn" hAlign="End">
                    <Text text="Unit Number" id="unitNumberColumnTitle"/>
                </Column>
            </columns>
            <items>
                <ColumnListItem>
                    <cells>
                        <ObjectIdentifier
                            title="{tableModel>customer}"
                            />
                        <ObjectNumber
                            number="{
                                    parts: [
                                        {path: 'tableModel>total'},
                                        {path: 'tableModel>currencyCode'}
                                    ],
                                    type: 'sap.ui.model.type.Currency',
                                    formatOptions: {
                                        currencyCode: false
                                    }
                                }"
                        />
                    </cells>
                </ColumnListItem>
            </items>
        </Table>
</mvc:View>

最新更新