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 ...
随机推荐
- Design Phone Directory
Design a Phone Directory which supports the following operations: get: Provide a number which is not ...
- [转帖]瀚高数据库创建uuid的方法
使用syssso登录,并执行下列语句 highgo=> select set_secure_level('off'); set_secure_level -------------------- ...
- 【Python】【基础知识】【内置常量】
Python的内置常量有: False.True.None.NotImplemented.Ellipsis.__debug__ 由 site 模块添加的常量:quit.exit.copyright.c ...
- scrapy生成json中文为ASCII码解决
修改pipelines.py 即可 修改内容如下: import json import codecs import os class BaiduNewsPipeline(object): #增加的 ...
- mysql数据库设计字符类型及长度
1.数字类型 小数的我就不聊了,因为有小数点的一般都是用字符串保存.关于整数,有几种可以选TINYINT.SMALLINT.MEDIUMINT.INT和BIGINT,分别占1.2.4.8字节.如果无符 ...
- 易混乱javascript知识点简要记录
一.== vs === ==在做判断时,如果对比双方的类型不一样的话,就会进行类型转换 假如我们需要对比 x 和 y 是否相同,就会进行如下判断流程: 首先会判断两者类型是否相同.相同的话就是比大小了 ...
- Coloring Edges(有向图环染色)-- Educational Codeforces Round 72 (Rated for Div. 2)
题意:https://codeforc.es/contest/1217/problem/D 给你一个有向图,要求一个循环里不能有相同颜色的边,问你最小要几种颜色染色,怎么染色? 思路: 如果没有环,那 ...
- (0)c++入门——认识指针与数组——指针即是内存中地址。
初识指针 首先需要了解一个概念,计算机的内存(或者说是寄存器)都是有地址的. <c++ primer plus>一书P37中提到这样一个概念:为把信息存储在计算机中,程序必须记录3个基本属 ...
- pycharm 安装好,只要三部! 超级简单教程!
pycharm的安装,确实比较麻烦,所以特意做了一期简单版本的安装教程,跟着教程走...只要三部! →下载 链接:https://pan.baidu.com/s/1JxZgAhPVKAIoM1_jpD ...
- 【python tkinter】对于窗口存在的认识
今天写了messagebox(信息提示框) 和 inputbox(输入框). 对于 [窗口] 有了新的认识... 发现一个奇怪的事情(虽然原因很简单啦······) def msg_box(titl ...