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

入门指南

支持编辑的Kendo UI小部件提供以下常用配置选项：

• editable—控制是否启用编辑。 例如默认情况下，Kendo UI Grid小部件中的编辑功能是禁用的。
• editable.template—允许您定义自定义编辑器模板。

注意：一些小部件提供了其他可编辑选项，有关更多详细信息，请参阅特定的窗口小部件API文档。 例如Grid小部件可以使用editable.destroy选项禁用删除功能。

支持编辑的Kendo UI小部件提供以下常见事件：

• edit—在显示编辑器表单之前触发，UI元素已绑定到模型。
• save—在保存模型之前触发，编辑表单仍处于打开状态。
• remove—在删除模型之前触发。

注意：

• 只有Scheduler和Gantt支持防止edit、save和remove事件。
• 这些小部件仅使用一种编辑器形式，它为create和update操作应用相同的编辑器模板。

要启用小部件的编辑功能：

1. 配置数据源的CRUD（创建，读取，更新，销毁）数据操作。
2. 使用schema.model选项定义模型字段。
3. 启用editable选项。

这些方法主要适用于支持编辑的其他Kendo UI小部件。

使用编辑器表单

您可以构建编辑器表单并将特定模型绑定到编辑器表单。

构建编辑器表单

Kendo UI窗口小部件基于schema.model结构（更具体地说是字段集合）动态构建编辑器表单。

注意：

数据类型	编辑	PARSER
string		Internal method. String conversion.
number	kendo.ui.NumericTextBox	kendo.parseFloat()
date	kendo.ui.DatePicker	kendo.parseDate()
boolean		Internal method. Boolean conversion.
object		Not processed. The value is passed as is.

 

• 在schema.model.id中定义数据项的id字段，这样可以确保正确添加、编辑和删除项目。
• 定义字段的数据类型来利用内置编辑器，可过滤的UI以及正确的排序、过滤和分组功能。

下表列出了可用的数据类型。

下面的示例演示如何通过DataSource schema.model声明字段定义。

schema: {
model: {
id: "id",
fields: {
id: {
editable: false,
// A defaultValue will not be assigned (default value is false).
nullable: true
},
name: {
type: "string",
validation: { required: true }
},
price: {
// A NumericTextBox editor will be initialized in edit mode.
type: "number",
// When a new model is created, this default will be used.
defaultValue: 42
},
discontinued:{
// A checkbox editor will be initialized in edit mode.
type: "boolean"
},
created: {
// A date picker editor will be initialized in edit mode.
type: "date"
},
supplier: {
type: "object" ,
defaultValue: { companyName: "Progress", companyId: 1 }
}
}
}
}

注意：Kendo UI Scheduler具有静态模型结构，并且仅遵循预定义的模型字段列表。 要编辑其他字段，请使用自定义编辑器模板。

自动生成的编辑器表单通过Kendo UI MVVM模式绑定到模型，该小部件还允许您使用自定义编辑器模板覆盖此表单。

创建表单后，小部件将执行以下操作：

1. 将编辑器字段绑定到模型。
2. 触发edit事件。
3. 显示编辑器表单。
4. 根据在编辑器中所做的更改来更新模型。
5. 当编辑器表单即将关闭时，小部件将触发save事件。 在此阶段，更改可以被接受或拒绝。

注意：编辑器表单是在触发编辑事件之前创建并绑定的，并且已经被填充。

将特定模型绑定到编辑器表单

触发edit事件后，小部件将获取相应的模型，并通过Kendo UI MVVM模式将生成的或自定义编辑器表单绑定到该模型。 通过使用值绑定来完成模型字段和表单编辑器之间的连接。

此连接遵守以下规则：

• 初始加载时，将使用模型值填充编辑器表单。
• 当相关编辑器触发change事件时，将更新模型，值绑定获取其值并填充模型字段。
• 使用ObservableObject API时，表单编辑器会更新。 如果要更新相应的UI编辑器，请使用set方法。 如果省略此API，则编辑器不会更改。