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

AABBbaby發表於2017-10-13
UI

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

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

【Kendo UI R3 2017最新版下載】

方法

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 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函式，因此我們可以更改列配置，此時可以自定義所有列屬性。

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

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

相關文章