Kendo UI Grid中的动态数据（三）

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

【Kendo UI R3 2017最新版下载】

本教程将为大家介绍如何逐步创建具有动态数据的Kendo UI grids。当您在一遍又一遍输入相同代码时，可以知道有些是可以关闭的，您输入的代码正在获取WET。创建具有动态数据的可编辑Kendo UI Grids是非常简单的，Progress的技术支持工程师帮助很多客户解决了有关动态数据的问题，并且提供了有关动态数据的建议，在本文中我们将会为大家一一解答。

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请求和编写一个更抽象的主要逻辑，以便可以重复使用。

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