将json模型的特定数组的值绑定到sapui5中的控件
将json模型的特定数组的值绑定到sapui5中的控件
提问于 2018-03-02 22:01:02
我是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部分的内容，这是不是可以解决我的问题呢？如果有人有这样的例子那就太好了，所以我可以试着自己实现它。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-03-03 07:49:16
即使您拥有全局模型，您也可以在运行时创建模型并将其绑定到某些视图。
无论如何，要做求和，只需在你的层次中导航，并在最后使用格式化程序函数进行求和。
下面是一个示例：
使用聚合绑定
<!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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49070680
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号