如何在Ui5 / fiori表中汇总JSONModel

编程问答 2022-10-16

问题描述

我正在编写一个简单的应用程序，旨在显示json文件的本地数据。 我该如何对一列中的值求和？

预期效果： enter image description here

以下是用于重新创建案例的文件

V_Root.view.xml 

    <mvc:View controllerName="Nawigacja.ZNavigation.controller.V_Root" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m">
        <App id="V_Main">
            <pages>
                <Page title="Root View">
                    <content></content>
                </Page>
            </pages>
        </App>
</mvc:View>

V_Source.view.xml 

<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="Nawigacja.ZNavigation.controller.V_Source"
    xmlns:html="http://www.w3.org/1999/xhtml">
    <App>
        <pages>
            <Page title="Soruce View">
                <content>
                    <VBox width="100%" direction="Column" id="__vbox0">
                        <items>
                            <Button text="Button 1" width="100px" id="__button2" press="GoToTarget_1"/>
                            <Button text="Button 2" width="100px" id="__button3" press="GoToTarget_2"/>
                        </items>
                    </VBox>
                </content>
            </Page>
        </pages>
    </App>
</mvc:View>

V_Target_1.view.xml 

<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="Nawigacja.ZNavigation.controller.V_Target_1"
    xmlns:html="http://www.w3.org/1999/xhtml">
    <App>
        <pages>
            <Page title="Target One" showNavButton="true" navButtonPress="GoOneScreenBack">
                <content>
                    <ScrollContainer vertical="true" focusable="true" height="95%">
                        <Table id="namiot" items="{path: '/namiot'}">
                            <columns>
                                <Column width="12rem">
                                    <Label text="Najem"/>
                                </Column>
                                <Column minScreenWidth="tablet" demandPopin="true">
                                    <Label text="Price"/>
                                </Column>
                                <Column width="12rem">
                                    <Label text="Total Cost"/>
                                    <footer>
                                        <Text text="Sum:"/>
                                    </footer>
                                </Column>
                            </columns>
                            <ColumnListItem>
                                <Text text="{ProductType}"></Text>
                                <Text text="{ProductPrice}"></Text>
                                <Text text="{ProductTotal}"></Text>
                            </ColumnListItem>
                        </Table>
                    </ScrollContainer>
                </content>
            </Page>
        </pages>
    </App>
</mvc:View>

V_Root.controller.js 

sap.ui.define([
    "sap/ui/core/mvc/Controller"
],function (Controller) {
    "use strict";

    return Controller.extend("Nawigacja.ZNavigation.controller.V_Root",{
        onInit: function () {

        }
    });
});

V_Source.controller.js 

sap.ui.define([
    "sap/ui/core/mvc/Controller"
],function (Controller) {
    "use strict";

    return Controller.extend("Nawigacja.ZNavigation.controller.V_Source",{

        /**
         * 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 Nawigacja.ZNavigation.view.V_Source
         */
        onInit: function () {

        },GoToTarget_1: function () {
            // Now Get the Router Info
            var oRouter = sap.ui.core.UIComponent.getRouterFor(this);

            // Tell the Router to Navigate To Route_Tar_1
            oRouter.navTo("Route_Tar_1",{});
        },GoToTarget_2: function () {
            // Now Get the Router Info
            var oRouter = sap.ui.core.UIComponent.getRouterFor(this);

            // Tell the Router to Navigate To Route_Tar_2
            oRouter.navTo("Route_Tar_2",{});
        }

        /**
         * Similar to onAfterRendering,but this hook is invoked before the controller's View is re-rendered
         * (NOT before the first rendering! onInit() is used for that one!).
         * @memberOf Nawigacja.ZNavigation.view.V_Source
         */
        //  onBeforeRendering: function() {
        //
        //  },/**
         * Called when the View has been rendered (so its HTML is part of the document). Post-rendering manipulations of the HTML could be done here.
         * This hook is the same one that SAPUI5 controls get after being rendered.
         * @memberOf Nawigacja.ZNavigation.view.V_Source
         */
        //  onAfterRendering: function() {
        //
        //  },/**
         * Called when the Controller is destroyed. Use this one to free resources and finalize activities.
         * @memberOf Nawigacja.ZNavigation.view.V_Source
         */
        //  onExit: function() {
        //
        //  }

    });

});

V_Target_1.controller.js 

sap.ui.define([
    "sap/ui/core/mvc/Controller","sap/ui/core/routing/History","Nawigacja/ZNavigation/formatter/Formatter"
],function (Controller,History,formatter) {
    "use strict";

    return Controller.extend("Nawigacja.ZNavigation.controller.V_Target_1",to bind event handlers and do other one-time initialization.
         * @memberOf Nawigacja.ZNavigation.view.V_Target_1
         */
        onInit: function () {
            
        var oTable = this.getView().byId("namiot");
        var oModel = new sap.ui.model.json.JSONModel();
        oModel.loadData("model/namiot.json");
        oTable.setModel(oModel);
        },GoOneScreenBack: function (Evt) {

            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("",true);
            }
        },formatter: formatter

        /**
         * Similar to onAfterRendering,but this hook is invoked before the controller's View is re-rendered
         * (NOT before the first rendering! onInit() is used for that one!).
         * @memberOf Nawigacja.ZNavigation.view.V_Target_1
         */
        //  onBeforeRendering: function() {
        //
        //  },/**
         * Called when the View has been rendered (so its HTML is part of the document). Post-rendering manipulations of the HTML could be done here.
         * This hook is the same one that SAPUI5 controls get after being rendered.
         * @memberOf Nawigacja.ZNavigation.view.V_Target_1
         */
        //  onAfterRendering: function() {
        //
        //  },/**
         * Called when the Controller is destroyed. Use this one to free resources and finalize activities.
         * @memberOf Nawigacja.ZNavigation.view.V_Target_1
         */
        //  onExit: function() {
        //
        //  }

    });

});

models.js 

sap.ui.define([
    "sap/ui/model/json/JSONModel","sap/ui/Device"
],function (JSONModel,Device) {
    "use strict";

    return {

        createDeviceModel: function () {
            var oModel = new JSONModel(Device);
            oModel.setDefaultBindingMode("OneWay");
            return oModel;
        }

    };
});

manifest.json 

{
    "_version": "1.12.0","sap.app": {
        "id": "Nawigacja.ZNavigation","type": "application","i18n": "i18n/i18n.properties","applicationVersion": {
            "version": "1.0.0"
        },"title": "{{appTitle}}","description": "{{appDescription}}","sourceTemplate": {
            "id": "ui5template.basicSAPUI5ApplicationProject","version": "1.40.12"
        }
    },"sap.ui": {
        "technology": "UI5","icons": {
            "icon": "","favIcon": "","phone": "","phone@2": "","tablet": "","tablet@2": ""
        },"deviceTypes": {
            "desktop": true,"tablet": true,"phone": true
        }
    },"sap.ui5": {
        "flexEnabled": false,"rootView": {
            "viewName": "Nawigacja.ZNavigation.view.V_Root","type": "XML","async": true,"id": "V_Root"
        },"dependencies": {
            "minUI5Version": "1.65.6","libs": {
                "sap.ui.layout": {},"sap.ui.core": {},"sap.m": {}
            }
        },"contentDensities": {
            "compact": true,"cozy": true
        },"models": {
            "i18n": {
                "type": "sap.ui.model.resource.ResourceModel","settings": {
                    "bundleName": "Nawigacja.ZNavigation.i18n.i18n"
                }
            }
        },"resources": {
            "css": [{
                "uri": "css/style.css"
            }]
        },"routing": {
            "config": {
                "routerClass": "sap.m.routing.Router","viewType": "XML","viewPath": "Nawigacja.ZNavigation.view","controlAggregation": "pages","controlId": "V_Main","clearControlAggregation": false,"viewLevel": 1
            },"routes": [{
                "name": "Route_Source","pattern": "","target": ["Target_Source"],"titleTarget": ""
            },{
                "name": "Route_Tar_1","pattern": "V_Target_1","titleTarget": "","greedy": false,"target": ["Target_1"]
            },{
                "name": "Route_Tar_2","pattern": "V_Target_2","target": ["Target_2"]
            }],"targets": {
                "Target_1": {
                    "viewType": "XML","transition": "slide","clearAggregation": true,"viewName": "V_Target_1","viewLevel": 2
                },"Target_2": {
                    "viewType": "XML","clearAggregation":"true","viewName": "V_Target_2","Target_Source": {
                    "viewType": "XML","viewName": "V_Source","viewLevel": 1
                }
            }
        }
    }
}

namiot.json 

{
    "namiot":[
    {
        "ProductName": "Product1","ProductType": "Type1","ProductPrice": "25","ProductTotal": "5000","Productadd": "","ProductaddPr":""
    },{
        "ProductName": "Product2","ProductType": "Type2","ProductaddPr":""
    }

    
    
    
    
]
}

解决方法

可能有x个选项可以实现这一目标。

您可以使用方法 attachUpdateFinished ，该方法将在更新Tablebinding时（表接收到项）被调用。然后，您可以汇总值并将其存储在JSONModel中，并将其绑定到 footertext 。当绑定（项目）更改时，总和将被更新。

oTable.attachUpdateFinished(function (oEvt) {
     var iSum = 0;
     var aItems = oEvt.getSource().getItems();
     for (var i = 0; i < aItems.length; i++) {
     var oItem = aItems[i].getBindingContext().getObject();
     iSum = iSum + parseFloat(oItem.ProductTotal);
     }
        //Do whatever you want with the iSum  
     });

这是一个如何实现的示例。 Code Sample

sapui5

相关问答

matplotlib报错：AttributeError: module 'backend_interagg' has no attribute 'FigureCanvas'. Did you mean: 'FigureCanvasAgg'?
使用本地python环境可以成功执行 import pandas as pd impor...
gitlab登录失败，报错：This challenge page was accidentally cached by an intermediary and is no longer available.
设置时间 控制面板
后端开发常见错误
错误1：Request method ‘DELETE‘ not supported 错误还原：...
docker常见错误
错误1：启动docker镜像时报错：Error response from daemon:...
idea常见错误
错误1：private field ‘xxx‘ is never assigned 按Alt...
pip安装依赖失败
报错如下，通过源不能下载，最后警告pip需升级版本 Requirem...