Kendo UI首推團隊升級培訓套包,享超低折扣!查看詳情>>>
本教程將爲大家介紹如何逐步創建具有動態數據的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;
} |