Kendo UI for jQuery使用教程:编辑功能(二)

Kendo UI目前最新提供KendoUI for jQueryKendoUI for AngularKendoUI Support for ReactKendoUI Support for Vue四个控件。Kendo UI for jQuery是创建现代Web应用程序的完整UI库。


Kendo UI for jQuery使用教程:编辑功能(二)_第1张图片


某些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


公司名称:北京哲想软件有限公司

北京哲想软件官方网站:www.cogitosoft.com

北京哲想软件微信公众平台账号:cogitosoftware

北京哲想软件微博:哲想软件

北京哲想软件邮箱:[email protected]

销售(俞先生)联系方式:+86(010)68421378

微信:18610247936 QQ:368531638


你可能感兴趣的:(Kendo UI for jQuery使用教程:编辑功能(二))