Web界面開發必看！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。

---

Kendo UI R3 2019全新發布，最新動態請持續關注Telerik中文網！​​​​​​​

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