Kendo UI使用教程：Kendo UI Grid中的動態數據（二）

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; }

購買正版受權的朋友能夠點擊"諮詢在線客服"哦~~~