Web界面开发必看!Kendo UI for jQuery编辑功能指南第二弹

点击“了解更多”获取Kendo UI for jQuery最新试用版下载

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

某些Kendo UI窗口小部件提供了编辑功能，该功能通过使用Kendo UI MVVM绑定使用特定的编辑器元素或与模型绑定的表单来实现。

以下小部件支持编辑功能：

• Kendo UI Grid
• Kendo UI ListView
• Kendo UI TreeList
• Kendo UI Scheduler
• Kendo UI Gantt

常见情况

定义自定义编辑器模板

当默认编辑器表单无法满足您的业务需求时，请使用editable.template选项创建自定义编辑器表单，该选项可用于定义自定义编辑器表单。

注意：每个小部件仅使用一个编辑器表单进行创建和更新操作。

以下规则适用于编辑器模板：

• 该模板使用Kendo UI模板语法。
• 通过MVVM值绑定，将编辑器绑定到特定的模型字段。

定义默认模型值

默认情况下模型字段具有基于字段类型的预定义值，您也可以将字段定义为nullable。要定义特定的默认值，请使用

schema.model.fields.defaulValue选项。value绑定使用模型来设置编辑器值，编辑器的值将因模型值而丢失。
schema: {model: {id: "ProductID",fields: {ProductID: { editable: false, nullable: true },ProductName: { defaultValue: "Product Name 1" }}}}

引用特定的编辑器控件

您可以使用小部件的edit事件从编辑器表单访问特定的编辑器元素。

通过特定的编辑器更新模型

要通过更新相关的编辑器来修改model，请手动触发change事件。这样您可以将更改通知的value绑定，并相应地更新模型。

注意：Kendo UI小部件提供了trigger方法，必须使用该方法来触发change事件。

不使用MVVM绑定添加编辑器

注意：

• 要实现自定义编辑，请使用自定义编辑器模板。
• Kendo UI MVVM绑定不能再使用，而模型绑定应手动处理。

为避免定义用于编辑特定模型字段的自定义编辑器模板，请在创建表单后添加其他编辑器：

1. 连接小部件edit事件。
2. 在edit事件处理程序中手动添加编辑器。
3. 通过使用模型设置编辑器的值，该模型在edit事件处理程序的参数中可用。
4. 连接编辑器的change事件并相应地更新model。

编辑之前访问模型

连接小部件的edit事件，您将从传递的参数中获取模型。

function edit(e) {
var model = e.model;
}

注意：调度程序将传递e.event字段而不是一个model， 该事件是SchedulerEvent类的实例。

通过UID访问模型

每个模型都有唯一的标识符，它应用于包含编辑器表单的HTML元素，您可以通过data-uid HTML属性识别该元素。使用该uid值，通过使用getByUid方法从小部件的数据源获取模型。

识别新模型

要区分创建操作和更新操作，请使用Model.isNew（）方法。

故障排除

本节提供了在配置编辑功能时可能遇到的常见问题的解决方案。

编辑事件中的模型字段值不会更新

描述：常见的情况是在小部件的编辑事件中修改模型，如果model字段的初始（默认）值无效，将阻止该模型。 在这种情况下，附加的UI验证会阻止任何其他模型修改，直到从编辑器表单更新值为止。

原因：在模型更新期间发生的以下操作会导致此问题：

• 使用set方法更新模型字段。
• 该模型将获取新值，并将其与当前值进行比较，如果它们不同，则可以设置新值。
• UI验证已触发。 注意，它使用编辑器元素值执行验证检查。 但是，它是无效的，因此我们尝试设置的新值将被忽略。

解决方案：通过使用schema.model.fields.defaultValue选项定义一个有效的defaulValue。

Kendo UI R3 2019全新发布，最新动态请持续关注Telerik中文网！

https://www.kendouicn.com/