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微信公众号，及时获取最新动态及最新资讯