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

来源：互联网发布：腾讯云与阿里云对比编辑：程序博客网时间：2024/05/22 07:53

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是编辑功能的先决条件。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
vardateFields = [];
 
functiongenerateModel(sampleDataItem) {
varmodel = {};
varfields = {};
for(varproperty insampleDataItem) {
if(property.indexOf("ID") !== -1) {
model["id"] = property;
}
 
varpropType = typeofsampleDataItem[property];
if(propType === "number") {
fields[property] = {
type: "number"
};
if(model.id === property){
fields[property].editable = false;
}
} elseif (propType === "boolean") {
fields[property] = {
type: "boolean"
};
} elseif (propType === "string") {
varparsedDate = kendo.parseDate(sampleDataItem[property]);
if(parsedDate) {
fields[property] = {
type: "date"
};
dateFields[property] = true;
}
}
}
 
model.fields = fields;
 
returnmodel;
}

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

functiongenerateDataSource(baseURL, model) {
vardataSource = {
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
};
 
returndataSource;
}

阅读全文

0 0