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。

1024程序員節火熱開啟！致敬改變世界的程序猿！

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