原文：http://www.kaifazhe.com/jquery_school/177966.html
摘要: 不記得上篇文章是啥時候寫的了，似乎是沒有時間，或是精力，或是動力，或是真的沒有可寫的內容~ 在我們的人生道路上，走遠了就會發現學習然後總結以及分享，這個順序是那麼的理所當然，所以有了此齪文。 溫馨的PS：以下代碼需要有些js、jquery、html、css基礎...
不記得上篇文章是啥時候寫的了，似乎是沒有時間，或是精力，或是動力，或是真的沒有可寫的內容~
在我們的人生道路上，走遠了就會發現學習然後總結以及分享，這個順序是那麼的理所當然，所以有了此齪文。
溫馨的PS：以下代碼需要有些js、jquery、html、css基礎纔行哦！
最近對EasyUI感觸比較多，很久以前，我還沒聽說過EasyUI，後來由於工作需要，由於沒人教，所以自學了起來。因爲沒用過這些UI庫，所以一無所知，項目還是有點急的吧，至少不是很緩，於是乎就對其只是有了個大概瞭解罷了，使用起來感覺滿喫力的，當時主要就用到了datagrid，至於表單驗證之類的都是自己寫js來一個個判斷的。因爲出於對UI的理解，覺得這個庫主要提供界面的東西吧，呵呵，很膚淺吧。
最近看了看別人寫的EasyUI使用代碼，然後在此基礎上看了看官方的英文使用文檔，發現我以前僅僅只是牽強的用着其功能，並沒有發揮它的功用。當然現在我還並未精通，只是進步了不少，因而寫個總結，或者說想寫點啥吧，好滿足下自己。
1、以datagrid爲例，easyui的組件一般都有2種創建方式，一種是在html元素上添加專屬的class，讓easyui在頁面加載後自動渲染該元素成目標組件；另一種是通過js直接操作目標元素執行組件的專屬方法來渲染。如下所示：
<table class="easyui-datagrid" style="width:400px;height:250px" data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true"> <thead> <tr> <th data-options="field:'code',width:100">Code</th> <th data-options="field:'name',width:100">Name</th> <th data-options="field:'price',width:100,align:'right'">Price</th> </tr> </thead> </table>
<table id="dg"></table> <script> $('#dg').datagrid({ url:'datagrid_data.json', columns:[[ {field:'code',title:'Code',width:100}, {field:'name',title:'Name',width:100}, {field:'price',title:'Price',width:100,align:'right'} ]] }); </script>
個人覺得還是寫js靈活自如點啊。
每個js庫的使用細節或者說規則上還是有些差異的，至少以我目前的水平看它們，是如此的。如果要對datagrid進行操作，比如重新加載數據，那麼一般想來是調用reload方法，EasyUI的做法需要如此：
$('#dg').datagrid('reload');
看着有點古怪，調用方法跟傳參數似的，當時我就很難接受這樣的做法，但是要用它也沒辦法，只能如此啊。
對於datagrid的其他使用，建議看看官方文檔，還是蠻不錯的，有Demo，也有使用文檔，還有教程，還是比較全的，雖然是英文的，但是直接看看代碼還是蠻直接的，再回來看看英文也差不多瞭解了。
2、validatebox，這個就是驗證表單用的，聽說過html5沒，html5的表單就提供了幾個屬性，可以直接配置是否必填、驗證表單的正則表達式等功能。而這裏的這個validatebox也是類似的功能，通過和form的搭配使用，免去了繁瑣的js操作，當然並不是說很完美哦，呵呵，我是個執着於完美的人。
validatebox這個組件同樣提供2種方式來創建：
<input id="vv" class="easyui-validatebox" data-options="required:true,validType:'email'" />
<input id="vv" /> <script> $('#vv').validatebox({ required: true, validType: 'email' }); </script>
這裏的驗證類型是“email”，當然並不是說叫它email，它就知道這個驗證的對象是email地址類型了，名字只是形象化了，讓人一看明瞭，而這個email是EasyUI自帶的驗證類型，但其自帶的畢竟有限，難以滿足需求的變化，所以提供了擴展規則的方法：
<script> $.extend($.fn.validatebox.defaults.rules, { minLength: { validator: function(value, param){ return value.length >= param[0]; }, message: 'Please enter at least {0} characters.' } }); </script> <input class="easyui-validatebox" data-options="validType:'minLength[5]'">
這個還是蠻靈活的，能傳參，也能直接獲取文本框的值。當文本框失去焦點後就會自動觸發判斷，並提示信息出來。（圖就不截了，自己看Demo去！）
如果要手動出發的話，需要如此：
$('#vv').validatebox('validate');//觸發驗證
$('#vv').validatebox('isValid');//觸發驗證並返回true/false
對了，還能給一個表單，添加多個規則驗證呢，如下所示，js的話自己琢磨下吧，不錯的功能哦！不知道在驗證的同時能不能做些手腳呢？課後練習吧！
<input class="easyui-validatebox" data-options=" required:true, validType:['email','length[0,20]'] ">
4、可是，這個雖然便利了，但是form中一大堆表單項，一個個調用也是費力的，還要進行判斷呢……
所以有了form這個組件，這個針對的還是form標籤，這個同名的啊，估計純屬巧合，個人覺得怪怪的，有點混淆，難道是我沒理解？-_-!
這個組件的使用，在我看來是個特例了吧，似乎只能通過js來操作，但有兩種使用形式。
//轉換id爲ff的form爲組件 $('#ff').form({ url:..., onSubmit: function(){ //... }, success:function(data){ //。。。 } }); //在需要的時候提交 $('#ff').submit();
//轉換並立馬觸發提交事件 $('#ff').form('submit', { url:..., onSubmit: function(){ //... }, success:function(data){ //... } });
似乎跑題了，剛纔講到一大堆表單項要進行驗證來着。很簡單的啦，form說，既然它包養了表單項們，那麼這是就包在它身上了哈。
$('#ff').form('submit', {
url: ...,
onSubmit: function(){
var isValid = $(this).form('validate');//觸發form內的所有validatebox驗證，並返回true/false，這個你懂的！
return isValid;
},
success: function(){
//...
}
});
另外form組件還有個實用的功能：clear，即清空表單項數據。
時間過得真快啊，還有好多事要做呢，今天就到這裏了，其他大家自己摸索吧，人生也是一路摸索或冒險來的，我們要習慣它，不然生活還是得繼續啊，這就是人生吧，咱們沒有任何理由去浪費。當然在冒險結束後，豐厚的成果等待着我們。
學而時習之，不亦說乎？溫故而知新，不亦興乎？