Kendo UI使用教程：Kendo UI Grid中的動態資料（三）

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

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

5. 下一行是網格列。 使用此功能自訂格式、寬度或其他列設置。

function generateColumns(sampleDataItem) {var columnNames = Object.keys(sampleDataItem);return columnNames.map(function(name) {var isIdField = name.indexOf("ID") !== -1;return {field: name,width: (isIdField ? 40 : 200),title: (isIdField ? "Id" : name)};});}

6. 這是最後一步。 模式、資料來源和列是已知的， 我們可以初始化動態Kendo UI Grid。

在我們的函數中， 傳遞了初始化網格元素的ID， 但是可以擴展createGrid函數， 並將新生成的網格附加在其他位置。

function createGrid(gridName, baseUrl) {$.ajax({url: baseUrl,success: function(response) {var sampleDataItem = response[0];var model = generateModel(sampleDataItem);var dataSource = generateDataSource(baseUrl, model, editable);var columns = generateColumns(sampleDataItem);var gridOptions = {toolbar: ["create", "save", "cancel"],dataSource: dataSource,columns: columns,pageable: true,editable: editable,height: 450};columns.push({ command: "destroy", title: " ", width: 170 });$("#" + gridName).kendoGrid(gridOptions);}});}

具有單行代碼的動態可編輯網格的結果初始化：

這只是Kendo UI Grid中最基本的動態資料， 還有很多可以做， 可以根據需求擴展和插入。 在這裡創建的示例可以重複使用， 以便節省您的時間和精力。 當需要創建許多類似網格時——一個命名約定、一個額外單一的ajax請求和編寫一個更抽象的主要邏輯， 以便可以重複使用。