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

翻译|使用教程|编辑:龚雪|2019-10-10 10:23:26.677|阅读 58 次

概述:Kendo UI for jQuery是创建现代Web应用程序的最完整UI库,本文主要为大家介绍如何使用某些Kendo UI窗口小部件实现的编辑功能,欢迎下载Kendo UI for jQuery R3 2019新版体验哦!

相关链接:

Kendo UI for jQuery最新试用版下载

Kendo UI目前最新提供Kendo UI for jQueryKendo UI for AngularKendo UI Support for ReactKendo 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
入门指南

支持编辑的Kendo UI小部件提供以下常用配置选项:

  • editable—控制是否启用编辑。 例如默认情况下,Kendo UI Grid小部件中的编辑功能是禁用的。
  • editable.template—允许您定义自定义编辑器模板。

注意:一些小部件提供了其他可编辑选项,有关更多详细信息,请参阅特定的窗口小部件API文档。 例如Grid小部件可以使用editable.destroy选项禁用删除功能。

支持编辑的Kendo UI小部件提供以下常见事件:

  • edit—在显示编辑器表单之前触发,UI元素已绑定到模型。
  • save—在保存模型之前触发,编辑表单仍处于打开状态。
  • remove—在删除模型之前触发。

注意

  • 只有Scheduler和Gantt支持防止edit、save和remove事件。
  • 这些小部件仅使用一种编辑器形式,它为create和update操作应用相同的编辑器模板。

要启用小部件的编辑功能:

  1. 配置数据源的CRUD(创建,读取,更新,销毁)数据操作。
  2. 使用schema.model选项定义模型字段。
  3. 启用editable选项。

这些方法主要适用于支持编辑的其他Kendo UI小部件。

使用编辑器表单

您可以构建编辑器表单并将特定模型绑定到编辑器表单。

构建编辑器表单

Kendo UI窗口小部件基于schema.model结构(更具体地说是字段集合)动态构建编辑器表单。

注意

  • 在schema.model.id中定义数据项的id字段,这样可以确保正确添加、编辑和删除项目。
  • 定义字段的数据类型来利用内置编辑器,可过滤的UI以及正确的排序、过滤和分组功能。

下表列出了可用的数据类型。

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

下面的示例演示如何通过DataSource schema.model声明字段定义。

schema: {
model: {
id: "id",
fields: {
id: {
editable: false,
// A defaultValue will not be assigned (default value is false).
nullable: true
},
name: {
type: "string",
validation: { required: true }
},
price: {
// A NumericTextBox editor will be initialized in edit mode.
type: "number",
// When a new model is created, this default will be used.
defaultValue: 42
},
discontinued:{
// A checkbox editor will be initialized in edit mode.
type: "boolean"
},
created: {
// A date picker editor will be initialized in edit mode.
type: "date"
},
supplier: {
type: "object" ,
defaultValue: { companyName: "Progress", companyId: 1 }
}
}
}
}

注意:Kendo UI Scheduler具有静态模型结构,并且仅遵循预定义的模型字段列表。 要编辑其他字段,请使用自定义编辑器模板。

自动生成的编辑器表单通过Kendo UI MVVM模式绑定到模型,该小部件还允许您使用自定义编辑器模板覆盖此表单。

创建表单后,小部件将执行以下操作:

  1. 将编辑器字段绑定到模型。
  2. 触发edit事件。
  3. 显示编辑器表单。
  4. 根据在编辑器中所做的更改来更新模型。
  5. 当编辑器表单即将关闭时,小部件将触发save事件。 在此阶段,更改可以被接受或拒绝。

注意:编辑器表单是在触发编辑事件之前创建并绑定的,并且已经被填充。

将特定模型绑定到编辑器表单

触发edit事件后,小部件将获取相应的模型,并通过Kendo UI MVVM模式将生成的或自定义编辑器表单绑定到该模型。 通过使用值绑定来完成模型字段和表单编辑器之间的连接。

此连接遵守以下规则:

  • 初始加载时,将使用模型值填充编辑器表单。
  • 当相关编辑器触发change事件时,将更新模型,值绑定获取其值并填充模型字段。
  • 使用ObservableObject API时,表单编辑器会更新。 如果要更新相应的UI编辑器,请使用set方法。 如果省略此API,则编辑器不会更改。

Kendo UI R3 2019全新发布,最新动态请持续关注Telerik中文网!

扫描关注慧聚IT微信公众号,及时获取最新动态及最新资讯

慧聚IT微信公众号


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

文章转载自:慧都网

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
title
相关厂商
相关产品
Kendo UI

全新升级的Kendo UI,是创建数据丰富的Web应用程序的最完整UI库。

Kendo UI for jQuery

创建现代Web应用程序的最完整UI库。

在线
客服
在线
QQ
电话
咨询
400-700-1020
购物车 反馈 返回
顶部
在线客服系统
live chat