jQuery UI組件庫Kendo UI for jQuery數(shù)據(jù)管理使用教程：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是創(chuàng)建現(xiàn)代Web應(yīng)用程序的最完整UI庫。

Grid的全球化

全球化過程結(jié)合了組件消息的翻譯（本地化）和使其適應(yīng)特定的文化（國際化和從右到左的支持）。

網(wǎng)格的全球化功能通過以下方式啟用：

• 文化地區(qū)的國際化
• 郵件本地化
• 從右到左的支持

國際化

通過提供日期和數(shù)字的解析和格式化選項，國際化進(jìn)程將特定的區(qū)域性格式應(yīng)用于Web應(yīng)用程序。

有關(guān)更多信息，請參閱：

網(wǎng)格提供用于在不同文化區(qū)域設(shè)置中呈現(xiàn)日期的選項。 最常見的情況是：

• 顯示的日期取決于客戶時區(qū)
• 在客戶端和服務(wù)器上使用UTC
• 允許用戶自定義時區(qū)

顯示日期取決于客戶時區(qū)

 默認(rèn)情況下，Grid從服務(wù)器收到日期對象后立即在客戶端上創(chuàng)建日期對象，默認(rèn)JavaScript日期對象基于當(dāng)前時間自動添加時間偏移。之所以采用默認(rèn)操作，是因為date對象表現(xiàn)出相同的默認(rèn)操作，并且大多數(shù)用戶希望看到其當(dāng)前時區(qū)中的日期。

下面的示例演示如何根據(jù)當(dāng)前時區(qū)使用偏移量創(chuàng)建其他時間。

<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>

在客戶端和服務(wù)器上使用UTC

要以UTC時區(qū)顯示日期而不管用戶時區(qū)如何，請參考有關(guān)。

允許用戶自定義時區(qū)

下面的示例演示如何允許用戶手動選擇所需的時區(qū)。

<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: "http://demos.telerik.com/kendo-ui/service/tasks",
dataType: "jsonp"
},
update: {
url: "http://demos.telerik.com/kendo-ui/service/tasks/update",
dataType: "jsonp"
},
create: {
url: "http://demos.telerik.com/kendo-ui/service/tasks/create",
dataType: "jsonp"
},
destroy: {
url: "http://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>

---