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. C语言获取当前系统时间

    原文链接:https://blog.csdn.net/yuec1998/article/details/79883318 #include<stdio.h>#include<time ...

  2. Python练手项目：20行爬取全王者全英雄皮肤

    引言    王者荣耀大家都玩过吧,没玩过的也应该听说过,作为时下最火的手机MOBA游戏,咳咳,好像跑题了.我们今天的重点是爬取王者荣耀所有英雄的所有皮肤,而且仅仅使用20行Python代码即可完成. ...

  3. C语言位操作中指定的某一位数置0、置1、取反

    一.指定的某一位数置1 宏 #define setbit(x,y)  x|=(1<<y) 二.指定的某一位数置0 宏  #define clrbit(x,y)  x&=~(1< ...

  4. vue A对象赋值给B对象，修改B属性会影响到A问题

    实际在vue中  this.A = this.B,没有进行深层赋值,只是把this.A的地址指向了与this.B相同的地址,所有对于A的修改会影响到B. 解决相互影响的思路是在this.A必须是新建的 ...

  5. PHP二维数组的引用赋值容易犯的错误

    大家一起来分析一下下面这段代码: <?php $arr = array(); $arr["abc"] = array("sex" => 100, & ...

  6. PAT(B) 1020 月饼（Java）

    题目链接:1020 月饼 (25 point(s)) 分析 将月饼(库存量,总售价,单价)封装成MoonCake类 Scanner会超时,用BufferedReader类读取数据 读取的时候用字符串数 ...

  7. Abp 领域事件简单实践 <三> 自定义事件

    熵片用到的  EntityCreatedEventData<TEntity>,继承自EventData. 我们可以自定义事件: public class TestEvent: EventD ...

  8. 【轻松一刻】Java制作字符动画

    前言 今晚闲来无事,整理了一下电脑中尘封已久的旧代码,看着那些年自己写过的代码,踩过的坑,顿时老泪纵横.正当在感叹之际,突然发现在“马克思”文件夹下出现了一个好玩的项目,那就是N年前刚学Java时写的 ...

  9. 3、java基础：抽象类与接口的区别

    抽象类 我们都知道在面向对象的领域一切都是对象,同时所有的对象都是通过类来描述的,但是并不是所有的类都是来描述对象的.如果一个类没有足够的信息来描述一个具体的对象,而需要其他具体的类来支撑它,那么这样 ...

  10. java调用.net的webservice接口

    要调用webservice,首先得有接口,用已经写好的接口地址在myEclipse的目标project中,右键->new web service client-> 选择JAX-WS方式,点 ...