Kendo UI使用小小记

之所以说小小记,是因为我根本没有好好用它,只是正好前些日子接触了一下,觉得还不错,随手记记~

契机

我从加入现在这个公司以来,半专业的承担了很多前端相关的事情,用过不少前端框架,也为框架和原生的页面写了不少部件和功能,对于IE系列浏览器的憎恶也与日俱增。“每个程序员都有一个框架梦”,我一直也想着要写一个适用于自己和自己公司的前端框架,同事和领导有时候也会这么对我期望,而我自己很清楚,没有时间没有精力其实都是借口,最大的问题,还是没有能力没有经验。

我是jQuery派,当然MooTools、Dojo等之类的也很棒,用jQuery只是机缘巧合,不过迄今为止它还很好用很够用,所以估计很长一段时间内我都会用下去的。jQuery的插件多的数不清楚,UI框架也很多很多,如果一下子问我哪个比较好,我可说不上来,不过有个挺冷门的jquerytools,非常小非常精致,感觉还不错。但是它只是几个部件,功能太少(它其实也就是标榜html缺少的几个功能控件而已),不好叫UI框架。像大型的jQuery UI,easyUI,DWZ等等,当然也都不错啦,至少我还做不出来。Kendo其实早有耳闻,一直没有用,这次快速制作一个小区管理系统后台,打算用这个来试试手。

感谢新买了一个博客控件,否则这些东西我大概只会写在Evernote里了 ??

过程

我并没有用过Kendo的所有控件,Kendo也不是开源免费的,事实上如果真正用好像是要购买的,不过这次是试做学习,应该没事儿。它的官网上面可以免费下载Web的试用版,至于PHP/ASP/Java的Wrapper,我还真不太需要。

上手

Kendo的中文资料很少,好在官网上的例子比较全,文档也还足够,引入JS和CSS文件便可以工作了。而且这个框架居然对IE7也提供支持,挺厉害的了(Bootstrap1也是从IE7开始,2就从IE9开始了,考虑海量的“低端用户”,在不影响整体效率的前提下,低版本浏览器的支持肯定还是欢迎的),我以前咋感觉是HTML5的框架,难道记错了?

记录

    • DataSource的增删改查一定使用JSON类型返回
      用jQuery的ajax功能,其实jQuery帮我们做了很多事情,导致接触其他框架的时候可能会让一些不明就里的人不知所措。比方说,jQuery的AJAX上传时会自动打开“application/x-www-form-urlencoded”,这样上传的数据会很自然的被服务器解析,然而“Request Payload”才是最基本的类型,很多初用Angular.js的孩子就会被这事情搞得目瞪口呆 ?? 同样的,jQuery会自动解析长得像JSON的返回内容,只要你告诉jQuery服务器会返回JSON数据,不管返回类型是plain/text还是html什么的。然而KendoUI不行,他的DataSource是所有数据控件的基础,很厉害,但是它只接受application/json类型的返回,和jQuery处惯的孩子可能受不了,第一个坑~
    • Upload的取消上传/带参数/取消初始化文件
      Upload组件的非刷新模式,可以检测文件的类型啊大小啥的,upload函数会在正式上传被执行做一些检查,如果不符合,可以取消上传。我这里习惯了jQuery的return false取消事件的写法。然而却没有效果,一度让我感觉这东西是不是不靠谱?后来才发现,必须使用传入的事件参数上调用preventDefault才有用。。。这也算是个坑吧~
      还有,Upload可以初始化几个文件显示在文件列表上面,但是却没有提供方法修改文件列表?不得已只能使用remove去掉DOM,不够强大了。
    • MultiSelect
      Kendo的Datasource相当复杂,我这次主要使用它的DataGrid部件,所以和Datasource打了不少交道。MultiSelect也是使用DataSource绑定显示候选项的,我没发现类似jQuery UI的“第二候选项”的功能。对中文来说,其实是很正常的功能,我们只输入拼音字母,然后可以自动显示对应的候选项…… 暂未发现,因为没有好好看过文档~
      另外,我实际使用中发现有无法弹出自动补齐列表的情况,后来换了一种参数使用的方法,就好了,可惜没有立刻记录,现在有点回忆不起来了
    • DataGrid
      除去图表,这个应该是KendoUI的精华所在吧。大量的企业应用其实就是增删改查,一个Grid全部搞定~ 而且还有外键绑定,详情页面,排序过滤功能,全都可以本地完成,配合快到不像话的Chrome浏览器,世界真是美好哇。不过KendoUI没有提供很好的方法实现国际化。。。写在参数里自然是可以,但是非常非常麻烦。语言文件的js只是日历的翻译,最后没办法,直接改了core,不更新就是了~
      追加一个,DataGrid上自定义command的图标可以用imageClass指定,文档上没有……
时间: 2024-10-07 21:10:09

Kendo UI使用小小记的相关文章

Kendo UI for jQuery使用教程:使用MVVM初始化(一)

[Kendo UI for jQuery最新试用版下载] 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库. 您可以通过数据属性或基于自定义HTML属性初始化和配置每个Kendo UI小部件. Kendo UI混合应用程序.单页面应用程序(SPA)视

开发的Web应用界面太难看?Kendo UI R1 2020工具全新发布帮你忙

Kendo UI for jQuery R1 2020试用版下载 2020年,Kendo UI全新出发,发布R1 2020!此版本在Kendo UI bundle包中的所有库中进行了一些更新,包括jQuery,Angular,React和Vue UI库!本系列文章将着重为大家这些库中更新的重点内容,欢迎持续关注哦~ jQuery 新组件 新组件:Breadcrumb Kendo UI jQuery Breadcrumb组件为开发人员提供一个简单直观的界面,可在各层次的导航层次之间移动.Bread

Kendo UI for jQuery使用教程:小部件DOM元素结构

[Kendo UI for jQuery最新试用版下载] 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库. 所有Web Kendo UI小部件都保留对元素和封装DOM元素的引用,并且所有混合Kendo UI小部件仅保留对元素DOM元素的引用. el

kendo ui 好用的小部件--grid

Kendo Ui Grid控件,继承至Widget. https://demos.telerik.com/kendo-ui/grid/index  快速上手教程  下面的代码来自本教程 做表格时非常方便,具有非常强大的功能: <div id="grid"></div> <script> $(document).ready(function () { $("#grid").kendoGrid({ dataSource: { //数据

Kendo UI Grid 模型绑定

开篇 接触 Asp.net MVC 时间较长的童鞋可能都会了解过模型绑定(Model Binding),而且在一些做 Web 项目的公司或是Team面试中也经常会被问到.项目中有很多 Action 中都使用了自定义的模型绑定,但是业务逻辑太过复杂不适合做为例子与大家分享,而今天在做一个 Kendo UI 的功能时觉得可以用 Kendo UI 做为例子与大家分享与探讨一个典型的 Model Binding 的过程. 写的比较随性,欢迎大家讨论及拍砖! 背景介绍 Kendo UI: 它是一个非常出名

Kendo UI 使用札记

AutoComplete // html <input class="chooseCountry" type="text"/> // js $(document).ready(function () { var data = [ "中国", "中国台湾", "中国断臂山", "日本", "台湾" ]; //create AutoComplete UI co

Kendo UI常用示例汇总(六)

Kendo UI Professional 提供开源和商业两个版本.开源版 Kendo UI Core,有40+个框架和组件:商业版整合了之前的Kendo UI Web.Kendo UI Mobile 和 Kendo UI DataViz ,一共有70+个框架和组件.作为Kendo UI的升级版,Kendo UI Professional既可以开发网页版应用程序,也可以开发移动版应用程序,并且在性能上也有显著的优化和提升. Kendo UI Professional试用版下载猛戳>> Kend

Kendo UI Professional Q3 2015正式发布[附下载]

日前,Kendo UI Professional正式发布Q3 2015发版本,新版本集成了Web组件.新增滚动选项等,同时还修复了一系列小bug. 立即下载最新版本:Kendo UI Professional Kendo UI集合了创建现代Web和移动应用所需的所有功能.整个包包含70+基于jQuery的响应式UI组件,一个MVVM框架,自定义主题.模板等等.不仅如此,Kendo UI Professional整合了之前的Kendo UI Web.Kendo UI Mobile 和 Kendo

Kendo UI Professional Q3 2015 Beta发布[附下载]

日前,Kendo UI Professional正式发布Q3 2015 Beta发版本,新版本集成了Web组件.新增布局图元素.为甘特图新增响应式操作等,同时还修复了一系列小bug. 立即下载最新版本:Kendo UI Professional Kendo UI集合了创建现代Web和移动应用所需的所有功能.整个包包含70+基于jQuery的响应式UI组件,一个MVVM框架,自定义主题.模板等等.不仅如此,Kendo UI Professional整合了之前的Kendo UI Web.Kendo