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

2019独角兽企业重金招聘Python工程师标准>>>

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

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操作轻松创建此动态数据源：

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

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; }

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

转载于:https://my.oschina.net/u/2317468/blog/1551792