Kendo UI for jQuery轻松实现网格全球化

AABBbaby

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对象表现出相同的默认操作，并且大多数用户希望看到其当前时区中的日期。

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

[HTML] 纯文本查看 复制代码

<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时区显示日期而不管用户时区如何，请参考有关在客户端和服务器上设置UTC时区的完整示例。

允许用户自定义时区

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

[HTML] 纯文本查看 复制代码

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

---

了解最新Kendo UI最新资讯，请关注Telerik中文网！