Kendo UI使用教程：Kendo UI Grid中的动态数据（一）

阅读更多

本教程将为大家介绍如何逐步创建具有动态数据的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网格。