首页 > 代码库 > Kendo UI使用小小记

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指定,文档上没有……

Kendo UI使用小小记