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

Kendo UI for jQuery是创建现代Web应用程序的最完整UI库，全球化过程结合了组件消息的翻译（本地化）和使其适应特定的文化（国际化和从右到左的支持），本文将为大家介绍网格的全球化细节，欢迎下载最新版体验！

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时区显示日期而不管用户时区如何，请参考有关在客户端和服务器上设置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: "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 DropDownListoffsetMiliseconds = (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中文网！

来源：慧都