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网格编辑操作概述的更多相关文章

  1. Web界面开发必看!Kendo UI for jQuery编辑功能指南第二弹

    Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...

  2. Web界面开发必看!Kendo UI for jQuery编辑功能指南第一弹

    Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...

  3. Web UI开发神器—Kendo UI for jQuery数据管理网格编辑操作

    Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...

  4. [置顶] Kendo UI开发教程: Kendo UI 示例及总结

    前面基本介绍完Kendo UI开发的基本概念和开发步骤,Kendo UI的示例网站为http://demos.kendoui.com/ ,包含了三个部分 Web DemoMobile DemoData ...

  5. 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 ...

  6. Web UI开发推荐!Kendo UI for jQuery自定义小部件——处理事件

    Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...

  7. Web UI开发神器—Kendo UI for jQuery数据管理之过滤操作

    Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...

  8. Kendo UI开发教程(9): Kendo UI Validator 概述

    Kendo UI Validator 支持了客户端校验的便捷方法,它基于HTML 5 的表单校验功能,支持很多内置的校验规则,同时也提供了自定义规则的便捷方法. 完整的Kendo UI 的Valida ...

  9. 关于Kendo UI 开发教程

    Kendo UI 开发教程 jQuery UI 是一套 JavaScript 函式库,提供抽象化.可自订主题的 GUI 控制项与动画效果.基于 jQuery JavaScript 函式库,可用来建构互 ...

随机推荐

  1. jqGrid获取展示的所有行id集合

    $("#jqGrid").getDataIDs();

  2. springboot与redis

    该项目已上传至GitHub:https://github.com/xiaostudy/springboot_redis 用到的框架技术有:springboot.mybatis.shiro.redis ...

  3. 表单绑定 v-model

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. EF-初识

    什么是ORM 起源随着编程的发展,程序里都是面向对象啥的,但是数据库发展呢  网状数据库 ->层次数据库 ->关系数据库(当然还有nosql数据库  我们只是做热数据缓存  后面将会讲到) ...

  5. centos7 通过yum安装mysql

    但是CentOS7的yum源中默认好像是没有mysql的.为了解决这个问题,我们要先下载mysql的repo源. 1.下载mysql的repo源 $ wget http://repo.mysql.co ...

  6. STM32的I2C通讯过程

    使用I2C外设通讯时,在通讯的不同阶段它会对“状态寄存器(SR1 及SR2)”的不同数据位写入参数,通过读取这些寄存器标志来了解通讯状态. 1.主发送器 可使用STM32标准库函数来直接检测这些事件的 ...

  7. 『Linux』第二节: 安装Linux系统

    一. 准备工具 1. centOS系统下载 http://isoredirect.centos.org/centos/7/isos/x86_64/CentOS-7-x86_64-DVD-1810.is ...

  8. S04_CH01_搭建工程移植LINUX/测试EMMC/VGA

    S04_CH01_搭建工程移植LINUX/测试EMMC/VGA 1.1概述: 本章内容是在已经提供安装了VIVADO2015.4 的ubuntu系统下,进行.大家可以下周我们已经提供的虚拟机镜像,我们 ...

  9. Linux 系统下提取 ShellCode

    未完待续 1.使用C语言编写一个获得系统Shell的小程序. #include <unistd.h> int main() { char * shell[2]; shell[0]=&quo ...

  10. ant build打包

    使用ant build进行增量打包 <?xml version="1.0" encoding="gb2312"?> <project name ...