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

tthappyer 2019-12-20

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 + ‘">&#8203;</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 + ‘">&#8203;</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 + ‘">&#8203;</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数据管理网格编辑操作
tthappyer

tthappyer

相关推荐

jQuery UI组件库使用技巧小分享，让移动、Web界面开发更简单！

Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四个控件。Kendo UI for jQue

EdwardSiCong / 0评论 2020-11-23

Kendo UI for jQuery数据管理使用教程：PDF导出（二）

Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四个控件。Kendo UI for jQue

82550495 / 0评论 2020-08-03

Kendo UI input 正则表达式验证

<input type="text" pattern="[A-Z0-9_]{4}" class="k-input k-textbox" name="userId" req

sdnxiaotao / 0评论 2017-02-07

ie 9 kendo ui中ajax跨域的问题

浏览起来是没问题的，但把应用放到公网上的一台服务器，2）ie10，chrome等浏览公网的应用和本机的应用，没任何问题，ajax请求的数据能返回给datagrid显示。getaxxx.action了，但这个时候，ie9很奇怪，会判断是跨域请求了，所以解决方

zhuchengzzcc / 0评论 2014-05-05

基于Kendo UI for jQuery和 Bootstrap 4 前台网站和后台管理框架

Kendo UI Admin &amp; Site 是基于 Kendo UI for jQuery 和 Bootstrap 4 搭建的前台网站和后台管理框架。

suis / 0评论 2019-03-20

jQuery Mobile 和 Kendo UI 的比较

在这篇WDJ的文章中我们会尽力更好地了解 Kendo UI 和 jQuery Mobile 在相同的业务领域里之间的差异。jQuery Mobile 和Kendo UI 在方向上是有一点不同的。Kendo UI 却拥有全部：丰富的jQuery的窗体部件，简

donghongbz / 0评论 2019-04-09