Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四個(gè)控件。Kendo UI for jQuery是創(chuàng)建現(xiàn)代Web應(yīng)用程序的完整UI庫。

某些Kendo UI窗口小部件提供了編輯功能，該功能通過使用Kendo UI MVVM綁定使用特定的編輯器元素或與模型綁定的表單來實(shí)現(xiàn)。

以下小部件支持編輯功能：

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

入門指南

支持編輯的Kendo UI小部件提供以下常用配置選項(xiàng)：

• editable—控制是否啟用編輯。 例如默認(rèn)情況下，Kendo UI Grid小部件中的編輯功能是禁用的。
• editable.template—允許您定義自定義編輯器模板。

注意：一些小部件提供了其他可編輯選項(xiàng)，有關(guān)更多詳細(xì)信息，請參閱特定的窗口小部件API文檔。 例如Grid小部件可以使用editable.destroy選項(xiàng)禁用刪除功能。

支持編輯的Kendo UI小部件提供以下常見事件：

• edit—在顯示編輯器表單之前觸發(fā)，UI元素已綁定到模型。
• save—在保存模型之前觸發(fā)，編輯表單仍處于打開狀態(tài)。
• remove—在刪除模型之前觸發(fā)。

注意：

• 只有Scheduler和Gantt支持防止edit、save和remove事件。
• 這些小部件僅使用一種編輯器形式，它為create和update操作應(yīng)用相同的編輯器模板。

要啟用小部件的編輯功能：

1. 配置數(shù)據(jù)源的CRUD（創(chuàng)建，讀取，更新，銷毀）數(shù)據(jù)操作。
2. 使用schema.model選項(xiàng)定義模型字段。
3. 啟用editable選項(xiàng)。

這些方法主要適用于支持編輯的其他Kendo UI小部件。

使用編輯器表單

您可以構(gòu)建編輯器表單并將特定模型綁定到編輯器表單。

構(gòu)建編輯器表單

Kendo UI窗口小部件基于schema.model結(jié)構(gòu)（更具體地說是字段集合）動(dòng)態(tài)構(gòu)建編輯器表單。

注意：

數(shù)據(jù)類型	編輯	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中定義數(shù)據(jù)項(xiàng)的id字段，這樣可以確保正確添加、編輯和刪除項(xiàng)目。
• 定義字段的數(shù)據(jù)類型來利用內(nèi)置編輯器，可過濾的UI以及正確的排序、過濾和分組功能。

下表列出了可用的數(shù)據(jù)類型。

下面的示例演示如何通過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具有靜態(tài)模型結(jié)構(gòu)，并且僅遵循預(yù)定義的模型字段列表。 要編輯其他字段，請使用自定義編輯器模板。

自動(dòng)生成的編輯器表單通過Kendo UI MVVM模式綁定到模型，該小部件還允許您使用自定義編輯器模板覆蓋此表單。

創(chuàng)建表單后，小部件將執(zhí)行以下操作：

1. 將編輯器字段綁定到模型。
2. 觸發(fā)edit事件。
3. 顯示編輯器表單。
4. 根據(jù)在編輯器中所做的更改來更新模型。
5. 當(dāng)編輯器表單即將關(guān)閉時(shí)，小部件將觸發(fā)save事件。 在此階段，更改可以被接受或拒絕。

注意：編輯器表單是在觸發(fā)編輯事件之前創(chuàng)建并綁定的，并且已經(jīng)被填充。

將特定模型綁定到編輯器表單

觸發(fā)edit事件后，小部件將獲取相應(yīng)的模型，并通過Kendo UI MVVM模式將生成的或自定義編輯器表單綁定到該模型。 通過使用值綁定來完成模型字段和表單編輯器之間的連接。

此連接遵守以下規(guī)則：

• 初始加載時(shí)，將使用模型值填充編輯器表單。
• 當(dāng)相關(guān)編輯器觸發(fā)change事件時(shí)，將更新模型，值綁定獲取其值并填充模型字段。
• 使用ObservableObject API時(shí)，表單編輯器會(huì)更新。 如果要更新相應(yīng)的UI編輯器，請使用set方法。 如果省略此API，則編輯器不會(huì)更改。