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是創(chuàng)建現代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—在顯示編輯器表單之前觸發(fā)，UI元素已綁定到模型。
• save—在保存模型之前觸發(fā)，編輯表單仍處于打開狀態(tài)。
• remove—在刪除模型之前觸發(fā)。

注意：

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

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

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

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

使用編輯器表單

您可以構建編輯器表單并將特定模型綁定到編輯器表單。

構建編輯器表單

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

注意：

• 在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具有靜態(tài)模型結構，并且僅遵循預定義的模型字段列表。 要編輯其他字段，請使用自定義編輯器模板。

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

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

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

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

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

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

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

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

掃描關注慧聚IT微信公眾號，及時獲取最新動態(tài)及最新資訊