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

使用教程 | 作者:八哥 | 2017-10-17 10:17:50| 阅读 0 有用 (0) 评论 (0) 收藏


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

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

Kendo UI R3 2017最新版下载

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

3. 想要创建一个动态可编辑的Kendo UI Grid,我们首先需要在dataSource之前创建dataSource模式模型。在初始ajax请求的成功回调中,将示例dataItem传递给generateModel函数。 该功能完成两个非常重要的任务:

  • 检查每个属性的类型,以便网格可以初始化正确的编辑器。例如,数字类型将创建一个Kendo UI NumericTextBox,日期类型将在编辑模式下配备Kendo UI DatePicker。
  • 查找唯一的模式模型ID,使其不可编辑。 唯一ID是编辑功能的先决条件。

该功能可以扩展为包括其他模式模型设置,如验证和默认值。或者您可以收集日期类型的字段名称,以便稍后在列设置中进行格式化。

var dateFields = [];

function generateModel(sampleDataItem) {
var model = {};
var fields = {};
for (var property in sampleDataItem) {
if (property.indexOf("ID") !== -1) {
model["id"] = property;
}

var propType = typeof sampleDataItem[property];
if (propType === "number") {
fields[property] = {
type: "number"
};
if(model.id === property){
fields[property].editable = false;
}
} else if (propType === "boolean") {
fields[property] = {
type: "boolean"
};
} else if (propType === "string") {
var parsedDate = kendo.parseDate(sampleDataItem[property]);
if (parsedDate) {
fields[property] = {
type: "date"
};
dateFields[property] = true;
}
}
}

model.fields = fields;

return model;
}

4. 现在我们有了模式模型,可以创建Kendo UI数据源。该函数应该接收基本URL和模型作为参数。 由于服务遵循命名约定,因此可以使用CRUD操作轻松创建此动态数据源:

function generateDataSource(baseURL, model) {
var dataSource = {
transport: {
read: {
url: baseURL
},
create:{
url: baseURL + "Create"
},
update:{
url: baseURL + "Update"
},
destroy:{
url: baseURL + "Destroy"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
batch:true,
schema: {
model:model
},
pageSize: 10
};

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

慧都控件|提供软件技术整体解决方案

云集全球三千余款优秀控件、软件产品,提供行业领先的咨询、培训与开发服务
企业QQ:800018081|电话:023-68661681

用户评论: 您的宝贵经验,能为更多人带来帮助,登录后才能评论。
评论加载中...



    联系我们


    官方微信
    官方微博