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

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

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中文网！

来源：oschina

链接：https://my.oschina.net/u/3992677/blog/3145218

标签

KendoUI

jquery