Kendo UI for jQuery使用教程：编辑功能（一）

Kendo UI目前最新提供KendoUI for jQuery、KendoUI for Angular、KendoUI Support for React和KendoUI 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结构（更具体地说是字段集合）动态构建编辑器表单。

注意：

• 在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，则编辑器不会更改。

公司名称：北京哲想软件有限公司

北京哲想软件官方网站：www.cogitosoft.com

北京哲想软件微信公众平台账号：cogitosoftware

北京哲想软件微博：哲想软件

北京哲想软件邮箱：[email protected]

销售（俞先生）联系方式：+86（010）68421378

微信：18610247936 QQ：368531638