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

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

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

【Kendo UI R3 2017最新版下载】

5. 下一行是 格列。使用此功能自定义格式、宽度或其他列设置。

function generateColumns(sampleDataItem) {var columnNames = Object.keys(sampleDataItem);return columnNames.map(function(name) {var isIdField = name.indexOf("ID") !== -1;return {field: name,width: (isIdField 40 : 200),title: (isIdField "Id" : name)};});}

6. 这是最后一步。模式、数据源和列是已知的，我们可以初始化动态Kendo UI Grid。在我们的函数中，传递了初始化 格元素的ID，但是可以扩展createGrid函数，并将新生成的 格附加在其他位置。

function createGrid(gridName, baseUrl) {$.ajax({url: baseUrl,success: function(response) {var sampleDataItem = response[0];var model = generateModel(sampleDataItem);var dataSource = generateDataSource(baseUrl, model, editable);var columns = generateColumns(sampleDataItem);var gridOptions = {toolbar: ["create", "save", "cancel"],dataSource: dataSource,columns: columns,pageable: true,editable: editable,height: 450};columns.push({ command: "destroy", title: " ", width: 170 });$("#" + gridName).kendoGrid(gridOptions);}});}

<div id="products"></div><script>createGrid("products", "https://demos.telerik.com/kendo-ui/service/products/");</script>

这只是Kendo UI Grid中最基本的动态数据，还有很多可以做，可以根据需求扩展和插入。在这里创建的示例可以重复使用，以便节省您的时间和精力。当需要创建许多类似 格时——一个命名约定、一个额外单一的ajax请求和编写一个更抽象的主要逻辑，以便可以重复使用。

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