kendoUI笔记

514 阅读2分钟
  1. 两种方式生成组件(必须基于HTML原生元素)。jQuery插件方式和data-role 加init方法。

  2. 使用data属性初始化。或者创建组件时传递配置对象。

  3. 获取组件的引用后,可以调用组件的方法。

  4. 监听Kendoui事件有两种方式。配置对象内和bind方法。autocomplete.bind("change", autocomplete_change);

  5. 事件处理函数在事件发生时被调用,该事件处理函数的传入参数包含了事件相关的 JavaScript 对象, 你可以通过 sender 参数获得触发该事件的 UI 组件的引用 var autocomplete = e.sender; 可以使用 this 关键字来获取触发事件的 UI 对象引用

  6. 可以在回调函数中调用组件的自带方法。

  7. 一般的查询界面都会包含一个查询的表单,以及一个数据展示的grid(包含database)。

  8. 查询表单数据一般需要绑定在viewModel中,在查询数据时,将viewModel中的值传递到后台去

  9. 表单验证采用的是kendoUI提供的kendoValidator组件来验证

  10. grid和服务端的数据交互统一采用json格式

{
success:true,
rows[{},{}],
total:10}
  1. KendoUI的MVVM实现组件和数据源的无缝结合,进而实现Form表单(没有表单组件)。定义表单,由 KendoUI 的组件和 Bootstrop 的栅格布局组成。

MVVM即Model View View-Model,是一种设计模式,用来对Model层和View层进行分层,View-Model负责暴露数据层和视图层交互的数据。首先,创建一个View-Model对象,其中的Model根据你的数据产生。我们在这里定义供组件调用的函数。

把 View 和 View-Model 进行绑定。kendo.bind()

介绍的 dataSource ,<div id="page-content">和 viewModel。

dataSource 是我们从后台获得的数据。<div id="page-content"> 是一个父级标签, toolbar 按钮组,form 表单和 grid 表格等都是其子标签,他们共用同一数据。

KendoUI 中的文本框通过 data-role="maskedtextbox"class="k-textbox" 实现样式,通过 data-bind="value:model.myId"实现绑定数据。

自定义新建和编辑的弹窗时 在跳转到该页面后再进行判断是新建还是编辑 第二部分是跳转页面部分。首先进行是否传入参数的判断

kendo UI中,不管是头数据还是行数据都绑定在viewModel的model中。所以在提交行数据(即grid数据)时,把model里的数据传到后台即可。其他操作跟非头行结构的一样。

  1. Kendo UI 提供两种验证方式,一种为表单验证,一种为表格验证。