Kendo UI目前最新提供KendoUI for jQuery、KendoUI for Angular、KendoUI Support for React和KendoUI 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í)，請使用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)值，請使用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，請手動(dòng)觸發(fā)change事件。這樣您可以將更改通知的value綁定，并相應(yīng)地更新模型。

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

 

不使用MVVM綁定添加編輯器

注意：

• 要實(shí)現(xiàn)自定義編輯，請使用自定義編輯器模板。

• Kendo UI MVVM綁定不能再使用，而模型綁定應(yīng)手動(dò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)建操作和更新操作，請使用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。