加载中…
个人资料
哲想软件
哲想软件
  • 博客等级:
  • 博客积分:0
  • 博客访问:310,079
  • 关注人气:22
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
相关博文
推荐博文
正文 字体大小:

KendoUIforjQuery使用教程:编辑功能(一)

(2020-09-11 11:20:35)

Kendo UI目前最新提供KendoUI for jQuery、KendoUI for Angular、KendoUI Support for React和KendoUI Support for Vue四个控件。Kendo UI for jQuery是创建现代Web应用程序的完整UI库。


KendoUIforjQuery使用教程:编辑功能(一)


某些Kendo UI窗口小部件提供了编辑功能,该功能通过使用Kendo UI MVVM绑定使用特定的编辑器元素或与模型绑定的表单来实现。

以下小部件支持编辑功能:

  • Kendo UI Grid
  • Kendo UI ListView
  • Kendo UI TreeList
  • Kendo UI Scheduler
  • Kendo UI Gantt


入门指南

支持编辑的Kendo UI小部件提供以下常用配置选项:

  • editable—控制是否启用编辑。     例如默认情况下,Kendo     UI Grid小部件中的编辑功能是禁用的。
  • editable.template—允许您定义自定义编辑器模板。

注意:一些小部件提供了其他可编辑选项,有关更多详细信息,请参阅特定的窗口小部件API文档。 例如Grid小部件可以使用editable.destroy选项禁用删除功能。

支持编辑的Kendo UI小部件提供以下常见事件:

  • edit—在显示编辑器表单之前触发,UI元素已绑定到模型。
  • save—在保存模型之前触发,编辑表单仍处于打开状态。

remove—在删除模型之前触发。

  • 注意
  • 只有Scheduler和Gantt支持防止edit、save和remove事件。
  • 这些小部件仅使用一种编辑器形式,它为create和update操作应用相同的编辑器模板。
  • 要启用小部件的编辑功能:
  1. 配置数据源的CRUD(创建,读取,更新,销毁)数据操作。
  2. 使用schema.model选项定义模型字段。
  3. 启用editable选项。
  4. 这些方法主要适用于支持编辑的其他Kendo UI小部件。


使用编辑器表单

您可以构建编辑器表单并将特定模型绑定到编辑器表单。


构建编辑器表单

Kendo UI窗口小部件基于schema.model结构(更具体地说是字段集合)动态构建编辑器表单。

注意

KendoUIforjQuery使用教程:编辑功能(一)

  • 在schema.model.id中定义数据项的id字段,这样可以确保正确添加、编辑和删除项目。
  • 定义字段的数据类型来利用内置编辑器,可过滤的UI以及正确的排序、过滤和分组功能。

下表列出了可用的数据类型。

下面的示例演示如何通过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模式绑定到模型,该小部件还允许您使用自定义编辑器模板覆盖此表单。

创建表单后,小部件将执行以下操作:

  1. 将编辑器字段绑定到模型。
  2. 触发edit事件。
  3. 显示编辑器表单。
  4. 根据在编辑器中所做的更改来更新模型。
  5. 当编辑器表单即将关闭时,小部件将触发save事件。在此阶段,更改可以被接受或拒绝。


注意:编辑器表单是在触发编辑事件之前创建并绑定的,并且已经被填充。


将特定模型绑定到编辑器表单

触发edit事件后,小部件将获取相应的模型,并通过Kendo UI MVVM模式将生成的或自定义编辑器表单绑定到该模型。通过使用值绑定来完成模型字段和表单编辑器之间的连接。

此连接遵守以下规则:

  • 初始加载时,将使用模型值填充编辑器表单。
  • 当相关编辑器触发change事件时,将更新模型,值绑定获取其值并填充模型字段。
  • 使用ObservableObject  API时,表单编辑器会更新。    
  • 如果要更新相应的UI编辑器,请使用set方法。 如果省略此API,则编辑器不会更改。






公司名称:北京哲想软件有限公司

北京哲想软件官方网站:www.cogitosoft.com

北京哲想软件微信公众平台账号:cogitosoftware

北京哲想软件微博:哲想软件

北京哲想软件邮箱:sales@cogitosoft.com

联系方式: 86(010)68421378

俞先生: 微信:18610247936  QQ:368531638

0

阅读 评论 收藏 转载 喜欢 打印举报/Report
  • 评论加载中,请稍候...
发评论

    发评论

    以上网友发言只代表其个人观点,不代表新浪网的观点或立场。

      

    新浪BLOG意见反馈留言板 电话:4000520066 提示音后按1键(按当地市话标准计费) 欢迎批评指正

    新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 会员注册 | 产品答疑

    新浪公司 版权所有