本教程將為大家介紹如何逐步創(chuàng)建具有動態(tài)數(shù)據(jù)的KendoUI grids。當您在一遍又一遍輸入相同代碼時，可以知道有些是可以關閉的，您輸入的代碼正在獲取WET。創(chuàng)建具有動態(tài)數(shù)據(jù)的可編輯Kendo UI Grids是非常簡單的，Progress的技術支持工程師幫助很多客戶解決了有關動態(tài)數(shù)據(jù)的問題，并且提供了有關動態(tài)數(shù)據(jù)的建議，在本文中我們將會為大家一一解答。

 

 

3. 想要創(chuàng)建一個動態(tài)可編輯的Kendo UI Grid，我們首先需要在dataSource之前創(chuàng)建dataSource模式模型。在初始ajax請求的成功回調中，將示例dataItem傳遞給generateModel函數(shù)。 該功能完成兩個非常重要的任務：

檢查每個屬性的類型，以便網(wǎng)格可以初始化正確的編輯器。例如，數(shù)字類型將創(chuàng)建一個Kendo UI NumericTextBox，日期類型將在編輯模式下配備Kendo UI DatePicker。

查找唯一的模式模型ID，使其不可編輯。唯一ID是編輯功能的先決條件。

該功能可以擴展為包括其他模式模型設置，如驗證和默認值?；蛘吣梢允占掌陬愋偷淖侄蚊Q，以便稍后在列設置中進行格式化。

var dateFields = [];

 

function generateModel(sampleDataItem) {

var model = {};

var fields = {};

for (var property in sampleDataItem) {

if (property.indexOf("ID") !==-1) {

model["id"] = property;

}

 

var propType = typeofsampleDataItem[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. 現(xiàn)在我們有了模式模型，可以創(chuàng)建Kendo UI數(shù)據(jù)源。該函數(shù)應該接收基本URL和模型作為參數(shù)。由于服務遵循命名約定，因此可以使用CRUD操作輕松創(chuàng)建此動態(tài)數(shù)據(jù)源：

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;

}