Kendo UI for jQuery網(wǎng)格使用教程：編輯概述

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應(yīng)用程序的最完整UI庫。

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

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

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

入門指南

要啟用編輯：

• 熟悉Kendo UI中常見編輯概念
• 配置Grid的數(shù)據(jù)源
• 通過schema配置定義字段
• 設(shè)置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 }
}
}
}
}
});

設(shè)置可編輯選項

默認(rèn)情況下，Grid是不可編輯的。要啟用編輯功能，請?zhí)砑铀璧木庉嬵愋汀endo 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" }
});

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