亚洲三级在线视频,日本亚洲欧洲另类,成人精品动漫小舞

Kendo UI for jQuery數據管理使用教程：網格編輯操作

翻譯|使用教程|編輯：龔雪|2019-12-19 09:37:10.277|閱讀 323 次

概述：Kendo UI for jQuery是創建現代Web應用程序的最完整UI庫，編輯是Kendo UI網格的基本功能，可讓您操縱其數據的顯示方式。Kendo UI R3 2019 SP1全新發布，歡迎下載體驗~

相關鏈接：

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 = "//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 = "//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 = "//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: "//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 = "//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>

掃描關注慧聚IT微信公眾號，及時獲取最新動態及最新資訊