Kendo UI Grid中的動態資料（三）

AABBbaby發表於2017-10-19
UI

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請求和編寫一個更抽象的主要邏輯，以便可以重複使用。

購買正版授權的朋友可以點選"諮詢線上客服"哦~~~

相關文章