Kendo UI使用教程:Kendo UI Grid中的動態資料(二)

AABBbaby發表於2017-10-17

Kendo UI首推團隊升級培訓套包,享超低折扣!檢視詳情>>>

Kendo UI R3 2017最新版下載

本教程將為大家介紹如何逐步建立具有動態資料的Kendo UI grids。當您在一遍又一遍輸入相同程式碼時,可以知道有些是可以關閉的,您輸入的程式碼正在獲取WET。建立具有動態資料的可編輯Kendo UI Grids是非常簡單的,Progress的技術支援工程師幫助很多客戶解決了有關動態資料的問題,並且提供了有關動態資料的建議,在本文中我們將會為大家一一解答。

3. 想要建立一個動態可編輯的Kendo UI Grid,我們首先需要在dataSource之前建立dataSource模式模型。在初始ajax請求的成功回撥中,將示例dataItem傳遞給generateModel函式。 該功能完成兩個非常重要的任務:

  • 檢查每個屬性的型別,以便網格可以初始化正確的編輯器。例如,數字型別將建立一個Kendo UI NumericTextBox,日期型別將在編輯模式下配備Kendo UI DatePicker。
  • 查詢唯一的模式模型ID,使其不可編輯。 唯一ID是編輯功能的先決條件。

該功能可以擴充套件為包括其他模式模型設定,如驗證和預設值。或者您可以收集日期型別的欄位名稱,以便稍後在列設定中進行格式化。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
var dateFields = [];
 
function generateModel(sampleDataItem) {
var model = {};
var fields = {};
for (var property in sampleDataItem) {
if (property.indexOf("ID") !== -1) {
model["id"] = property;
}
 
var propType = typeof sampleDataItem[property];
if (propType === "number") {
fields[property] = {
type: "number"
};
if(model.id === property){
fields[property].editable = false;
}
else if (propType === "boolean") {
fields[property] = {
type: "boolean"
};
else if (propType === "string") {
var parsedDate = kendo.parseDate(sampleDataItem[property]);
if (parsedDate) {
fields[property] = {
type: "date"
};
dateFields[property] = true;
}
}
}
 
model.fields = fields;
 
return model;
}

4. 現在我們有了模式模型,可以建立Kendo UI資料來源。該函式應該接收基本URL和模型作為引數。 由於服務遵循命名約定,因此可以使用CRUD操作輕鬆建立此動態資料來源:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
function generateDataSource(baseURL, model) {
var dataSource = {
transport: {
read: {
url: baseURL
},
create:{
url: baseURL + "Create"
},
update:{
url: baseURL + "Update"
},
destroy:{
url: baseURL + "Destroy"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
batch:true,
schema: {
model:model
},
pageSize: 10
};
 
return dataSource;
}

相關文章