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微信公眾號，及時獲取最新動態及最新資訊