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

通过70多个可自定义的UI组件，Kendo UI Professional可以创建数据丰富的桌面、平板和移动Web应用程序。本教程将为大家介绍如何逐步创建具有动态数据的Kendo UI grids。

Kendo UI首推团队升级培训套包，享超低折扣！查看详情>>>

【Kendo UI R3 2017最新版下载】

方法

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

2. （此步骤适用于可读 格的只读 格，请转到步骤3.）当然，只读 格只需要较少复杂的逻辑。我们创建了一个简单的函数，在初始ajax请求的成功处理程序中调用。 它增加了一些常用选项，其数据源只需要读操作。

// add the grid options herefunction 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 neededvar 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 格。

购买正版授权的朋友可以点击”咨询在线客服”哦~~~