为SAPUI5计划日历构造外部JSON
为SAPUI5计划日历构造外部JSON
提问于 2016-07-06 07:08:06
在构建sapui5规划控制的外部JSON模型时，我们一直面临着问题。
计划日历示例SAPUi5模型已在controller.js文件中实现。
var oModel = new JSONModel();
oModel.setData({
startDate: new Date("2015", "11", "15", "8", "0"),
people: [{
pic: "sap-icon://employee",
name: "Max Mustermann",
role: "team member",
appointments: [{
start: new Date("2015", "11", "15", "10", "0"),
end: new Date("2015", "11", "15", "12", "0"),
title: "Team meeting",
info: "room 1",
type: "Type01",
pic: "sap-icon://sap-ui5",
tentative: false
}, {
start: new Date("2015", "11", "16", "0", "0"),
end: new Date("2015", "11", "16", "23", "59"),
title: "Vacation",
info: "out of office",
type: "Type04",
tentative: false
}],
headers: [{
start: new Date("2015", "11", "16", "0", "0"),
end: new Date("2015", "11", "16", "23", "59"),
title: "Private",
type: "Type05"
}, ]
}, {
pic: "https://sapui5.hana.ondemand.com/sdk/test-resources/sap/ui/demokit/explored/img/johnDoe.png",
name: "John Doe",
role: "team member",
appointments: [{
start: new Date("2015", "11", "15", "08", "30"),
end: new Date("2015", "11", "15", "09", "30"),
title: "Meeting",
type: "Type02",
tentative: false
}, {
start: new Date("2015", "11", "15", "10", "0"),
end: new Date("2015", "11", "15", "12", "0"),
title: "Team meeting",
info: "room 1",
type: "Type01",
pic: "sap-icon://sap-ui5",
tentative: false
}, {
start: new Date("2015", "11", "15", "11", "30"),
end: new Date("2015", "11", "15", "13", "30"),
title: "Lunch",
type: "Type03",
tentative: true
}],
headers: [{
start: new Date("2015", "11", "15", "8", "0"),
end: new Date("2015", "11", "15", "10", "0"),
title: "Reminder",
type: "Type06"
}, ]
}]
});计划日历输出屏幕
代码：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<title>PlanningCalendar</title>
<script id="sap-ui-bootstrap" type="text/javascript" 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>
<style type="text/css">
</style>
<!-- XML-based view definition -->
<script id="oView" type="sapui5/xmlview">
<mvc:View height="100%" controllerName="myView.Template" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns:unified="sap.ui.unified" xmlns="sap.m" class="viewPadding">
<App>
<pages>
<Page id="oPage" title="Appointments" class="marginBoxContent">
<content>
<VBox class="sapUiSmallMargin">
<PlanningCalendar id="PC1" startDate="{path: '/startDate'}" rows="{path: '/people'}" appointmentSelect="handleAppointmentSelect">
<toolbarContent>
<Title text="Title" titleStyle="H4" />
</toolbarContent>
<rows>
<PlanningCalendarRow icon="{pic}" title="{name}" text="{role}" appointments="{appointments}" intervalHeaders="{headers}">
<appointments>
<unified:CalendarAppointment startDate="{start}" endDate="{end}" icon="{pic}" title="{title}" text="{info}" type="{type}" tentative="{tentative}">
</unified:CalendarAppointment>
</appointments>
<intervalHeaders>
<unified:CalendarAppointment startDate="{start}" endDate="{end}" icon="{pic}" title="{title}" type="{type}">
</unified:CalendarAppointment>
</intervalHeaders>
</PlanningCalendarRow>
</rows>
</PlanningCalendar>
</VBox>
</content>
</Page>
</pages>
</App>
</mvc:View>
</script>
<script>
// Controller definition
sap.ui.define([
'jquery.sap.global',
'sap/ui/core/mvc/Controller',
'sap/ui/model/Filter',
'sap/ui/model/json/JSONModel'
], function(jQuery, Controller, Filter, JSONModel) {
"use strict";
var TableController = Controller.extend("myView.Template", {
onInit: function() {
// create model
var oModel = new JSONModel();
oModel.setData({
startDate: new Date("2015", "11", "15", "8", "0"),
people: [{
pic: "sap-icon://employee",
name: "Max Mustermann",
role: "team member",
appointments: [{
start: new Date("2015", "11", "15", "10", "0"),
end: new Date("2015", "11", "15", "12", "0"),
title: "Team meeting",
info: "room 1",
type: "Type01",
pic: "sap-icon://sap-ui5",
tentative: false
}, {
start: new Date("2015", "11", "16", "0", "0"),
end: new Date("2015", "11", "16", "23", "59"),
title: "Vacation",
info: "out of office",
type: "Type04",
tentative: false
}],
headers: [{
start: new Date("2015", "11", "16", "0", "0"),
end: new Date("2015", "11", "16", "23", "59"),
title: "Private",
type: "Type05"
}, ]
}, {
pic: "https://sapui5.hana.ondemand.com/sdk/test-resources/sap/ui/demokit/explored/img/johnDoe.png",
name: "John Doe",
role: "team member",
appointments: [{
start: new Date("2015", "11", "15", "08", "30"),
end: new Date("2015", "11", "15", "09", "30"),
title: "Meeting",
type: "Type02",
tentative: false
}, {
start: new Date("2015", "11", "15", "10", "0"),
end: new Date("2015", "11", "15", "12", "0"),
title: "Team meeting",
info: "room 1",
type: "Type01",
pic: "sap-icon://sap-ui5",
tentative: false
}, {
start: new Date("2015", "11", "15", "11", "30"),
end: new Date("2015", "11", "15", "13", "30"),
title: "Lunch",
type: "Type03",
tentative: true
}],
headers: [{
start: new Date("2015", "11", "15", "8", "0"),
end: new Date("2015", "11", "15", "10", "0"),
title: "Reminder",
type: "Type06"
}, ]
}]
});
this.getView().setModel(oModel);
var oStartDate = String(this.getView().getModel().getProperty("/startDate"));
this.getView().getModel().setProperty("/firstStartDate",oStartDate);
},
onAfterRendering: function() {
var oPC1 = this.getView().byId("PC1");
var oTable = oPC1.getAggregation("table");
var infoToolbar = oTable.getInfoToolbar();
var aContent = infoToolbar.getContent();
var that = this;
jQuery.each(aContent, function(iIndex, oField) {
if (oField.getMetadata().getName() === "sap.ui.unified.CalendarTimeInterval") {
var oCalendarHeader = oField.getAggregation("header");
oCalendarHeader.setEnabledPrevious(false);
oCalendarHeader.attachPressPrevious(function(){
var oCalendarHeader = oField.getAggregation("header");
var oStartDate = String(oCalendarHeader.getParent().getStartDate());
var oModelDate = that.getView().getModel().getProperty("/firstStartDate");
if(oStartDate == oModelDate){
var oCalendarHeader = oField.getAggregation("header");
oCalendarHeader.setEnabledPrevious(false);
}
});
}
});
},
handleAppointmentSelect: function(oEvent) {
var oAppointment = oEvent.getParameter("appointment");
if (oAppointment) {
alert("Appointment selected: " + oAppointment.getTitle());
} else {
var aAppointments = oEvent.getParameter("appointments");
var sValue = aAppointments.length + " Appointments selected";
alert(sValue);
}
}
});
return TableController;
});
// Instantiate the View and display
var oView = sap.ui.xmlview({
viewContent: jQuery('#oView').html()
});
oView.placeAt('content');
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
请您指导我在SAPui5中为这个计划日历构造外部json。
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-07-06 07:19:13
注意:您不能在
JSON文件中执行表达式的计算，因为它只用于将数据存储在属性值对中。
因此，以字符串格式获取您的日期，并且在视图中可以使用格式化程序以所需的格式转换它。
将您的JSON数据添加到名为data.json的文件中，然后将该文件的路径指定为JSONModel构造器的参数，这样就可以了。
假设您的文件位于util文件夹中，则声明将为
var oModel = new JSONModel("./util/data.json");更新：
以下列格式修改JSON文件中的所有日期：
"start": ["2015", "11", "15", "08", "30"]考虑到的代码是：
<unified:CalendarAppointment startDate="{path: 'start', formatter:'.dateFormatter}" >在控制器中用于代码格式化程序：
dateFormatter: function(s){
return new Date(s[0], s[1], s[2], s[3], s[4]);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38218101
复制相关文章
相似问题
腾讯云开发者
