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微信公众号，及时获取最新动态及最新资讯

最新文章

  1. 初识 Html5
  2. java中动态代理实现机制
  3. Canvas实例
  4. Linux 之HTTP服务，APACHE
  5. HDU4888 Redraw Beautiful Drawings（最大流唯一性判定：残量网络删边判环）
  6. ODAC （V9.5.15) 学习笔记（二十）大数据量获取处理
  7. 自动化运维之puppet的学习（如何找到你需要的模块）
  8. linux中ll和du的区别
  9. 直接拿来用！超实用的Java数组技巧攻略[转]
  10. VS中使用sqlite静态连接
  11. ACM竞赛常用STL（一）
  12. 获得进程可执行文件的路径： GetModuleFileNameEx， GetProcessImageFileName， QueryFullProcessImageName
  13. 基于lucene的案例开发：查询语句创建PackQuery
  14. 胡na娜、少年和恩师-写在甲午冬的仅仅言片语及感想
  15. 设计模式（5）原型模式（Prototype）
  16. j.u.c系列（02）---线程池ThreadPoolExecutor---tomcat实现策略
  17. 垒骰子|2015年蓝桥杯B组题解析第九题-fishers
  18. Mysql-SqlServer区别
  19. C#.NET常见问题(FAQ)-控制台程序如何输出Messagebox
  20. Nginx 使用总结

热门文章

  1. [学习笔记] 在Eclipse中添加用户库 Add User Libraries ，在项目中引用用户库
  2. CDH建表字符集问题
  3. LinkedList的基本用法
  4. sqlserver交换数据行中的指定列
  5. 【C#】上机实验一
  6. 将物理机系统转为虚拟机系统 p2v
  7. nodejs 对 png 图片的像素级别处理
  8. C#获取ip
  9. 如何将 HTML 转换为 XHTML
  10. js中 this 的指向