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指定，文檔上沒有……