本文檔內容包括easyui的引入和easyui的使用實踐,編寫該文檔的目的,主要爲了給下次須要使用的easyui的同事作參考,提升開發效率。javascript
項目中使用EasyUI版本爲1.3.3版本其中中自帶了Jquery的庫,版本是V2.0.0,請注意該版本不必定適用於你的項目場景,關於Jquery V2.0.0對IE瀏覽器的支持也是每個開發人員須要注意的。Jquery V2.0.0支IE9+。爲了統一項目中的jquery版本,因此就把easyui自帶的jquery版本換成項目中使用的版本1.7.2。css
一般從jquery-easyui官網中下載下來的包,是一個至關完整的包其中包括一下文件夾及目錄:前端
demo目錄是easyui使用示例;java
locale目錄是國際化支持;jquery
src目錄是部分easyui插件的源碼;web
plugins目錄是easyui使用的插件;api
themes目錄包含多套easyui可以使用的主題。瀏覽器
一般在項目中使用的話,demo目錄、src目錄能夠不用,locale能夠去除沒用的js庫,主題若是隻使用默認的主題,也能夠去除不用的主題。前端框架
要使用easyui的功能,須要引入一下樣式及js。引入代碼以下框架
<link rel="stylesheet" type="text/css" href="<%=webContext %>/js/jquery-easyui/themes/gray/easyui.css"> <link rel="stylesheet" type="text/css" href="<%=webContext %>/js/jquery-easyui/themes/icon.css"> <script type="text/javascript" src="<%=webContext %>/js/jquery/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="<%=webContext %>/js/jquery-easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="<%=webContext %>/js/jquery-easyui/locale/easyui-lang-zh_CN.js"></script> |
Js和css文件說明:
easyui.css是easyui框架的主樣式;
icon.css是easyui中用到的圖標的樣式;
jquery-1.7.2.min.js是easyui使用的基礎;
jquery.easyui.min.js是easyui的核心javascript庫;
easyui-lang-zh_CN.js是easyui對中文的國際化支持;
easyui庫做爲一個相對成熟的js前端框架,提供了很是豐富的UI控件,包括form表單控件、layout佈局控件、gird控件等等。
這裏對使用easyui控件過程當中的一些注意事項進行說明。
每個easyui控件一般都是由屬性(Properties)、事件(Events)和方法(Methods)這些組成部分。
控件自身用到的信息能夠經過屬性存儲,控件能夠利用某些屬性(好比url)完成特定的操做;控件基於事件驅動,開發人員能夠在控件初始化的時候,爲控件綁定一些特定事件(比:form的onSubmit事件);easyui爲每一個控件提供了操做控件相關內容的函數,每一個函數對應特定的功能(好比:datagrid的options方法,能夠獲取datagrid控件的屬性設置)。
|
小貼士:對控件屬性、事件、方法的理解,能夠參考HTML的input元素(有屬性、事件)。
在easyui中使用了繼承特性,在定義了一部分基礎控件的基礎上(好比:tree、combo等),能夠擴展出功能更完善的控件,好比:基於combo的擴展combotree、combogrid、combobox,基於panel的擴展有tab、layout、Accordion等。
Easyui控件的繼承特性,在父控件中定義的屬性適用於子控件,好比有這麼一個業務場景,combobox中輸入框默認是能夠編輯,在咱們的業務上須要屏蔽對combobox的編輯功能。針對剛纔的業務場景,咱們去查看combobox的屬性(一般控件的屬性能夠對控件進行控制),可是在combobox的一堆屬性中沒有一個能夠用於控制輸入框的編輯性。不過因爲easyui控件擁有繼承特性,父控件中定義的屬性適用於子控,因此能夠查看combobox繼承了哪些控件,API告訴咱們combobox繼承了combo這個控件,同時combo的屬性中有editable這一項,專門用於控制編輯框的可編輯性,因此easyui控件的繼承特性很好的解決了咱們項目中遇到的問題。
Easyui控件在初始化以後,javascript語言中對控件的操做經過控件相關的方法完成。
下面經過combobox控件來講明怎樣來調用控件的方法:
var options = $(「#datagrid」).datagrid(「options」); $(「#datagrid」)經過控件的id熟悉,經過Jquery獲取到datagrid對象; 獲取datagrid對象後,接控件名稱,參數是控件中提供的方法名。 |
Easyui中控件初始化時,全部的初始化信息(包括屬性的值、事件對應調用函數)都存儲在一個javascript對象中,基本上全部的控件都提供了一個方法「options」,經過這個方法能夠獲取到這個對象。下面的例子是修改datagrid控件的url屬性:
var options = $(「#datagrid」).datagrid(「options」); options.url = 「targetUrl」; |
說明:easyui控件的屬性均可以做爲options的屬性來操做,達到修改的目的,特別說明,對datagrid控件的url屬性的修改會觸發一次datagrid的遠程調用。因此這個須要慎重。若是沒處理好就可能引發二次加載的問題。
Easyui控件支持事件,當相應的操做觸發時,能夠調用特定的函數,完成自定義的處理動做。
下面的幾個例子用來講明怎麼註冊:
例子一 在初始化tab控件的時候註冊onSelect事件
<!—- 普通的HTML代碼 --> <div id="baseTab" > <div id="tab001" title="電腦清單" selected="true"></div> <div id="tab002" title="筆記本清單"></div> <div id="tab003" title="網線清單"></div> </div> <script type="text/javascript"> $(function(){ $('#baseTab').tabs({ border:false, plain:true, fit:true, tools:'#tab-tools', onSelect:function(title,index){ localSearch(); } });}); </script> 說明以下 上面的HTML代碼沒有任何特別之處,着重解釋js初始化的動做。 上面的js代碼能夠分紅兩部分:$('#baseTab').tabs()和{border:false,…},兩部分的結合使用表明tab控件的初始化,tabs方法的參數是一個javascript對象,如上所說,在該對象中就包括了對tabs控件屬性的賦值,好比border的值false;以及註冊了onSelect事件,其中函數的參數,在easyui提供的api中有說明。 |
例子二 在HTML中爲Editor註冊onSelect事件
<!—- 普通的HTML代碼 --> <th editor='{type:"combobox",options:{onSelect:onSelectDeviceType,valueField:"itemValue",textField:"itemName",data:<c:out value="${deviceType}" />}}' data-options="field:'deviceType' ">設備類型</th> <!—- Js處理腳本--> <script type="text/javascript"> function onSelectDeviceType(){ //處理過程 } </script> 說明以下 HTML中爲Editor控件註冊了onSelectDeviceType,同時須要在script腳本中提供該函數。 |
例子三 初始化datagrid後註冊onDblClickCell事件
<!—js代碼 --> table.datagrid({ onDblClickCell:function(rowIndex,field,value){} }); 說明以下 同js初始化控件同樣,不過在函數對應的參數中,只指定了要註冊的事件。 |
Datagrid的column有width屬性,說明column是能夠精確的指定列的寬度,極端的作法是每列指定具體的值。若是預留一列不設置width屬性,系統會爲其餘列分配寬度後,將剩餘的寬度留給該列,注意一點:未設置列寬的column其具體的width值未知,可是大概能夠判斷出他的值,根據業務須要,決定是否設置具體的width。可是這樣自動計算最後一列的寬度就容易影響性能,因此這裏仍是看界面數據量再進行設置取捨了。
Easyui支持可編輯的datagrid控件,其中datagrid中行(row)的可編輯功能經過editor實現。
關於editor的幾點說明:
一、能夠把editor當作一個控件,他也有一些屬於本身的方法,好比getValue、setValue;
二、在指定editor的時候,有兩個參數很重要:類型和初始對象,對初始對象的理解能夠當成腳本初始化控件中的參數,類型主要指編輯控件的類型,好比text、combobox、combotree等;
三、在指定editor的類型以後,editor就關聯了一個target的jquery對象,根據editor的類型,target對象的類型也不同。有以下規律:若是editor的類型能夠對應到easyui中定義的控件,則target就是一個相應類型的easyui控件;特殊的若是editor的類型是text或者numberbox等,對應的target其實就是一個普通的表明input的jquery對象;再有的話,須要根據edtior的具體類型具體判斷。
四、在datagrid中,有相應的方法控制一行全部editor的編輯狀態,在js腳本中須要得到行eidtor對象時,須要先調用datagrid的beginEdit,打開行編輯;
五、 js中有兩種方法獲取單元格對應的editor對象,分別調用datagrid對象的getEditors和getEditor方法,具體使用請參考easyui的API;
六、當editor的target中提供的事件不能知足須要的時候,須要爲target對象註冊更多的事件,好比爲類型爲text的editor註冊keyup事件,這時候,須要探究target對象的本質(好比:combobox、jquery的input對象等),在此基礎上爲target綁定事件。
七、提交數據前須要把編輯的行關閉編輯狀態endEdit
總結
這篇文章只是簡單記錄easyui大概的入門及個別控件的簡單用法,具體仍是須要你們多實踐、多差api,後期還會有問題總結更新。