国产午夜精品视频,国产ww,日韩经典在线

欧美日韩亚-欧美日韩亚州在线-欧美日韩亚洲-欧美日韩亚洲第一区-欧美日韩亚洲二区在线-欧美日韩亚洲高清精品

Kendo UI for jQuery數(shù)據(jù)管理使用教程：網(wǎng)格編輯操作

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

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

# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>

相關鏈接：

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是創(chuàng)建現(xiàn)代Web應用程序的最完整UI庫。

編輯是Kendo UI網(wǎng)格的基本功能，可讓您操縱其數(shù)據(jù)的顯示方式。

Kendo UI Grid提供以下編輯模式：

批量編輯
內聯(lián)編輯
彈出式編輯
自定義編輯

批量編輯

網(wǎng)格使您能夠進行和保存批量更新。要在網(wǎng)格中啟用批處理編輯操作，請將數(shù)據(jù)源的批處理選項設置為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>

內聯(lián)編輯

當用戶單擊一行時，網(wǎng)格提供用于內聯(lián)編輯其數(shù)據(jù)的選項。要啟用內聯(lián)編輯操作，請將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>

彈出式編輯

網(wǎng)格提供用于在彈出窗口中編輯其數(shù)據(jù)的選項。要啟用彈出窗口編輯操作，請將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>

自定義編輯

網(wǎng)格使您可以實現(xiàn)自定義列編輯器，并指定在用戶編輯數(shù)據(jù)時適用的驗證規(guī)則。

實施自定義編輯器

要在網(wǎng)格中實現(xiàn)自定義編輯器，請指定相應列的編輯器字段。該字段的值將指向JavaScript函數(shù)，該函數(shù)將實例化對應列單元格的列編輯器。

<!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>

設置驗證規(guī)則

要為編輯操作定義驗證規(guī)則，請在數(shù)據(jù)源的架構中配置驗證選項。

<!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微信公眾號，及時獲取最新動態(tài)及最新資訊