如何从OData服务正确地将日期/时间添加到UI? [英] How to Add Date / Time from OData Service Correctly to UI?
问题描述
我正在创建一个演示页面，该页面显示UI5的一些直接功能.该页面包括两个主要页面:
I'm creating a little demo page that displays some straight forward functionality of UI5. This page consists of two main pages:
- 在第一页上，提供了可以创建，删除和更新的运营商列表.这些运营商的ID(
Carrid). - 如果单击某个承运商，他们将被转到第二页，在此页面上，表中显示了所选承运人的所有航班(带有有关航班的一些信息).
该表如下所示:
<Table id="detailTable" inset="false" class="sapUiResponsiveMargin">
<columns>
<Column>
<Text text="ID" />
</Column>
<Column>
<Text text="Flightnumber" />
</Column>
<Column>
<Text text="Starts in" />
</Column>
<Column>
<Text text="Departs at" />
</Column>
<Column>
<Text text="Lands in" />
</Column>
<Column>
<Text text="Lands at" />
</Column>
</columns>
</Table>
数据通过以下代码绑定到列:
The data is bound to the columns with this code:
// Get routing data and show only entrys with the matched primary key (Carrid)
_onRouteMatched: function(oEvent) {
// ...
var oArgs = oEvent.getParameter("arguments");
var oFlightTable = oView.byId("detailTable");
oFlightTable.bindAggregation("items", {
path: "/CarrierSet(" + "'" + oArgs.flightPath + "'" + ")/FlightSet",
template: new sap.m.ColumnListItem({
cells: [
new sap.m.Text({
text: "{Carrid}"
}),
new sap.m.Text({
text: "{Connid}"
}),
new sap.m.Text({
text: "{Cityfrom}"
}),
new sap.m.Text({
text: "{Deptime}"
}),
new sap.m.Text({
text: "{Cityto}"
}),
new sap.m.Text({
text: "{Arrtime}"
})
]
})
});
}
问题
如果可以不先处理就可以显示数据，则代码可以正常工作.但是字段{Deptime}和{Arrtime}具有类型 Edm.Time 我需要先对其进行转换，以便以人类可读的形式显示它.
我可以通过以下代码来实现这一点(我知道，这不是最有效的方法，但是我仍在学习中.因此，如果您有任何改进，请随时发布):
Problem
The code works fine if the data can be shown without manipulating it first. But the fields {Deptime} and {Arrtime} have the type Edm.Time which I need to convert first in order to display it in a human readable form.
I was able to achieve this with this bit of code (I know, not the most efficient way, but im still learning. So if you have any improvements, feel free to post them):
pageTable.addEventDelegate({
onAfterRendering: function() {
var mTable = this.getView("FilterBarSimple").byId("detailTable");
var mModel = mTable.getModel();
var aItems = mTable.getItems();
// ----- TIME CONVERSION ----
var arrayTime = [];
for (var iTime = 0; iTime < aItems.length; iTime++) {
var iAdded = mModel.getProperty("Deptime", aItems[iTime].getBindingContext());
arrayTime.push(iAdded);
}
var timeFormat = sap.ui.core.format.DateFormat.getTimeInstance({
pattern: "kk:mm:ss"
});
var tz = new Date(0).getTimezoneOffset() * 60 * 1000;
var arrayTimeClean = [];
$.each(arrayTime, function(ii, ee) {
var timeStr = timeFormat.format(new Date(ee.ms + tz));
arrayTimeClean.push(timeStr);
});
}
});
这将生成正确的输出:
This generates this output which is correct:
但是我无法再次将此操纵数据正确地绑定到表中.我已经尝试过使用OData.read()函数和其他一些非常棘手的方法，但是我从未成功过，并且在相当长的一段时间里我一直在解决这个问题.
But I'm not able to correctly bind this manipulated data into the table again. I've tried it with the OData.read() function and some other rather hacky approaches but I was never successful and I'm stuck with this problem for quite some time now.
如果有人有想法或建议，如果您让我知道，我将不胜感激.
If anyone has an idea or a suggestion, I'd be more than thankful if you let me know.
推荐答案
如果您只想以人类可读的形式显示时间(或日期)，则无需"hacky方法"或自定义格式程序. UI5附带了数据类型
There is no need for "hacky approaches" or custom formatters in case you simply want to display the time (or date) in a human readable form. UI5 comes with the concept data typesdoc which has the following advantages:
- 让UI5 格式， 解析，甚至验证为您带来的价值.
- 与
formatter相比，支持双向数据绑定. - 可以定义其他格式选项或输入约束.
- Let UI5 format, parse, and even validate the value for you.
- Supports two-way data binding in contrast to
formatter. - Additional format options or input constraints can be defined.
在我们的例子中，用于显示 Edm.Time 值的相应type是sap.ui.model.odata.type.Time.
In our case, the appropriate type for displaying the value of Edm.Time is sap.ui.model.odata.type.Time.api
来自 https://embed.plnkr.co/F3t6gI8TPUZwCOnA :
<Table items="{carrierFlights}"
xmlns:core="sap.ui.core"
core:require="{
'DateTimeType': 'sap/ui/model/odata/type/DateTime',
'TimeType': 'sap/ui/model/odata/type/Time'
}">
<columns>
<!-- ... -->
</columns>
<ColumnListItem>
<!-- ... -->
<Text text="{
path: 'fldate',
type: 'DateTimeType',
constraints: {
isDateOnly: true,
displayFormat: 'Date'
}
}" />
<Text text="{
path: 'departureTime',
type: 'TimeType',
formatOptions: { style: 'long' }
}" />
<!-- ... -->
</ColumnListItem>
</Table>
Note: About the core:require-syntax, see Require Modules in XML View and Fragment which is supported as of UI5 1.69. For lower versions, use the following syntax:
type: 'sap.ui.model.odata.type.(Date)Time'
结果
有关更多信息，包括如何在DateRangeSelection中绑定 DateTime 或 DateTimeOffset ，请查看文档主题
For more information, including how to bind DateTime or DateTimeOffset in DateRangeSelection, take a look at the documentation topic Date and Time Related Controls: Data Binding.
在属性绑定中使用OData类型之一:
Use one of the OData types in the property binding:
xmlns:core="sap.ui.core"
core:require="{ 'RequiredODataType': 'sap/ui/model/odata/type/<appropriateType>' }"
value="{
path: 'myODataModel>...',
type: 'RequiredODataType'
}"
有关可用OData类型的完整列表，请参见 API参考:sap.ui.model.odata.type .
检查服务$metadata文档中实体属性使用的类型.
For a complete list of available OData types, see API Reference: sap.ui.model.odata.type.
Check which type the entity property is using in the service $metadata document.
这篇关于如何从OData服务正确地将日期/时间添加到UI?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
