Web界面开发必看!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
入门指南
支持编辑的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操作应用相同的编辑器模板。
要启用小部件的编辑功能:
- 配置数据源的CRUD(创建,读取,更新,销毁)数据操作。
- 使用schema.model选项定义模型字段。
- 启用editable选项。
这些方法主要适用于支持编辑的其他Kendo UI小部件。
使用编辑器表单
您可以构建编辑器表单并将特定模型绑定到编辑器表单。
构建编辑器表单
Kendo UI窗口小部件基于schema.model结构(更具体地说是字段集合)动态构建编辑器表单。
注意:
- 在schema.model.id中定义数据项的id字段,这样可以确保正确添加、编辑和删除项目。
- 定义字段的数据类型来利用内置编辑器,可过滤的UI以及正确的排序、过滤和分组功能。
下表列出了可用的数据类型。

下面的示例演示如何通过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模式绑定到模型,该小部件还允许您使用自定义编辑器模板覆盖此表单。
创建表单后,小部件将执行以下操作:
- 将编辑器字段绑定到模型。
- 触发edit事件。
- 显示编辑器表单。
- 根据在编辑器中所做的更改来更新模型。
- 当编辑器表单即将关闭时,小部件将触发save事件。 在此阶段,更改可以被接受或拒绝。
注意:编辑器表单是在触发编辑事件之前创建并绑定的,并且已经被填充。
将特定模型绑定到编辑器表单
触发edit事件后,小部件将获取相应的模型,并通过Kendo UI MVVM模式将生成的或自定义编辑器表单绑定到该模型。 通过使用值绑定来完成模型字段和表单编辑器之间的连接。
此连接遵守以下规则:
- 初始加载时,将使用模型值填充编辑器表单。
- 当相关编辑器触发change事件时,将更新模型,值绑定获取其值并填充模型字段。
- 使用ObservableObject API时,表单编辑器会更新。 如果要更新相应的UI编辑器,请使用set方法。 如果省略此API,则编辑器不会更改。
Kendo UI R3 2019全新发布,最新动态请持续关注Telerik中文网!
扫描关注慧聚IT微信公众号,及时获取最新动态及最新资讯

Web界面开发必看!Kendo UI for jQuery编辑功能指南第一弹的更多相关文章
- Web界面开发必看!Kendo UI for jQuery编辑功能指南第二弹
Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...
- Kendo UI for jQuery自定义小部件第一弹!不得不看的入门指南
Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...
- Web UI开发推荐!Kendo UI for jQuery自定义小部件——使用MVVM
Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...
- Web UI开发推荐!Kendo UI for jQuery自定义小部件——处理事件
Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...
- 知名界面类控件Kendo UI for jQuery R2 2019 SP1发布|附下载
Kendo UI for jQuery提供了在短时间内构建现在Web应用程序所需要的一切.从70多个UI中选择,并轻松地将它们组合起来,创建出酷炫响应式的应用程序,同时将开发时间加快了50%. [适用 ...
- Web UI开发神器—Kendo UI for jQuery数据管理网格编辑操作
Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...
- Web UI开发速速种草—Kendo UI for jQuery网格编辑操作概述
Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...
- 数据管理必看!Kendo UI for jQuery过滤器的全球化
Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...
- 数据管理必看!Kendo UI for jQuery过滤器状态保持
Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...
随机推荐
- [AcWing30]正则表达式匹配
[AcWing30]正则表达式匹配 请实现一个函数用来匹配包括'.'和'*'的正则表达式. 模式中的字符'.'表示任意一个字符,而'*'表示它前面的字符可以出现任意次(含0次). 例如,字符串&quo ...
- #######【Python】【基础知识】【标准库】目录及学习规划 ######
下述参考Python DOC https://docs.python.org/zh-cn/3/library/index.html 概述 可用性注释 内置函数 内置常量 由 site 模块添加的常量 ...
- 【3.3】mysql中的Federated存储引擎,远程表,相当于sql server的linked server
MySQL中针对不同的功能需求提供了不同的存储引擎.所谓的存储引擎也就是MySQL下特定接口的具体实现. FEDERATED是其中一个专门针对远程数据库的实现.一般情况下在本地数据库中建表会在数据库目 ...
- 理解twisted中的reactor和deferred(一)
Deferred是一个延迟加载对象,这个概念类似于tornado future,是调用异步操作返回的一个对象,其中包括了操作成功后的回调处理,错误后的回调处理. 简单讲,当我们需要执行一个耗时操作,比 ...
- mysql查询出数据更新到另一张表
公司今天有个需求,大体意思就是把一个表的玩家游戏场数统计出来,然后赋值到另一张表的字段上,说白了就是两张表,但是查询出来的玩家账号和次数是多条,尝试很多种写法都没用,最后用了最笨的方式解决. -- - ...
- 安装laravel框架
方式一:Windows版本通过composer来下载安装laravel框架 一:laravel是php的一个web框架.laravel框架安装主要依赖composer工具,本经验就介绍一下怎么在win ...
- 【IntelliJ IDEA】快捷键
1.System.out.println();的快捷方法 sout然后Alt+Enter或者直接点 2.idea上 重写父类方法的快捷键 Ctrl+O之后,在弹出的上面选择要重写的方法 3.idea ...
- docker_nginx_php_mysql
https://blog.csdn.net/miwumuge/article/details/83386679 问题 1.容器内访问宿主机地址, host.docker.internal
- JS基础_基本数据类型和引用数据类型
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- vue项目默认IE以最高级别打开
只需要在index.html加入 <meta http-equiv="X-UA-Compatible" content="IE=Edge">