av片网址,国产精品经典三级一区,欧美日韩在线国产

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應(yīng)用程序的最完整UI庫(kù)，編輯是Kendo UI網(wǎng)格的基本功能，可讓您操縱其數(shù)據(jù)的顯示方式。Kendo UI R3 2019 SP1全新發(fā)布，歡迎下載體驗(yàn)~

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

相關(guān)鏈接：

Kendo UI for jQuery最新試用版下載

Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四個(gè)控件。Kendo UI for jQuery是創(chuàng)建現(xiàn)代Web應(yīng)用程序的最完整UI庫(kù)。

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

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

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

批量編輯

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

內(nèi)聯(lián)編輯

當(dāng)用戶單擊一行時(shí)，網(wǎng)格提供用于內(nèi)聯(lián)編輯其數(shù)據(jù)的選項(xiàng)。要啟用內(nèi)聯(lián)編輯操作，請(qǐng)將Grid的editable選項(xiàng)設(shè)置為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ù)的選項(xiàng)。要啟用彈出窗口編輯操作，請(qǐng)將Grid的editable選項(xiàng)設(shè)置為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)格使您可以實(shí)現(xiàn)自定義列編輯器，并指定在用戶編輯數(shù)據(jù)時(shí)適用的驗(yàn)證規(guī)則。

實(shí)施自定義編輯器

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

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

設(shè)置驗(yàn)證規(guī)則

要為編輯操作定義驗(yàn)證規(guī)則，請(qǐng)?jiān)跀?shù)據(jù)源的架構(gòu)中配置驗(yàn)證選項(xiàng)。

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

掃描關(guān)注慧聚IT微信公眾號(hào)，及時(shí)獲取最新動(dòng)態(tài)及最新資訊