Kendo UI首推团队升级培训套包,享超低折扣!查看详情>>>
【Kendo UI R3 2017最新版下载】
本教程将为大家介绍如何逐步创建具有动态数据的Kendo UI grids。当您在一遍又一遍输入相同代码时,可以知道有些是可以关闭的,您输入的代码正在获取WET。创建具有动态数据的可编辑Kendo UI Grids是非常简单的,Progress的技术支持工程师帮助很多客户解决了有关动态数据的问题,并且提供了有关动态数据的建议,在本文中我们将会为大家一一解答。
5. 下一行是网格列。使用此功能自定义格式、宽度或其他列设置。
1 2 3 4 5 6 7 8 9 10 11 | 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函数,并将新生成的网格附加在其他位置。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | 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); } }); } |
具有单行代码的动态可编辑网格的结果初始化:
这只是Kendo UI Grid中最基本的动态数据,还有很多可以做,可以根据需求扩展和插入。在这里创建的示例可以重复使用,以便节省您的时间和精力。当需要创建许多类似网格时——一个命名约定、一个额外单一的ajax请求和编写一个更抽象的主要逻辑,以便可以重复使用。
购买正版授权的朋友可以点击"咨询在线客服"哦~~~
![e630c68f30b54d978e521499c173446d636440053220031253.png](https://image.evget.com//Content/files/2017/10/19/e630c68f30b54d978e521499c173446d636440053220031253.png)