Kendo UI for jQuery網格使用教程：編輯概述

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提供以下編輯模式：

• 批量編輯
• 內聯編輯
• 彈出式編輯
• 自定義編輯

入門指南

要啟用編輯：

• 熟悉Kendo UI中常見編輯概念
• 配置Grid的數據源
• 通過schema配置定義字段
• 設置editable選項

配置數據源

下面的示例演示如何為CRUD（創建、讀取、更新、銷毀）數據操作配置數據源。

var dataSource = new kendo.data.DataSource({
transport: {
read:   "/Products",
update: {
url: "/Products/Update",
type: "POST"
},
destroy: {
url: "/Products/Destroy",
type: "POST"
},
create: {
url: "/Products/Create",
type: "POST"
}
},
// Determines if changes will be send to the server individually or as batch.
batch: true
//...
});

通過schema定義字段

下面的示例演示如何通過DataSource schema.model聲明字段定義。

注意：

• 在schema.model.id中定義數據項的id字段，這樣可以確保正確添加、編輯和刪除項目。
• 定義字段的數據類型來利用內置編輯器、可過濾的UI以及正確的排序、過濾和分組功能。

下圖列出了可用的數據類型：

var dataSource = new kendo.data.DataSource({
schema: {
model: {
id: "id",
fields: {
id: {
editable: false,
// a defaultValue will not be assigned (default value is false)
nullable: true
},
name: {
type: "string",
validation: { required: true }
},
price: {
// A NumericTextBox editor will be initialized in edit mode.
type: "number",
// When a new model is created, this default will be used.
defaultValue: 42
},
discontinued:{
// A checkbox editor will be initialized in edit mode.
type: "boolean"
},
created: {
// A date picker editor will be initialized in edit mode.
type: "date"
},
supplier: {
type: "object" ,
defaultValue: { companyName: "Progress", companyId: 1 }
}
}
}
}
});

設置可編輯選項

默認情況下，Grid是不可編輯的。要啟用編輯功能，請添加所需的編輯類型。Kendo UI jQuery Grid支持單元內、內聯和彈出編輯模式。為了使編輯功能完全起作用，請添加帶有Create按鈕和用于更新、銷毀操作的命令列工具欄。

下面的示例演示如何在incell編輯模式下為CRUD操作配置基本Grid。

// Incell editing.

  $("#grid").kendoGrid({
// To enable the insertion of new records, save or cancel changes.
toolbar: [ "create", "save", "cancel" ],
columns: [ "name",
// To trigger the in-cell destroy operation.
{ command: [ "destroy" ] }
],
dataSource: dataSource,
editable: true
});

以下示例演示如何以內聯或彈出編輯模式為CRUD操作配置基本Grid。

// Inline OR Popup editing.

  $("#grid").kendoGrid({
// To enable the insertion of new records.
toolbar: [ "create" ],
columns: [ "name",
// To trigger the inline or popup edit and destroy operations.
{ command: [ "edit", "destroy" ] }
],
dataSource: dataSource,
editable: "inline" // OR editable: { mode : "popup" }
});

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