kendoUI 简单增删改查

原文链接: http://www.cnblogs.com/dyc-zlj/p/4977645.html

1  目前学习主要基于kendoUI英文API文档(http://docs.telerik.com/kendo-ui/introduction)

2  在已经搭建的MVC+EF+kendo UI的基础上实现Kendo UI增删改查功能

3 增删改查代码示例:

   3-1:主要展示前台实现代码,因为后台代码不是唯一,可自行配置,返回JSON数据

   3-1:html代码如下

    3-1-1:查询和列表展示 HTML代码,列表展示只需要一个div标签 ,如下(div id="grid">

)

    kendoUI 简单增删改查_第1张图片

   3-1-2:添加/编辑 此处作为dialog模式将编辑页面与上面列表页面放在一起,初始化隐藏,主要通过 data-bind="value:Year"这样的属性

绑定实体类中的字段。通过events绑定按钮点击事件

2kendoUI 简单增删改查_第2张图片

 3-2 js代码实现:

  3-2-1:按需加载,引入页面需要用到的js代码,css代码可在前台自行引入,本示例中采用母版页已经将必要css加载完毕。

  

  3-2-2:绑定grid数据列表

kendoUI 简单增删改查_第3张图片

    3-2-2:绑定grid数据列表,通过gridDataSource方法获取数据,并实现分页,查询在data中传递查询条件

kendoUI 简单增删改查_第4张图片

3-2-3 删除功能 此处通过绑定前台button的click事件 对数据进行删除,支持批量删除 获取选中的行,取出Id 根据拼接Id 删除 如(1,2,3..)

kendoUI 简单增删改查_第5张图片

 

3-2-4:添加 or 编辑 

  1弹层  定义dialog 大小以及左上角提示文字

kendoUI 简单增删改查_第6张图片

2 执行编辑或添加的代码

kendoUI 简单增删改查_第7张图片

 

 总结:使用kendoUI可控制浏览器兼容,并实现美观,操作简便的数据展示以及操作。

  此处只记录简单增删改查工能,详细的在api文档中,对于kendoGrid还有很多其他特性,如行内编辑,单元格编辑...

 

转载于:https://www.cnblogs.com/dyc-zlj/p/4977645.html

你可能感兴趣的:(kendoUI 简单增删改查)