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í)，請使用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。

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

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