Kendo UI首推團隊升級培訓(xùn)套包，享超低折扣！查看詳情>>>

【Kendo UI R3 2017最新版下載】

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

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

• 檢查每個屬性的類型，以便網(wǎng)格可以初始化正確的編輯器。例如，數(shù)字類型將創(chuàng)建一個Kendo UI NumericTextBox，日期類型將在編輯模式下配備Kendo UI DatePicker。
• 查找唯一的模式模型ID，使其不可編輯。 唯一ID是編輯功能的先決條件。

該功能可以擴展為包括其他模式模型設(shè)置，如驗證和默認(rèn)值。或者您可以收集日期類型的字段名稱，以便稍后在列設(shè)置中進行格式化。

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. 現(xiàn)在我們有了模式模型，可以創(chuàng)建Kendo UI數(shù)據(jù)源。該函數(shù)應(yīng)該接收基本URL和模型作為參數(shù)。 由于服務(wù)遵循命名約定，因此可以使用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;
}

購買正版授權(quán)的朋友可以點擊""哦~~~