jQuery UI组件库Kendo UI for jQuery数据管理使用教程：Grid的全球化

---

Kendo UI for jQuery R3 2020试用版下载

Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四个控件。Kendo UI for jQuery是创建现代Web应用程序的最完整UI库。

Grid的全球化

全球化过程结合了组件消息的翻译（本地化）和使其适应特定的文化（国际化和从右到左的支持）。

网格的全球化功能通过以下方式启用：

• 文化地区的国际化
• 邮件本地化
• 从右到左的支持

国际化

通过提供日期和数字的解析和格式化选项，国际化进程将特定的区域性格式应用于Web应用程序。

有关更多信息，请参阅：

网格提供用于在不同文化区域设置中呈现日期的选项。 最常见的情况是：

• 显示的日期取决于客户时区
• 在客户端和服务器上使用UTC
• 允许用户自定义时区

显示日期取决于客户时区

默认情况下，Grid从服务器收到日期对象后立即在客户端上创建日期对象，默认JavaScript日期对象基于当前时间自动添加时间偏移。之所以采用默认操作，是因为date对象表现出相同的默认操作，并且大多数用户希望看到其当前时区中的日期。

下面的示例演示如何根据当前时区使用偏移量创建其他时间。

<p></p>
<div id="grid"></div>
<script>
var newDate = new Date("2020-01-01T18:45");
$('p').html(newDate); 
$('#grid').kendoGrid({
dataSource:{
data:[{date: new Date("2020-01-01T18:45")}]
}
})
</script>

在客户端和服务器上使用UTC

要以UTC时区显示日期而不管用户时区如何，请参考有关。

允许用户自定义时区

下面的示例演示如何允许用户手动选择所需的时区。

<div id="example">
<p>Please choose a timezone: </p>
<input id="timeZone" style="width: 100%;" />
<hr />
<div id="grid"></div>
<script>

currentoffsetMiliseconds = (new Date()).getTimezoneOffset() * 60000;
offsetMiliseconds = 0;

// Modify the current offset if the server is not in UTC.
// currentoffsetMiliseconds = ((new Date()).getTimezoneOffset() - 120) * 60000;

$(document).ready(function() {

var data = [
{ text: "GMT+1", value: "1" },
{ text: "GMT+2", value: "2" },
{ text: "GMT-1", value: "-1" },
{ text: "GMT-2", value: "-2" },
{ text: "GMT", value: "0" }
];

$("#timeZone").kendoDropDownList({
dataTextField: "text",
dataValueField: "value",
dataSource: data,
index: 0,
change:onChange
});
var dataSource = new kendo.data.DataSource({
requestEnd:onRequestEnd,
batch: true,
transport: {
read: {
url: "//demos.telerik.com/kendo-ui/service/tasks",
dataType: "jsonp"
},
update: {
url: "//demos.telerik.com/kendo-ui/service/tasks/update",
dataType: "jsonp"
},
create: {
url: "//demos.telerik.com/kendo-ui/service/tasks/create",
dataType: "jsonp"
},
destroy: {
url: "//demos.telerik.com/kendo-ui/service/tasks/destroy",
dataType: "jsonp"
},
parameterMap: function(options, operation) {

var tizeZoneValue = $("#timeZone").data('kendoDropDownList').value();
offsetMiliseconds = (3600000 * tizeZoneValue);

// Remove the current timezone offset and add the offset choosen by the user in the DropDownList.
if ((operation == "update" || operation == "create") && options.models){
for(let i = 0; i < options.models.length; i++)
{
var startDate = new Date(options.models[i].Start);
startDate = new Date(startDate.getTime() - (currentoffsetMiliseconds + offsetMiliseconds));
options.models[i].Start = startDate;
}
}
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
schema: {
model: {
id: "taskId",
fields: {
taskId: { from: "TaskID", type: "number" },
title: { from: "Title", defaultValue: "No title", validation: { required: true } },
start: { type: "date", from: "Start" },
end: { type: "date", from: "End" },
startTimezone: { from: "StartTimezone" },
endTimezone: { from: "EndTimezone" },
description: { from: "Description" },
recurrenceId: { from: "RecurrenceID" },
recurrenceRule: { from: "RecurrenceRule" },
recurrenceException: { from: "RecurrenceException" },
ownerId: { from: "OwnerID", defaultValue: 1 },
isAllDay: { type: "boolean", from: "IsAllDay" }
}
}
}
});

$("#grid").kendoGrid({
dataSource: dataSource,
height: 430,
toolbar: ["create", "save", "cancel"],
editable:true,
pageable: true,
columns:[
{field:"taskId", title: "Tast ID"},
{field:"title", title: "Title"},
{field:"start", title: "Start Date", format: "{0:MM/dd/yyyy h:mm tt}",editor: customDateTimePickerEditor},

]
});
});

function onRequestEnd(e) {
if (e.response && e.response.length) {
var data = e.response;
if (this.group().length && e.type == "read") {
handleGroups(data);
} else { 
loopRecords(data);
}
}
}

function onChange(e){
$("#grid").data('kendoGrid').dataSource.read()
}

function handleGroups(groups) {
for (var i = 0; i < groups.length; i++) {
var gr = groups[i];
offsetDateFields(gr);
if (gr.HasSubgroups) {
handleGroups(gr.Items)
} else {
loopRecords(gr.Items);
}
}
}
function loopRecords(records) {
for (var i = 0; i < records.length; i++) {
var record = records[i];
offsetDateFields(record);
}
}

function offsetDateFields(obj) {
var tizeZoneValue = $("#timeZone").data('kendoDropDownList').value();
for (var name in obj) {
var prop = obj[name];
// The following replace method is needed because the dates are received from the server in the following format "/Date(1500469281437)/".
if (typeof (prop) === "string" && prop.indexOf("/Date(") == 0) {
obj[name] = prop.replace(/\d+/, function (n) {

// Calculate the offset based on the user selection in the DropDownList
offsetMiliseconds = (3600000 * tizeZoneValue);

// Remove the current timezone offset and add the offset choose by the user in the DropDownList.
return parseInt(n) + offsetMiliseconds + currentoffsetMiliseconds;
});
}
}
}

function customDateTimePickerEditor(container, options) {
$('<input required name="' + options.field + '"/>')
.appendTo(container)
.kendoDateTimePicker({});
}
</script>
</div>

---