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

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

【Kendo UI R3 2017最新版下載】

方法

1. 創建與控制器操作一致命名的后端，例如：

2. （此步驟適用于可讀網格的只讀網格，請轉到步驟3.）當然，只讀網格只需要較少復雜的邏輯。我們創建了一個簡單的函數，在初始ajax請求的成功處理程序中調用。 它增加了一些常用選項，其數據源只需要讀操作。

// add the grid options here
function 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 needed
var grid = $("#grid").data("kendoGrid");
if(grid){
grid.setOptions(gridOptions);
} else {
$("#grid").kendoGrid(gridOptions);
}
}

由于不希望“ID”列占用很多空間，所以創建了另一個generateColumns函數，因此我們可以更改列配置，此時可以自定義所有列屬性。

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網格。

購買正版授權的朋友可以點擊""哦~~~