easyui使用總結

1   概述

        本文檔內容包括easyui的引入和easyui的使用實踐,編寫該文檔的目的,主要爲了給下次須要使用的easyui的同事作參考,提升開發效率。javascript

2       EasyUI的引入說明

2.1         Jquery庫引用

項目中使用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

2.2         關於easyui包目錄結構調整說明

一般從jquery-easyui官網中下載下來的包,是一個至關完整的包其中包括一下文件夾及目錄:前端

demo目錄是easyui使用示例;java

locale目錄是國際化支持;jquery

src目錄是部分easyui插件的源碼;web

plugins目錄是easyui使用的插件;api

themes目錄包含多套easyui可以使用的主題。瀏覽器

一般在項目中使用的話,demo目錄、src目錄能夠不用,locale能夠去除沒用的js庫,主題若是隻使用默認的主題,也能夠去除不用的主題。前端框架

2.3         使用easyui須要引用的js和css

要使用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對中文的國際化支持;

3       關於easyui控件的使用

        easyui庫做爲一個相對成熟的js前端框架,提供了很是豐富的UI控件,包括form表單控件、layout佈局控件、gird控件等等。

        這裏對使用easyui控件過程當中的一些注意事項進行說明。

3.1         控件組成部分

每個easyui控件一般都是由屬性(Properties)、事件(Events)和方法(Methods)這些組成部分

控件自身用到的信息能夠經過屬性存儲,控件能夠利用某些屬性(好比url)完成特定的操做;控件基於事件驅動,開發人員能夠在控件初始化的時候,爲控件綁定一些特定事件(比:form的onSubmit事件);easyui爲每一個控件提供了操做控件相關內容的函數,每一個函數對應特定的功能(好比:datagrid的options方法,能夠獲取datagrid控件的屬性設置)。

 

 

小貼士:對控件屬性、事件、方法的理解,能夠參考HTML的input元素(有屬性、事件)。

3.2         控件的繼承特性

        在easyui中使用了繼承特性,在定義了一部分基礎控件的基礎上(好比:tree、combo等),能夠擴展出功能更完善的控件,好比:基於combo的擴展combotree、combogrid、combobox,基於panel的擴展有tab、layout、Accordion等。

        Easyui控件的繼承特性,在父控件中定義的屬性適用於子控件,好比有這麼一個業務場景,combobox中輸入框默認是能夠編輯,在咱們的業務上須要屏蔽對combobox的編輯功能。針對剛纔的業務場景,咱們去查看combobox的屬性(一般控件的屬性能夠對控件進行控制),可是在combobox的一堆屬性中沒有一個能夠用於控制輸入框的編輯性。不過因爲easyui控件擁有繼承特性,父控件中定義的屬性適用於子控,因此能夠查看combobox繼承了哪些控件,API告訴咱們combobox繼承了combo這個控件,同時combo的屬性中有editable這一項,專門用於控制編輯框的可編輯性,因此easyui控件的繼承特性很好的解決了咱們項目中遇到的問題。

3.3         調用控件的方法

Easyui控件在初始化以後,javascript語言中對控件的操做經過控件相關的方法完成。

下面經過combobox控件來講明怎樣來調用控件的方法:

var options = $(「#datagrid」).datagrid(「options」);

$(「#datagrid」)經過控件的id熟悉,經過Jquery獲取到datagrid對象;

獲取datagrid對象後,接控件名稱,參數是控件中提供的方法名。

3.4         修改控件的屬性

Easyui中控件初始化時,全部的初始化信息(包括屬性的值、事件對應調用函數)都存儲在一個javascript對象中,基本上全部的控件都提供了一個方法「options」,經過這個方法能夠獲取到這個對象。下面的例子是修改datagrid控件的url屬性:

var options = $(「#datagrid」).datagrid(「options」);

options.url = 「targetUrl」;

說明:easyui控件的屬性均可以做爲options的屬性來操做,達到修改的目的,特別說明,對datagrid控件的url屬性的修改會觸發一次datagrid的遠程調用。因此這個須要慎重。若是沒處理好就可能引發二次加載的問題。

3.5         控件事件的註冊

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初始化控件同樣,不過在函數對應的參數中,只指定了要註冊的事件。

 

4       關於Datagrid

4.1         Datagrid中列表寬度的設置建議

        Datagrid的column有width屬性,說明column是能夠精確的指定列的寬度,極端的作法是每列指定具體的值。若是預留一列不設置width屬性,系統會爲其餘列分配寬度後,將剩餘的寬度留給該列,注意一點:未設置列寬的column其具體的width值未知,可是大概能夠判斷出他的值,根據業務須要,決定是否設置具體的width。可是這樣自動計算最後一列的寬度就容易影響性能,因此這裏仍是看界面數據量再進行設置取捨了。

4.2         關於editor的使用說明

        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,後期還會有問題總結更新。

相關文章
相關標籤/搜索