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

方法

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

 

2. （此步驟適用于可讀網(wǎng)格的只讀網(wǎng)格，請轉(zhuǎn)到步驟3.）當(dāng)然，只讀網(wǎng)格只需要較少復(fù)雜的邏輯。我們創(chuàng)建了一個(gè)簡單的函數(shù)，在初始ajax請求的成功處理程序中調(diào)用。 它增加了一些常用選項(xiàng)，其數(shù)據(jù)源只需要讀操作。

// 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”列占用很多空間，所以創(chuàng)建了另一個(gè)generateColumns函數(shù)，因此我們可以更改列配置，此時(shí)可以自定義所有列屬性。

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

};

})

}

此時(shí)，具有動態(tài)數(shù)據(jù)的只讀Kendo UI Grids已經(jīng)準(zhǔn)備好，為了向您展示使用上述功能是多么容易，我們添加了一個(gè)帶有三個(gè)按鈕的Kendo UI ToolBar。 當(dāng)按下每個(gè)按鈕時(shí)，點(diǎn)擊功能填充相應(yīng)的Kendo UI網(wǎng)格。