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四個(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

常見情況

定義自定義編輯器模板

當(dāng)默認(rèn)編輯器表單無法滿足您的業(yè)務(wù)需求時(shí)，請(qǐng)使用editable.template選項(xiàng)創(chuàng)建自定義編輯器表單，該選項(xiàng)可用于定義自定義編輯器表單。

注意：每個(gè)小部件僅使用一個(gè)編輯器表單進(jìn)行創(chuàng)建和更新操作。

以下規(guī)則適用于編輯器模板：

• 該模板使用Kendo UI模板語法。
• 通過MVVM值綁定，將編輯器綁定到特定的模型字段。

定義默認(rèn)模型值

默認(rèn)情況下模型字段具有基于字段類型的預(yù)定義值，您也可以將字段定義為nullable。要定義特定的默認(rèn)值，請(qǐng)使用

schema.model.fields.defaulValue選項(xiàng)。value綁定使用模型來設(shè)置編輯器值，編輯器的值將因模型值而丟失。
schema: {model: {id: "ProductID",fields: {ProductID: { editable: false, nullable: true },ProductName: { defaultValue: "Product Name 1" }}}}

引用特定的編輯器控件

您可以使用小部件的edit事件從編輯器表單訪問特定的編輯器元素。

通過特定的編輯器更新模型

要通過更新相關(guān)的編輯器來修改model，請(qǐng)手動(dòng)觸發(fā)change事件。這樣您可以將更改通知的value綁定，并相應(yīng)地更新模型。

注意：Kendo UI小部件提供了trigger方法，必須使用該方法來觸發(fā)change事件。

不使用MVVM綁定添加編輯器

注意：

• 要實(shí)現(xiàn)自定義編輯，請(qǐng)使用自定義編輯器模板。
• Kendo UI MVVM綁定不能再使用，而模型綁定應(yīng)手動(dòng)處理。

為避免定義用于編輯特定模型字段的自定義編輯器模板，請(qǐng)?jiān)趧?chuàng)建表單后添加其他編輯器：

1. 連接小部件edit事件。
2. 在edit事件處理程序中手動(dòng)添加編輯器。
3. 通過使用模型設(shè)置編輯器的值，該模型在edit事件處理程序的參數(shù)中可用。
4. 連接編輯器的change事件并相應(yīng)地更新model。

編輯之前訪問模型

連接小部件的edit事件，您將從傳遞的參數(shù)中獲取模型。

function edit(e) {
var model = e.model;
}

注意：調(diào)度程序?qū)鬟fe.event字段而不是一個(gè)model， 該事件是SchedulerEvent類的實(shí)例。

通過UID訪問模型

每個(gè)模型都有唯一的標(biāo)識(shí)符，它應(yīng)用于包含編輯器表單的HTML元素，您可以通過data-uid HTML屬性識(shí)別該元素。使用該uid值，通過使用getByUid方法從小部件的數(shù)據(jù)源獲取模型。

識(shí)別新模型

要區(qū)分創(chuàng)建操作和更新操作，請(qǐng)使用Model.isNew（）方法。

故障排除

本節(jié)提供了在配置編輯功能時(shí)可能遇到的常見問題的解決方案。

編輯事件中的模型字段值不會(huì)更新

描述：常見的情況是在小部件的編輯事件中修改模型，如果model字段的初始（默認(rèn)）值無效，將阻止該模型。 在這種情況下，附加的UI驗(yàn)證會(huì)阻止任何其他模型修改，直到從編輯器表單更新值為止。

原因：在模型更新期間發(fā)生的以下操作會(huì)導(dǎo)致此問題：

• 使用set方法更新模型字段。
• 該模型將獲取新值，并將其與當(dāng)前值進(jìn)行比較，如果它們不同，則可以設(shè)置新值。
• UI驗(yàn)證已觸發(fā)。 注意，它使用編輯器元素值執(zhí)行驗(yàn)證檢查。 但是，它是無效的，因此我們嘗試設(shè)置的新值將被忽略。

解決方案：通過使用schema.model.fields.defaultValue選項(xiàng)定義一個(gè)有效的defaulValue。

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

掃描關(guān)注慧聚IT微信公眾號(hào)，及時(shí)獲取最新動(dòng)態(tài)及最新資訊