原文: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,即清空表單項數據。
時間過得真快啊,還有好多事要做呢,今天就到這裏了,其他大家自己摸索吧,人生也是一路摸索或冒險來的,我們要習慣它,不然生活還是得繼續啊,這就是人生吧,咱們沒有任何理由去浪費。當然在冒險結束後,豐厚的成果等待着我們。
學而時習之,不亦說乎?溫故而知新,不亦興乎?