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

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