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提供以下编辑模式：

  • 批量编辑
  • 内联编辑
  • 弹出式编辑
  • 自定义编辑
批量编辑

网格使您能够进行和保存批量更新。要在网格中启用批处理编辑操作，请将数据源的批处理选项设置为true。

<!DOCTYPE html>

  <html>

  <head><title></title><link rel="stylesheet" href="styles/kendo.common.min.css" /><link rel="stylesheet" href="styles/kendo.default.min.css" /><link rel="stylesheet" href="styles/kendo.default.mobile.min.css" />

<script src="js/jquery.min.js"></script>

  <script src="js/kendo.all.min.js"></script>

</head>

  <body>

  <div id="example">

  <div id="grid"></div>

<script>

  $(document).ready(function () {

  var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",

  dataSource = new kendo.data.DataSource({

  transport: {

  read:  {

  url: crudServiceBaseUrl + "/Products",

  dataType: "jsonp"

  },

  update: {

  url: crudServiceBaseUrl + "/Products/Update",

  dataType: "jsonp"

  },

  destroy: {

  url: crudServiceBaseUrl + "/Products/Destroy",

  dataType: "jsonp"

  },

  create: {

  url: crudServiceBaseUrl + "/Products/Create",

  dataType: "jsonp"

  },

  parameterMap: function(options, operation) {

  if (operation !== "read" && options.models) {

  return {models: kendo.stringify(options.models)};

  }

  }

  },

  batch: true,

  pageSize: 20,

  schema: {

  model: {

  id: "ProductID",

  fields: {

  ProductID: { editable: false, nullable: true },

  ProductName: { validation: { required: true } },

  UnitPrice: { type: "number", validation: { required: true, min: 1} },

  Discontinued: { type: "boolean" },

  UnitsInStock: { type: "number", validation: { min: 0, required: true } }

  }

  }

  }

  });

$("#grid").kendoGrid({

  dataSource: dataSource,

  navigatable: true,

  pageable: true,

  height: 550,

  toolbar: ["create", "save", "cancel"],

  columns: [

  "ProductName",

  { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 120 },

  { field: "UnitsInStock", title: "Units In Stock", width: 120 },

  { field: "Discontinued", width: 120, editor: customBoolEditor },

  { command: "destroy", title: "&nbsp;", width: 150 }],

  editable: true

  });

  });

function customBoolEditor(container, options) {

  var guid = kendo.guid();

  $('<input class="k-checkbox" id="' + guid + '" type="checkbox" name="Discontinued" data-type="boolean" data-bind="checked:Discontinued">').appendTo(container);

  $('<label class="k-checkbox-label" for="' + guid + '">​</label>').appendTo(container);

  }

  </script>

  </div>

</body>

  </html>
内联编辑

当用户单击一行时，网格提供用于内联编辑其数据的选项。要启用内联编辑操作，请将Grid的editable选项设置为inline。

<!DOCTYPE html>

  <html>

  <head><title></title><link rel="stylesheet" href="styles/kendo.common.min.css" /><link rel="stylesheet" href="styles/kendo.default.min.css" /><link rel="stylesheet" href="styles/kendo.default.mobile.min.css" />

<script src="js/jquery.min.js"></script>

  <script src="js/kendo.all.min.js"></script>

</head>

  <body>

  <div id="example">

  <div id="grid"></div>

<script>

  $(document).ready(function () {

  var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",

  dataSource = new kendo.data.DataSource({

  transport: {

  read:  {

  url: crudServiceBaseUrl + "/Products",

  dataType: "jsonp"

  },

  update: {

  url: crudServiceBaseUrl + "/Products/Update",

  dataType: "jsonp"

  },

  destroy: {

  url: crudServiceBaseUrl + "/Products/Destroy",

  dataType: "jsonp"

  },

  create: {

  url: crudServiceBaseUrl + "/Products/Create",

  dataType: "jsonp"

  },

  parameterMap: function(options, operation) {

  if (operation !== "read" && options.models) {

  return {models: kendo.stringify(options.models)};

  }

  }

  },

  batch: true,

  pageSize: 20,

  schema: {

  model: {

  id: "ProductID",

  fields: {

  ProductID: { editable: false, nullable: true },

  ProductName: { validation: { required: true } },

  UnitPrice: { type: "number", validation: { required: true, min: 1} },

  Discontinued: { type: "boolean" },

  UnitsInStock: { type: "number", validation: { min: 0, required: true } }

  }

  }

  }

  });

$("#grid").kendoGrid({

  dataSource: dataSource,

  pageable: true,

  height: 550,

  toolbar: ["create"],

  columns: [

  "ProductName",

  { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "120px" },

  { field: "UnitsInStock", title:"Units In Stock", width: "120px" },

  { field: "Discontinued", width: "120px", editor: customBoolEditor },

  { command: ["edit", "destroy"], title: "&nbsp;", width: "250px" }],

  editable: "inline"

  });

  });

function customBoolEditor(container, options) {

  var guid = kendo.guid();

  $('<input class="k-checkbox" id="' + guid + '" type="checkbox" name="Discontinued" data-type="boolean" data-bind="checked:Discontinued">').appendTo(container);

  $('<label class="k-checkbox-label" for="' + guid + '">​</label>').appendTo(container);

  }

  </script>

  </div>

</body>

  </html>
弹出式编辑

网格提供用于在弹出窗口中编辑其数据的选项。要启用弹出窗口编辑操作，请将Grid的editable选项设置为popup。

<!DOCTYPE html>

  <html>

  <head><title></title><link rel="stylesheet" href="styles/kendo.common.min.css" /><link rel="stylesheet" href="styles/kendo.default.min.css" /><link rel="stylesheet" href="styles/kendo.default.mobile.min.css" />

<script src="js/jquery.min.js"></script>

  <script src="js/kendo.all.min.js"></script>

</head>

  <body>

  <div id="example">

  <div id="grid"></div>

<script>

  $(document).ready(function () {

  var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",

  dataSource = new kendo.data.DataSource({

  transport: {

  read:  {

  url: crudServiceBaseUrl + "/Products",

  dataType: "jsonp"

  },

  update: {

  url: crudServiceBaseUrl + "/Products/Update",

  dataType: "jsonp"

  },

  destroy: {

  url: crudServiceBaseUrl + "/Products/Destroy",

  dataType: "jsonp"

  },

  create: {

  url: crudServiceBaseUrl + "/Products/Create",

  dataType: "jsonp"

  },

  parameterMap: function(options, operation) {

  if (operation !== "read" && options.models) {

  return {models: kendo.stringify(options.models)};

  }

  }

  },

  batch: true,

  pageSize: 20,

  schema: {

  model: {

  id: "ProductID",

  fields: {

  ProductID: { editable: false, nullable: true },

  ProductName: { validation: { required: true } },

  UnitPrice: { type: "number", validation: { required: true, min: 1} },

  Discontinued: { type: "boolean" },

  UnitsInStock: { type: "number", validation: { min: 0, required: true } }

  }

  }

  }

  });

$("#grid").kendoGrid({

  dataSource: dataSource,

  pageable: true,

  height: 550,

  toolbar: ["create"],

  columns: [

  { field:"ProductName", title: "Product Name" },

  { field: "UnitPrice", title:"Unit Price", format: "{0:c}", width: "120px" },

  { field: "UnitsInStock", title:"Units In Stock", width: "120px" },

  { field: "Discontinued", width: "120px", editor: customBoolEditor },

  { command: ["edit", "destroy"], title: "&nbsp;", width: "250px" }],

  editable: "popup"

  });

  });

function customBoolEditor(container, options) {

  var guid = kendo.guid();

  $('<input class="k-checkbox" id="' + guid + '" type="checkbox" name="Discontinued" data-type="boolean" data-bind="checked:Discontinued">').appendTo(container);

  $('<label class="k-checkbox-label" for="' + guid + '">​</label>').appendTo(container);

  }

  </script>

  </div>

</body>

  </html>
自定义编辑

网格使您可以实现自定义列编辑器，并指定在用户编辑数据时适用的验证规则。

实施自定义编辑器

要在网格中实现自定义编辑器，请指定相应列的编辑器字段。 该字段的值将指向JavaScript函数，该函数将实例化对应列单元格的列编辑器。

<!DOCTYPE html>

  <html>

  <head><title></title><link rel="stylesheet" href="styles/kendo.common.min.css" /><link rel="stylesheet" href="styles/kendo.default.min.css" /><link rel="stylesheet" href="styles/kendo.default.mobile.min.css" />

<script src="js/jquery.min.js"></script>

  <script src="js/kendo.all.min.js"></script>

</head>

  <body>

  <script src="../content/shared/js/products.js"></script>

  <div id="example">

  <div id="grid"></div>

<script>

$(document).ready(function () {

  var dataSource = new kendo.data.DataSource({

  pageSize: 20,

  data: products,

  autoSync: true,

  schema: {

  model: {

  id: "ProductID",

  fields: {

  ProductID: { editable: false, nullable: true },

  ProductName: { validation: { required: true } },

  Category: { defaultValue: { CategoryID: 1, CategoryName: "Beverages"} },

  UnitPrice: { type: "number", validation: { required: true, min: 1} }

  }

  }

  }

  });

$("#grid").kendoGrid({

  dataSource: dataSource,

  pageable: true,

  height: 550,

  toolbar: ["create"],

  columns: [

  { field:"ProductName",title:"Product Name" },

  { field: "Category", title: "Category", width: "180px", editor: categoryDropDownEditor, template: "#=Category.CategoryName#" },

  { field: "UnitPrice", title:"Unit Price", format: "{0:c}", width: "130px" },

  { command: "destroy", title: " ", width: "150px" }],

  editable: true

  });

  });

function categoryDropDownEditor(container, options) {

  $('<input required name="' + options.field + '"/>')

  .appendTo(container)

  .kendoDropDownList({

  autoBind: false,

  dataTextField: "CategoryName",

  dataValueField: "CategoryID",

  dataSource: {

  type: "odata",

  transport: {

  read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"

  }

  }

  });

  }

</script>

  </div>

</body>

  </html>

设置验证规则

要为编辑操作定义验证规则，请在数据源的架构中配置验证选项。

<!DOCTYPE html>

  <html>

  <head><title></title><link rel="stylesheet" href="styles/kendo.common.min.css" /><link rel="stylesheet" href="styles/kendo.default.min.css" /><link rel="stylesheet" href="styles/kendo.default.mobile.min.css" />

<script src="js/jquery.min.js"></script>

  <script src="js/kendo.all.min.js"></script>

</head>

  <body>

  <div id="example">

  <div id="grid"></div>

<script>

  $(document).ready(function () {

  var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",

  dataSource = new kendo.data.DataSource({

  transport: {

  read: {

  url: crudServiceBaseUrl + "/Products",

  dataType: "jsonp"

  },

  update: {

  url: crudServiceBaseUrl + "/Products/Update",

  dataType: "jsonp"

  },

  destroy: {

  url: crudServiceBaseUrl + "/Products/Destroy",

  dataType: "jsonp"

  },

  create: {

  url: crudServiceBaseUrl + "/Products/Create",

  dataType: "jsonp"

  },

  parameterMap: function (options, operation) {

  if (operation !== "read" && options.models) {

  return { models: kendo.stringify(options.models) };

  }

  }

  },

  batch: true,

  pageSize: 20,

  schema: {

  model: {

  id: "ProductID",

  fields: {

  ProductID: { editable: false, nullable: true },

  ProductName: {

  validation: {

  required: true,

  productnamevalidation: function (input) {

  if (input.is("[name='ProductName']") && input.val() != "") {

  input.attr("data-productnamevalidation-msg", "Product Name should start with capital letter");

  return /^[A-Z]/.test(input.val());

  }

return true;

  }

  }

  },

  UnitPrice: { type: "number", validation: { required: true, min: 1} },

  Discontinued: { type: "boolean" },

  UnitsInStock: { type: "number", validation: { min: 0, required: true} }

  }

  }

  }

  });

$("#grid").kendoGrid({

  dataSource: dataSource,

  pageable: true,

  height: 550,

  toolbar: ["create"],

  columns: [

  "ProductName",

  { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "120px" },

  { field: "UnitsInStock", title: "Units In Stock", width: "120px" },

  { field: "Discontinued", width: "120px" },

  { command: ["edit", "destroy"], title: "&nbsp;", width: "250px"}],

  editable: "inline"

  });

  });

  </script>

  </div>

</body>

  </html>

了解最新Kendo UI最新资讯，请关注Telerik中文网！

扫描关注慧聚IT微信公众号，及时获取最新动态及最新资讯

Web UI开发神器—Kendo UI for jQuery数据管理网格编辑操作的更多相关文章

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

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

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

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

  3. HTML5 Web app开发工具Kendo UI Web中如何绑定网格到远程数据

    在前面的文章中对于Kendo UI中的Grid控件的一些基础的配置和使用做了一些介绍,本文来看看如何将Kendo UI 中的Grid网格控件绑定到远程数据. 众所周知Grid网格控件是用户界面的一个重 ...

  4. HTML5 Web app开发工具Kendo UI Web中Grid网格控件的使用

    Kendo UI Web中的Grid控件不仅可以显示数据,并对数据提供了丰富的支持,包括分页.排序.分组.选择等,同时还有着大量的配置选项.使用Kendo DataSource组件,可以绑定到本地的J ...

  5. Web前端开发神器--WebStorm(JavaScript 开发工具) 8.0.3 中文汉化破解版

    WebStorm(JavaScript 开发工具) 8.0.3 中文汉化破解版 http://www.jb51.net/softs/171905.html WebStorm 是jetbrains公司旗 ...

  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 前端开发精华文章集锦（jQuery、HTML5、CSS3）【系列十八】

    <Web 前端开发精华文章推荐>2013年第六期(总第十八期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...

  8. Web 前端开发精华文章推荐（jQuery、HTML5、CSS3）【系列十二】

    2012年12月12日,[<Web 前端开发人员和设计师必读文章>系列十二]和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HT ...

  9. Web 前端开发精华文章集锦（jQuery、HTML5、CSS3）【系列二十】

    <Web 前端开发精华文章推荐>2013年第八期(总第二十期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...

随机推荐

  1. dubbo40道面试题

    1.Dubbo是什么? Dubbo是阿里巴巴开源的基于 Java 的高性能 RPC 分布式服务框架,现已成为 Apache 基金会孵化项目. 面试官问你如果这个都不清楚,那下面的就没必要问了.官网:h ...

  2. python 创建虚拟环境时报错OSError, setuptools下载失败

    错误信息如下: Using base prefix 'c:\\users\\huful\\appdata\\local\\programs\\python\\python36-32'New pytho ...

  3. 一个简单的一个sql表遍历

    简单的一个sql表遍历 一般我们写储存过程或者其他sql语句的时候都会用到循环遍历数据,最常用的两种就是 1.游标 2.临时表+while 下面贴出示例代码 DECLARE @MinReLogID I ...

  4. linux下jar命令（运行jar包）

    直接用java -jar xxx.jar,当退出或关闭shell时,程序就会停止掉.   普通方式启动应用: java -jar jarPackageName.jar 1>system.log ...

  5. 数据结构 -- 二叉树（Binary Search Tree）

    一.简介 在计算机科学中,二叉树是每个结点最多有两个子树的树结构.通常子树被称作“左子树”(left subtree)和“右子树”(right subtree).二叉树常被用于实现二叉查找树和二叉堆. ...

  6. C++:标准模板库map

    一:介绍 map是STL的关联式容器,以key-value的形式存储,以红黑树(平衡二叉查找树)作为底层数据结构,对数据有自动排序的功能. 命名空间为std,所属头文件<map> 注意:不 ...

  7. Centos7.3 安装MYSQL

    安装mysql         1.进入到要存放安装包的位置             mkdir /home/lnmp             cd /home/lnmp         2.查看系统 ...

  8. 单例模式中volatile关键字的作用

    背景&问题 在早期的JVM中,synchronized存在巨大的性能开销.因此,有人想出了一个"聪明"的技巧:双重检查锁定(Double-Checked Locking). ...

  9. 1233: 输出杨辉三角前n行（Java）

    WUSTOJ 1233: 输出杨辉三角前n行 题目 原题链接 Description 输出杨辉三角前n行. Input 输入一个数n(n <= 9) Output 输出杨辉三角前n行.(注意行末 ...

  10. 强类型c语言 类型

    C 语言是一门强类型的语言,类型决定语言的特性,允许在相同类型进行运算. *强类型语言的特点:      1      先声明,后使用. 2      类型不可变. * 基本数据类型 * 数据类型的范 ...