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

· 批量編輯

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

· 彈出式編輯

· 自定義編輯

 

入門指南

要啟用編輯：

· 熟悉Kendo UI中常見編輯概念

· 配置Grid的數(shù)據(jù)源

· 通過schema配置定義字段

· 設置editable選項

 

配置數(shù)據(jù)源

下面的示例演示如何為CRUD（創(chuàng)建、讀取、更新、銷毀）數(shù)據(jù)操作配置數(shù)據(jù)源。

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中定義數(shù)據(jù)項的id字段，這樣可以確保正確添加、編輯和刪除項目。

· 定義字段的數(shù)據(jù)類型來利用內(nèi)置編輯器、可過濾的UI以及正確的排序、過濾和分組功能。

下圖列出了可用的數(shù)據(jù)類型：

 

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是不可編輯的。要啟用編輯功能，請?zhí)砑铀璧木庉嬵愋?。Kendo UI jQuery Grid支持單元內(nèi)、內(nèi)聯(lián)和彈出編輯模式。為了使編輯功能完全起作用，請?zhí)砑訋в蠧reate按鈕和用于更新、銷毀操作的命令列工具欄。

下面的示例演示如何在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
});

 

以下示例演示如何以內(nèi)聯(lián)或彈出編輯模式為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" }
});