发布时间:2019-10-10
Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四个控件。Kendo UI for jQuery是创建现代Web应用程序的最完整UI库。
某些Kendo UI窗口小部件提供了编辑功能,该功能通过使用Kendo UI MVVM绑定使用特定的编辑器元素或与模型绑定的表单来实现。
以下小部件支持编辑功能:
支持编辑的Kendo UI小部件提供以下常用配置选项:
注意:一些小部件提供了其他可编辑选项,有关更多详细信息,请参阅特定的窗口小部件API文档。 例如Grid小部件可以使用editable.destroy选项禁用删除功能。
支持编辑的Kendo UI小部件提供以下常见事件:
注意:
要启用小部件的编辑功能:
这些方法主要适用于支持编辑的其他Kendo UI小部件。
您可以构建编辑器表单并将特定模型绑定到编辑器表单。
Kendo UI窗口小部件基于schema.model结构(更具体地说是字段集合)动态构建编辑器表单。
注意:
下表列出了可用的数据类型。
数据类型 | 编辑 | PARSER |
string | <input type="text" class="k-input k-textbox" name="fieldName" data-bind="value:fieldName"> |
Internal method. String conversion. |
number | kendo.ui.NumericTextBox | kendo.parseFloat() |
date | kendo.ui.DatePicker | kendo.parseDate() |
boolean | <input type="checkbox" name="fieldName" data-type="boolean" data-bind="checked:fieldName"> | Internal method. Boolean conversion. |
object | <input type="text" class="k-input k-textbox" name="fieldName" data-bind="value:fieldName"> | Not processed. The value is passed as is. |
下面的示例演示如何通过DataSource schema.model声明字段定义。
schema: {
model: {
id: "id",
fields: {
id: {
editable: false,
// A defaultValue will not be assigned (default value is false).
nullable: true
},
name: {
type: "string",
validation: { required: true }
},
price: {
// A NumericTextBox editor will be initialized in edit mode.
type: "number",
// When a new model is created, this default will be used.
defaultValue: 42
},
discontinued:{
// A checkbox editor will be initialized in edit mode.
type: "boolean"
},
created: {
// A date picker editor will be initialized in edit mode.
type: "date"
},
supplier: {
type: "object" ,
defaultValue: { companyName: "Progress", companyId: 1 }
}
}
}
}
注意:Kendo UI Scheduler具有静态模型结构,并且仅遵循预定义的模型字段列表。 要编辑其他字段,请使用自定义编辑器模板。
自动生成的编辑器表单通过Kendo UI MVVM模式绑定到模型,该小部件还允许您使用自定义编辑器模板覆盖此表单。
创建表单后,小部件将执行以下操作:
注意:编辑器表单是在触发编辑事件之前创建并绑定的,并且已经被填充。
触发edit事件后,小部件将获取相应的模型,并通过Kendo UI MVVM模式将生成的或自定义编辑器表单绑定到该模型。 通过使用值绑定来完成模型字段和表单编辑器之间的连接。
此连接遵守以下规则:
Kendo UI R3 2019全新发布,最新动态请持续关注Telerik中文网!
扫描关注慧聚IT微信公众号,及时获取最新动态及最新资讯