Kendo UI Grid中的動態數據（三）

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

【Kendo UI R3 2017最新版下載】

本教程將爲你們介紹如何逐步建立具備動態數據的Kendo UI grids。當您在一遍又一遍輸入相同代碼時，能夠知道有些是能夠關閉的，您輸入的代碼正在獲取WET。建立具備動態數據的可編輯Kendo UI Grids是很是簡單的，Progress的技術支持工程師幫助不少客戶解決了有關動態數據的問題，而且提供了有關動態數據的建議，在本文中咱們將會爲你們一一解答。

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

1 2 3 4 5 6 7 8 9 10 11

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函數，並將新生成的網格附加在其餘位置。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

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

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

1 2 3 4

<div id="products"></div> <script> createGrid("products", "https://demos.telerik.com/kendo-ui/service/products/"); </script>

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

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