本教程將爲大家介紹如何逐步創建具有動態數據的Kendo UI grids。當您在一遍又一遍輸入相同代碼時，可以知道有些是可以關閉的，您輸入的代碼正在獲取WET。創建具有動態數據的可編輯Kendo UI Grids是非常簡單的，Progress的技術支持工程師幫助很多客戶解決了有關動態數據的問題，並且提供了有關動態數據的建議，在本文中我們將會爲大家一一解答。
方法
1. 創建與控制器操作一致命名的後端，例如：
2. （此步驟適用於可讀網格的只讀網格，請轉到步驟3.）當然，只讀網格只需要較少複雜的邏輯。我們創建了一個簡單的函數，在初始ajax請求的成功處理程序中調用。 它增加了一些常用選項，其數據源只需要讀操作。
|
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
|
// add the grid options herefunction populateGrid(response) {
var columns = generateColumns(response);
var gridOptions = {
dataSource: {transport:{read: function(options){
options.success(response);}},pageSize: 10,page: 1},columns: columns,pageable: true,
height:300};// reuse the same grid, swapping its options as neededvar grid = $("#grid").data("kendoGrid");
if(grid){
grid.setOptions(gridOptions);} else {
$("#grid").kendoGrid(gridOptions);
}} |
由於不希望“ID”列佔用很多空間，所以創建了另一個generateColumns函數，因此我們可以更改列配置，此時可以自定義所有列屬性。
|
1
2
3
4
5
6
7
8
9
10
11
|
function generateColumns(response){
var columnNames = Object.keys(response[0]);
return columnNames.map(function(name){
var isIdColumn = name.indexOf("ID") > -1 || name.indexOf("Id") > -1;
return {
field: name,width: isIdColumn ? 50 : 180,title: isIdColumn ? "Id" : name
};})} |
此時，具有動態數據的只讀Kendo UI Grids已經準備好，爲了向您展示使用上述功能是多麼容易，我們添加了一個帶有三個按鈕的Kendo UI ToolBar。 當按下每個按鈕時，點擊功能填充相應的Kendo UI網格。
