010-68421378
sales@cogitosoft.com
当前您所在的位置:首页>新闻中心>新品发布

Kendo UI使用教程:Kendo UI Grid中的动态数据(三)

发布时间:2021/06/02 浏览量:404
Kendo UI使用教程:Kendo UI Grid中的动态数据(三)

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

}

});

}

具有单行代码的动态可编辑网格的结果初始化:

 

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

下一篇:Wowza transcoder的转码性能
上一篇:ASN1C ASN.1编译器

                               

 京公网安备 11010802021106号 | 京ICP证09015132号-70网络文化经营许可证京网文[2017]4225-497号 | 违法和不良信息举报电话:4006561155

                                   © Copyright 2000-2020 北京哲想软件有限公司版权所有 | 地址:北京市海淀区西三环北路50号豪柏大厦C2座11层1105室

                         北京哲想软件集团旗下网站:哲想软件 | 哲想动画

                            华滋生物