将json模型的特定数组的值绑定到sapui5中的控件

问题描述 投票:0回答:1

我是SAPUI5的新手,目前我正在努力使用json模型。

让我们假设我有以下.json文件:

{
"Region": [{
    "Region": "MEA",
    "Year": [{
        "Year": 2016,
        "Monat": [{
            "Monat": "Januar",
            "AE": 5,
            "UE": 1
        }, {
            "Monat": "Februar",
            "AE": 10,
            "UE": 2
        }, {
            "Monat": "März",
            "AE": 15,
            "UE": 3
        }]
    }, {
        "Year": 2017,
        "Monat": [{
            "Monat": "Januar",
            "AE": 20,
            "UE": 4
        }, {
            "Monat": "Februar",
            "AE": 25,
            "UE": 5
        }, {
            "Monat": "März",
            "AE": 30,
            "UE": 6
        }]
    }]
}, {
    "Region": "Amercias",
    "Year": [{
        "Year": 2016,
        "Monat": [{
            "Monat": "Januar",
            "AE": 5,
            "UE": 1
        }, {
            "Monat": "Februar",
            "AE": 10,
            "UE": 2
        }, {
            "Monat": "März",
            "AE": 15,
            "UE": 3
        }]
    }, {
        "Year": 2017,
        "Monat": [{
            "Monat": "Januar",
            "AE": 20,
            "UE": 4
        }, {
            "Monat": "Februar",
            "AE": 25,
            "UE": 5
        }, {
            "Monat": "März",
            "AE": 30,
            "UE": 6
        }]
    }]
}]

}

我已经在manifest.json中定义了模型以全局访问它(如果我已经正确地理解了这种方式)。

我想要实现的是以下内容:我想通过构建所有月份的密钥“AE”的总和来为2016年的MEA值建立总和区域。这个总和应该最终显示在瓷砖上。我能够在平面层次结构中做到这一点,但由于我在这里使用2个节点(2016,2017)和父节点区域,我不太确定如何导航特定年份。

我在文档和这个平台上阅读了关于getproperty部分的内容,这可能是解决我问题的方法吗?如果有人有这方面的例子会很棒,所以我可以尝试自己实现它。

json sapui5
1个回答
0
投票

即使您拥有全局模型,也可以在运行时创建模型并将它们绑定到某些视图。

无论如何要做总和,只需浏览你的关卡并使用格式化程序功能在最后完成总和。

这是一个例子:

With Aggregation binding

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv='X-UA-Compatible' content='IE=edge'>
		<meta charset="utf-8">

		<title>MVC with XmlView</title>

		<!-- Load UI5, select "blue crystal" theme and the "sap.m" control library -->
		<script id='sap-ui-bootstrap'
				src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js'
			data-sap-ui-theme='sap_bluecrystal'
			data-sap-ui-libs='sap.m'
			data-sap-ui-xx-bindingSyntax='complex'></script>

		<script id="view1" type="sapui5/xmlview">
		    <mvc:View
				controllerName="my.own.controller"
				xmlns:l="sap.ui.layout"
				xmlns:core="sap.ui.core"
				xmlns:mvc="sap.ui.core.mvc"
				xmlns:f="sap.ui.layout.form"
				xmlns="sap.m">
				  <VBox items="{/Region}">
				    <Panel headerText="Region: {Region}" content="{Year}">
      				<GenericTile class="sapUiTinyMarginBegin sapUiTinyMarginTop tileLayout" header="{Year} Profit" press="press">
            		<TileContent unit="Unit">
            			<NumericContent value="{path: 'Monat', formatter: '.mySumFormatter'}" valueColor="Critical" indicator="Up" />
            		</TileContent>
            	</GenericTile>
          	</Panel>
        	</VBox>
			</mvc:View>
	</script>


		<script>
			// define a new (simple) Controller type
			sap.ui.controller("my.own.controller", {
			  mySumFormatter: function(aMonat){
			    var sum = 0;
			    for(var i=0; i<aMonat.length; i++){
			      console.log("ssss")
			      sum += aMonat[i].AE
			    }
			    return sum;
			  }
			});

			// instantiate the View
			var myView = sap.ui.xmlview({viewContent:jQuery('#view1').html()}); // accessing the HTML inside the script tag above

			// create some dummy JSON data
			var data = {
          "Region": [{
              "Region": "MEA",
              "Year": [{
                  "Year": 2016,
                  "Monat": [{
                      "Monat": "Januar",
                      "AE": 5,
                      "UE": 1
                  }, {
                      "Monat": "Februar",
                      "AE": 10,
                      "UE": 2
                  }, {
                      "Monat": "März",
                      "AE": 15,
                      "UE": 3
                  }]
              }, {
                  "Year": 2017,
                  "Monat": [{
                      "Monat": "Januar",
                      "AE": 20,
                      "UE": 4
                  }, {
                      "Monat": "Februar",
                      "AE": 25,
                      "UE": 5
                  }, {
                      "Monat": "März",
                      "AE": 30,
                      "UE": 6
                  }]
              }]
          }, {
              "Region": "Amercias",
              "Year": [{
                  "Year": 2016,
                  "Monat": [{
                      "Monat": "Januar",
                      "AE": 5,
                      "UE": 1
                  }, {
                      "Monat": "Februar",
                      "AE": 10,
                      "UE": 2
                  }, {
                      "Monat": "März",
                      "AE": 15,
                      "UE": 3
                  }]
              }, {
                  "Year": 2017,
                  "Monat": [{
                      "Monat": "Januar",
                      "AE": 20,
                      "UE": 4
                  }, {
                      "Monat": "Februar",
                      "AE": 25,
                      "UE": 5
                  }, {
                      "Monat": "März",
                      "AE": 30,
                      "UE": 6
                  }]
              }]
          }]
				};
			
			// create a Model and assign it to the View
			var oModel = new sap.ui.model.json.JSONModel();
			oModel.setData(data);
			myView.setModel(oModel);
			
			
			// put the View onto the screen
			myView.placeAt('content');

		</script>
	
	</head>
	<body id='content' class='sapUiBody'>
	</body>
</html>

EDIT: Model Node without aggregation binding + Element binding on click

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv='X-UA-Compatible' content='IE=edge'>
		<meta charset="utf-8">

		<title>MVC with XmlView</title>

		<!-- Load UI5, select "blue crystal" theme and the "sap.m" control library -->
		<script id='sap-ui-bootstrap'
				src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js'
			data-sap-ui-theme='sap_bluecrystal'
			data-sap-ui-libs='sap.m'
			data-sap-ui-xx-bindingSyntax='complex'></script>

		<script id="view1" type="sapui5/xmlview">
		    <mvc:View
				controllerName="my.own.controller"
				xmlns:l="sap.ui.layout"
				xmlns:core="sap.ui.core"
				xmlns:mvc="sap.ui.core.mvc"
				xmlns:f="sap.ui.layout.form"
				xmlns="sap.m">
				  <GenericTile class="sapUiTinyMarginBegin sapUiTinyMarginTop tileLayout" header="{/Region/0/Region} {/Region/0/Year/0/Year} Profit">
        		<TileContent unit="Unit">
        			<NumericContent value="{path: '/Region/0/Year/0/Monat', formatter: '.mySumFormatter'}" valueColor="Critical" indicator="Up" />
        		</TileContent>
        	</GenericTile>
				  <l:Grid spanLayout="XL6 L6 M6 S6">
  				  <VBox items="{/Region}">
    				  <List headerText="{Region}" items="{Year}" mode="SingleSelectMaster" selectionChange="onItemSelected">
    				    <StandardListItem title="{Year}"></StandardListItem>
    				  </List>
  				  </VBox>
				    <Panel id="myPanelForSelection" headerText="Selected Region/Year">
      				<GenericTile class="sapUiTinyMarginBegin sapUiTinyMarginTop tileLayout" header="{Year} Profit">
            		<TileContent unit="Unit">
            			<NumericContent value="{path: 'Monat', formatter: '.mySumFormatter'}" valueColor="Critical" indicator="Up" />
            		</TileContent>
            	</GenericTile>
          	</Panel>
        	</l:Grid>
			</mvc:View>
	</script>


		<script>
			// define a new (simple) Controller type
			sap.ui.controller("my.own.controller", {
			  onItemSelected: function(oEvent){
			    var sPath = oEvent.getParameter("listItem").getBindingContext().getPath();
			    this.getView().byId("myPanelForSelection").bindElement(sPath)
			  },
			  
			  mySumFormatter: function(aMonat){
			    if(aMonat){
  			    var sum = 0;
  			    for(var i=0; i<aMonat.length; i++){
  			      console.log("ssss")
  			      sum += aMonat[i].AE
  			    }
  			    return sum;
  			  }
			  }
			});

			// instantiate the View
			var myView = sap.ui.xmlview({viewContent:jQuery('#view1').html()}); // accessing the HTML inside the script tag above

			// create some dummy JSON data
			var data = {
          "Region": [{
              "Region": "MEA",
              "Year": [{
                  "Year": 2016,
                  "Monat": [{
                      "Monat": "Januar",
                      "AE": 5,
                      "UE": 1
                  }, {
                      "Monat": "Februar",
                      "AE": 10,
                      "UE": 2
                  }, {
                      "Monat": "März",
                      "AE": 15,
                      "UE": 3
                  }]
              }, {
                  "Year": 2017,
                  "Monat": [{
                      "Monat": "Januar",
                      "AE": 20,
                      "UE": 4
                  }, {
                      "Monat": "Februar",
                      "AE": 25,
                      "UE": 5
                  }, {
                      "Monat": "März",
                      "AE": 30,
                      "UE": 6
                  }]
              }]
          }, {
              "Region": "Amercias",
              "Year": [{
                  "Year": 2016,
                  "Monat": [{
                      "Monat": "Januar",
                      "AE": 5,
                      "UE": 1
                  }, {
                      "Monat": "Februar",
                      "AE": 10,
                      "UE": 2
                  }, {
                      "Monat": "März",
                      "AE": 15,
                      "UE": 3
                  }]
              }, {
                  "Year": 2017,
                  "Monat": [{
                      "Monat": "Januar",
                      "AE": 20,
                      "UE": 4
                  }, {
                      "Monat": "Februar",
                      "AE": 25,
                      "UE": 5
                  }, {
                      "Monat": "März",
                      "AE": 30,
                      "UE": 6
                  }]
              }]
          }]
				};
			
			// create a Model and assign it to the View
			var oModel = new sap.ui.model.json.JSONModel();
			oModel.setData(data);
			myView.setModel(oModel);
			
			
			// put the View onto the screen
			myView.placeAt('content');

		</script>
	
	</head>
	<body id='content' class='sapUiBody'>
	</body>
</html>
© www.soinside.com 2019 - 2024. All rights reserved.