Web UI开发速速种草—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 Grid提供以下编辑模式:
- 批量编辑
- 内联编辑
- 弹出式编辑
- 自定义编辑
入门指南
要启用编辑:
- 熟悉Kendo UI中常见编辑概念
- 配置Grid的数据源
- 通过schema配置定义字段
- 设置editable选项
配置数据源
下面的示例演示如何为CRUD(创建、读取、更新、销毁)数据操作配置数据源。
var dataSource = new kendo.data.DataSource({
transport: {
read: "/Products",
update: {
url: "/Products/Update",
type: "POST"
},
destroy: {
url: "/Products/Destroy",
type: "POST"
},
create: {
url: "/Products/Create",
type: "POST"
}
},
// Determines if changes will be send to the server individually or as batch.
batch: true
//...
});
通过schema定义字段
下面的示例演示如何通过DataSource schema.model声明字段定义。
注意:
- 在schema.model.id中定义数据项的id字段,这样可以确保正确添加、编辑和删除项目。
- 定义字段的数据类型来利用内置编辑器、可过滤的UI以及正确的排序、过滤和分组功能。
下图列出了可用的数据类型:

var dataSource = new kendo.data.DataSource({
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 }
}
}
}
}
});
设置可编辑选项
默认情况下,Grid是不可编辑的。要启用编辑功能,请添加所需的编辑类型。Kendo UI jQuery Grid支持单元内、内联和弹出编辑模式。为了使编辑功能完全起作用,请添加带有Create按钮和用于更新、销毁操作的命令列工具栏。
下面的示例演示如何在incell编辑模式下为CRUD操作配置基本Grid。
// Incell editing. $("#grid").kendoGrid({
// To enable the insertion of new records, save or cancel changes.
toolbar: [ "create", "save", "cancel" ],
columns: [ "name",
// To trigger the in-cell destroy operation.
{ command: [ "destroy" ] }
],
dataSource: dataSource,
editable: true
});
以下示例演示如何以内联或弹出编辑模式为CRUD操作配置基本Grid。
// Inline OR Popup editing. $("#grid").kendoGrid({
// To enable the insertion of new records.
toolbar: [ "create" ],
columns: [ "name",
// To trigger the inline or popup edit and destroy operations.
{ command: [ "edit", "destroy" ] }
],
dataSource: dataSource,
editable: "inline" // OR editable: { mode : "popup" }
});
了解最新Kendo UI最新资讯,请关注Telerik中文网!
扫描关注慧聚IT微信公众号,及时获取最新动态及最新资讯

Web UI开发速速种草—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 ...
- Web界面开发必看!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开发教程: Kendo UI 示例及总结
前面基本介绍完Kendo UI开发的基本概念和开发步骤,Kendo UI的示例网站为http://demos.kendoui.com/ ,包含了三个部分 Web DemoMobile DemoData ...
- 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 ...
- 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开发教程(9): Kendo UI Validator 概述
Kendo UI Validator 支持了客户端校验的便捷方法,它基于HTML 5 的表单校验功能,支持很多内置的校验规则,同时也提供了自定义规则的便捷方法. 完整的Kendo UI 的Valida ...
- 关于Kendo UI 开发教程
Kendo UI 开发教程 jQuery UI 是一套 JavaScript 函式库,提供抽象化.可自订主题的 GUI 控制项与动画效果.基于 jQuery JavaScript 函式库,可用来建构互 ...
随机推荐
- jqGrid获取展示的所有行id集合
$("#jqGrid").getDataIDs();
- springboot与redis
该项目已上传至GitHub:https://github.com/xiaostudy/springboot_redis 用到的框架技术有:springboot.mybatis.shiro.redis ...
- 表单绑定 v-model
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- EF-初识
什么是ORM 起源随着编程的发展,程序里都是面向对象啥的,但是数据库发展呢 网状数据库 ->层次数据库 ->关系数据库(当然还有nosql数据库 我们只是做热数据缓存 后面将会讲到) ...
- centos7 通过yum安装mysql
但是CentOS7的yum源中默认好像是没有mysql的.为了解决这个问题,我们要先下载mysql的repo源. 1.下载mysql的repo源 $ wget http://repo.mysql.co ...
- STM32的I2C通讯过程
使用I2C外设通讯时,在通讯的不同阶段它会对“状态寄存器(SR1 及SR2)”的不同数据位写入参数,通过读取这些寄存器标志来了解通讯状态. 1.主发送器 可使用STM32标准库函数来直接检测这些事件的 ...
- 『Linux』第二节: 安装Linux系统
一. 准备工具 1. centOS系统下载 http://isoredirect.centos.org/centos/7/isos/x86_64/CentOS-7-x86_64-DVD-1810.is ...
- S04_CH01_搭建工程移植LINUX/测试EMMC/VGA
S04_CH01_搭建工程移植LINUX/测试EMMC/VGA 1.1概述: 本章内容是在已经提供安装了VIVADO2015.4 的ubuntu系统下,进行.大家可以下周我们已经提供的虚拟机镜像,我们 ...
- Linux 系统下提取 ShellCode
未完待续 1.使用C语言编写一个获得系统Shell的小程序. #include <unistd.h> int main() { char * shell[2]; shell[0]=&quo ...
- ant build打包
使用ant build进行增量打包 <?xml version="1.0" encoding="gb2312"?> <project name ...