我是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部分的内容,这可能是一种解决我问题的方法吗?如果有人有这方面的例子会很棒,所以我可以尝试自己实现它。
答案 0 :(得分:0)
即使您拥有全局模型,也可以在运行时创建模型并将它们绑定到某些视图。
无论如何要做总和,只需通过你的关卡进行导航,然后使用格式化函数完成总和。
这是一个例子:
<!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>
<!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>