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 ...
随机推荐
- Redis二进制反转算法分析
在 redis 源码中 dictScan 算法中用到了用到了非常经典的二进制反转算法,该算法对二进制的反转高效而实用,同时对于理解位运算也有非常大的帮助.先呈现源码: /* Function to r ...
- [bzoj1775][Usaco2009 Dec]Vidgame 电视游戏问题_背包dp
1775: [Usaco2009 Dec]Vidgame 电视游戏问题 题目链接:https://www.lydsy.com/JudgeOnline/problem.php?id=1775 题解: 发 ...
- [转帖]公钥基础设施(PKI)/CFSSL证书生成工具的使用
公钥基础设施(PKI)/CFSSL证书生成工具的使用 weilovepan520关注1人评论84344人阅读2018-05-26 12:22:20 https://blog.51cto.com/liu ...
- 第十三章 字符串(一)之 String
这一节来学习String的特性和方法. 一.String对象的不变性 不变性:String对象是由一个final char[] value 数组实现的,因此String对象是不可变的.任何看起来改变S ...
- 使用Minikube运行一个本地单节点Kubernetes集群(阿里云)
使用Minikube运行一个本地单节点Kubernetes集群中使用谷歌官方镜像由于某些原因导致镜像拉取失败以及很多人并没有代理无法开展相关实验. 因此本文使用阿里云提供的修改版Minikube创建一 ...
- LC 200 Number of Islands
问题描述 Given a 2d grid map of '1's (land) and '0's (water), count the number of islands. An island is ...
- Python特色数据类型--列表
#list[起始索引:终止索引(不包含):步长间隔] list1[5:8] #步长省略则默认为1 #修改元素列表 #列表是一种可变的数据类型,所以可以修改内容 list1 = [0,1,2,3,4] ...
- 安装consul-client+registrator
安装registrator 下载镜像这里必须要注意:registrator的lastest版本已经2年没更新了,他的最新主板本是master,一定要注意,因为旧的版本无法发现跟自己不是同一个网络的容器 ...
- jdbc插入mysql时间差14个小时的解决方案
在java中new Date()输出的时间是没错的,插入到mysql后少了14个小时,原因是新版jdbc驱动的时区设置问题. 在jdbc连接url最后加上serverTimezone=GMT%2B8即 ...
- PowerBI 实现不同角色看到内容不同支持动态权限管理
首先,在PowerBIDesktop中进行设计,先设计一个权限表: 具体权限如下: 也就是说,这些用户账号在PowerBIService登录时,会分别代表这些用户,接下来会使用一个很重要的动态函数:U ...