jQuery EasyUI基礎(chǔ)教程之EasyUI常用組件(推薦)

更新時間：2016年07月15日 11:09:08 作者：朱培

這篇文章主要介紹了jQuery EasyUI基礎(chǔ)教程之EasyUI常用組件(推薦),非常不錯，具有參考借鑒價值，需要的朋友可以參考下

本文主要內(nèi)容是介紹EasyUI的一些常用組件的使用，都是一些非?；A(chǔ)的知識，適合入門者學(xué)習(xí)，主要包括Base（基礎(chǔ)）、Layout(布局）、菜單和按鈕、表單、窗口、表格和樹等的使用。要求完全掌握這些內(nèi)容，學(xué)會查閱文檔，了解開發(fā)基本思想。如果想進一步深入學(xué)習(xí)，可以直接去官網(wǎng)進行學(xué)習(xí)，查閱文檔等http://www.jeasyui.com/。

一、簡介

EasyUI是一種第三方組織開發(fā)的，開源的，功能強大的，基于jquery的插件庫。主要可以用于web的后臺前端。jQuery EasyUI 提供易于使用的組件，它使 Web 開發(fā)人員能快速地在流行的 jQuery 核心和 HTML5 上建立程序頁面。這里介紹的都是一些基本組件，項目中需要將其裝配起來，方可構(gòu)建完整的web頁面，EasyUI只是眾多前端WEB組件之一。

作用：快速基于現(xiàn)成的組件創(chuàng)建自己的web頁面。組件：指已經(jīng)有第三方寫好的，直接可以使用的功能界面，例如：form,layout,tree等。

二、開發(fā)步驟

1、先去官網(wǎng)下載相應(yīng)的插件：
2、在myeclipse中新建一個web工程

3、在WebRoot目錄下創(chuàng)建js和themes目錄，導(dǎo)入官方文件

4、新建一個helloword.html的網(wǎng)頁，并引入下列文件：

<link rel="stylesheet" href="themes/default/easyui.css" type="text/css" /> 
<link rel="stylesheet" href="themes/icon.css" type="text/css" /> 
<script type="text/javascript" src="js/jquery.min.js"></script> 
<script type="text/javascript" src="js/jquery.easyui.min.js"></script> 
<script type="text/javascript" src="js/easyui-lang-zh_CN.js"></script>

文件引入的順序不要錯，那么到目前為止，開發(fā)的準備工作就已經(jīng)完成了。

三、Base組件的使用

3.1 Pagination（分頁）

使用$.fn.pagination.defaults重寫默認值對象

.分頁組件是一個比較常用的組件之一，我們可以有兩種使用方式，一種是直接在標簽上面添加相應(yīng)的屬性，另一種是通過js進行操作。

靜態(tài)方式創(chuàng)建如下：

<div 
id="pagination" 
class="easyui-pagination" 
data-options="total:2000,pageSize:10" 
style="background:#efefef;border:1px solid #ccc;" 
> 
</div>

動態(tài)方式：

<div id="pp" style="background:#efefef;border:1px solid #ccc;"></div> 
<script> 
$("#pp").pagination({ 
"total":100, //表示總記錄數(shù) 
"pageSize":10, //每頁顯示多少條記錄 
"pageNumber":2, //當前頁號 
"pageList":[10,20], // 
"buttons":[ 
{ 
iconCls:'icon-add', 
handler:function(){alert('add')} 
},'-',{ 
iconCls:'icon-save', 
handler:function(){alert('save') 
} 
}], 
"layout":['list','sep','first','prev','manual','next','last','links'], 
"showPageList":false, 
}); 
$("#pp").pagination({ 
"onSelectPage":function(pageNumber,b){ 
alert(pageNumber); 
alert(b) 
} 
})

我這里是添加了一些事件和方法的，可以依據(jù)實際情況進行增加或刪除或修改里面的小的部分組件。大大方便了我們的開發(fā)。

3.2 ProgressBar（進度條）

使用$.fn.progressbar.defaults重寫默認值對象。

使用HTML標簽或程序創(chuàng)建進度條組件。從標簽創(chuàng)建更加簡單，添加'easyui-progressbar'類ID到<div/>標簽。

<div id="p" class="easyui-progressbar" data-options="value:60" style="width:400px;"></div>

使用Javascript創(chuàng)建進度條。

<div id="p" style="width:400px;" ></div><br /> 
<input id="startID" type="button" value="開始" style="width:100px;height:30px" /> 
<script> 
$("#p").progressbar({ 
width:1000, 
height:40, 
value:0 
}); 
//獲取1-9之間的隨機數(shù) 
function getNum(){ 
return Math.floor(Math.random()*9)+1; 
} 
/* for(var i=0;i<20;i++){ 
var num=getNum(); 
document.write(num+"<br />"); 
} */ 
var timeID=null; 
function update(){ 
//獲取隨機值 
var num=getNum(); 
//獲取進度條當前值 
var value=$("#p").progressbar("getValue"); 
if(value+num>100){ 
//設(shè)置進度條當前值為100，且停止運行 
$("#p").progressbar("setValue",100); 
window.clearInterval(timeID); 
$("#startID").removeAttr("disabled"); 
}else{ 
$("#p").progressbar("setValue",(value+num)) 
} 
} 
$("#startID").click(function(){ 
timeID=window.setInterval("update()",500); 
//按鈕失效 
$(this).attr("disabled","disabled"); 
}); 
</script>

四、Layout組件的使用

4.1 layout的使用

布局是最常用的組件了，官方提供的是擁有5個布局方向的：北、南、東、西、中.

基本的使用方式如下：

<div 
id="layoutID" 
class="easyui-layout" 
data-options="fit:true" 
style="width:800px;height:500px"> 
<!-- 上 --> 
<div data-options="region:'north',title:'上',split:true,iconCls:'icon-edit',minHeight:'100',maxHeight:'200'" style="height:100px;"></div> 
<!-- 下 --> 
<div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div> 
<!-- 右 --> 
<div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div> 
<!-- 左 --> 
<div data-options="region:'west',title:'West',split:true" style="width:200px;"></div> 
<!-- 中 --> 
<div data-options="region:'center',title:'center title' " style="padding:5px;background:#eee;"></div> 
</div>

我們可以為其添加js的屬性：

<script> 
$(function(){ 
$('#layoutID').layout('collapse','north'); 
//休息3秒 
window.setTimeout(function(){ 
//將南邊折疊 
$('#layoutID').layout("collapse","south"); 
//將北邊展開 
$('#layoutID').layout('expand','north'); 
//將南邊展開 
window.setTimeout(function(){ 
$("#layoutID").layout("expand","south"); 
},3000); 
},3000); 
}); 
</script>

對于布局來說，當然也還是可以進行嵌套處理的，我們可以摘除掉我們不需要的部分，然后將需要的部分進行再次組裝。

<div id="layoutID" class="easyui-layout" data-options="fit:true" > 
<div data-options="region:'north',border:false" style="height:100px"></div> 
<div data-options="region:'center'"> 
<div class="easyui-layout" data-options="fit:true" > 
<div data-options="region:'west',border:false" style="width:180px"></div> 
<div data-options="region:'center'"> 
<div class="easyui-layout" data-options="fit:true"> 
<div data-options="region:'north'" style="height:100px"></div> 
<div data-options="region:'south'" ></div> 
</div> 
</div> 
</div> 
</div> 
</div>

效果如下：

4.2 面板的使用

第一種方式：通過標簽直接創(chuàng)建。

<div 
id="panel" 
class="easyui-panel" 
title="我的第一個面板" 
data-options="iconCls:'icon-save',collapsible:'true',minimizable:true,maximizable:true" 
style="width:800px;height:300px;padding:15px" 
> 
easyui入門 
</div>

第二種方式：

<div id="p" style="padding:10px;"> 
<p>panel content.</p> 
<p>panel content.</p> 
</div> 
<script> 
$('#p').panel({ 
width:500, 
height:150, 
title: 'My Panel', 
tools: [{ 
iconCls:'icon-add', 
handler:function(){alert('new')} 
},{ 
iconCls:'icon-save', 
handler:function(){alert('save')} 
}] 
}); 
<div id="p" style="padding:10px;"> 
<p>panel content.</p> 
<p>panel content.</p> 
</div> 
$('#p').panel({ 
width:500, 
height:150, 
title: 'My Panel', 
tools: [{ 
iconCls:'icon-add', 
handler:function(){alert('new')} 
},{ 
iconCls:'icon-save', 
handler:function(){alert('save')} 
}] 
}); 
</script>

4.3 Accordion（分類）

使用$.fn.accordion.defaults重寫默認值對象。

分類空間允許用戶使用多面板，但在同一時間只會顯示一個。每個面板都內(nèi)建支持展開和折疊功能。點擊一個面板的標題將會展開或折疊面板主體。面板內(nèi)容可以通過指定的'href'屬性使用ajax方式讀取面板內(nèi)容。用戶可以定義一個被默認選中的面板，如果未指定，那么第一個面板就是默認的。

<div 
id="adID" 
class="easyui-accordion" 
data-options="fit:false,border:true,multiple:false,selected:-1" 
style="width:300px;height:200px;" 
> 
<div title="北京" data-options="iconCls:'icon-save'" 
style="overflow:auto;padding:10px;"> 
朝陽區(qū) 
</div> 
<div title="湖南" data-options="iconCls:'icon-reload'" 
style="padding:10px;">衡陽市 
</div> 
<div title="北京" data-options="iconCls:'icon-save'" 
style="overflow:auto;padding:10px;"> 
<p>朝陽區(qū)</p> 
</div> 
<div title="湖南" data-options="iconCls:'icon-reload'" 
style="padding:10px;"> 
<p>衡陽市</p> 
<p>長沙市</p> 
</div> 
</div> 
<script> 
$(function(){ 
//增加一個面版 
$("#adID").accordion("add",{ 
"title":"廣東省", 
"iconCls":"icon-add", 
"content":"廣州", 
"selected":false 
}); 
window.setTimeout(function(){ 
$("#adID").accordion("remove","北京"); 
$("#adID").accordion("unselect",0); 
},3000); 
}); 
</script>

4.4 Tabs（選項卡）

使用$.fn.tabs.defaults重寫默認值對象。

選項卡顯示一批面板。但在同一個時間只會顯示一個面板。每個選項卡面板都有頭標題和一些小的按鈕工具菜單，包括關(guān)閉按鈕和其他自定義按鈕。

<div 
id="tt" 
class="easyui-tabs" 
data-options="plain:false,fit:false,border:true,tools:[ 
{ 
iconCls:'icon-add', 
handler:function(){ 
alert('添加') 
} 
}, 
{ 
iconCls:'icon-sava', 
handler:function(){ 
alert('保存') 
} 
} 
],toolPosition:'right',tabPosition:'top',selected:2" 
style="width:500px;height:250px;" 
> 
<div title="Tab1" style="padding:20px;display:none;">tab1</div> 
<div title="Tab2" data-options="closable:true" 
style="overflow:auto;padding:20px;display:none;">tab2</div> 
<div title="Tab3" data-options="iconCls:'icon-reload',closable:true" 
style="padding:20px;display:none;">tab3</div> 
</div>

五、Menu 和Button組件的使用

LinkButton（按鈕）

使用$.fn.linkbutton.defaults重寫默認值對象。

按鈕組件使用超鏈接按鈕創(chuàng)建。它使用一個普通的<a>標簽進行展示。它可以同時顯示一個圖標和文本,或只有圖標或文字。按鈕的寬度可以動態(tài)和折疊/展開以適應(yīng)它的文本標簽。

<a id="btn_add" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',group:'sex',toggle:true,iconAlign:'right'">增加部門</a><br /> 
<a id="btn_find" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search',group:'sex',toggle:true"">查找部門</a><br /> 
<a id="btn_update" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',group:'sex',toggle:true"">修改部門</a><br /> 
<a id="btn_delete" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove',group:'sex',toggle:true"">刪除部門</a><br /> 
<script> 
$("a").click(function(){ 
//獲取單擊的按鈕的標題 
var title=$(this).text(); 
//去空格 
title=$.trim(title); 
alert(title); 
}); 
</script>

六、Form組件的使用

6.1 ValidateBox（驗證框）

使用$.fn.validatebox.defaults重寫默認值對象。

validatebox(驗證框)的設(shè)計目的是為了驗證輸入的表單字段是否有效。如果用戶輸入了無效的值，它將會更改輸入框的背景顏色，并且顯示警告圖標和提示信息。該驗證框可以結(jié)合form(表單)插件并防止表單重復(fù)提交。

姓名:<input id="nameID" /><br /> 
郵箱:<input id="emailID" /><br /> 
密碼:<input id="pwdID" /> 
<script> 
$("#nameID").validatebox({ 
required:true, 
//validType:'length[1,6]' 
validType:['length[1,6]','chinese'], 
delay:200, 
tipPosition:'left' 
}); 
//自定義規(guī)則，驗證是否為漢字 
$.extend($.fn.validatebox.defaults.rules,{ 
chinese:{ 
//validator表示用戶在文本框中輸入的內(nèi)容 
validator:function(value){ 
var reg=/^[\u4e00-\u9fa5]/; 
if(reg.test(value)){ 
return true; 
} 
}, 
//如果不符合中文規(guī)則， 
message:'姓名必須是中文' 
} 
}); 
$("#emailID").validatebox({ 
required:true, 
validType: ['length[1,30]','email'] 
}); 
$("#pwdID").validatebox({ 
required:true, 
validType: ['length[6,6]','pwdnum'] 
}); 
//自定義規(guī)則，驗證是否為密碼 
$.extend($.fn.validatebox.defaults.rules,{ 
pwdnum:{ 
//validator表示用戶在文本框中輸入的內(nèi)容 
validator:function(value){ 
var reg=/^[0-9]/; 
if(reg.test(value)){ 
return true; 
} 
}, 
//如果不符合中文規(guī)則， 
message:'密碼必須為數(shù)字' 
} 
}); 
</script>

對于表單驗證，我們可以對其進行自定義規(guī)則。這個時候如果加上正則驗證，就完全可以寫出一個非常好的驗證功能的了。在上面的這個屬性中，還可以對提示框的位置進行改變，可以使用的屬性是left和right。下面圖片中顯示的就是一個提示框在left的情況，一般情況下使用默認的right就可以了。

6.2 ComboBox（下拉列表框）

擴展自$.fn.combo.defaults。使用$.fn.combobox.defaults重寫默認值對象。

下拉列表框顯示一個可編輯文本框和下拉式列表，用戶可以選擇一個值或多個值。用戶可以直接輸入文本到列表頂部或選擇一個或多個當前列表中的值。

靜態(tài)方法創(chuàng)建：

<select id="cc" class="easyui-combobox" name="dept" style="width:200px;"> 
<option value="aa">aitem1</option> 
<option>bitem2</option> 
<option>bitem3</option> 
<option>ditem4</option> 
<option>eitem5</option> 
</select>

動態(tài)方法創(chuàng)建：

<input id="cityID" name="city" value="1"/> 
<script> 
$("#cityID").combobox({ 
url:"json/city.json", 
valueField:"id", 
textField:"name" 
}); 
$(function(){ 
$("#cityID").comcobox("setValue","長沙"); 
}); 
</script>

6.3 DateBox（日期輸入框）

擴展自$.fn.combo.defaults。使用$.fn.datebox.defaults重寫默認值對象。

日期輸入框結(jié)合了一個可編輯的文本框控件和允許用戶選擇日期的下拉日歷面板控件。選擇的日期會自動轉(zhuǎn)變?yōu)橐粋€有效的日期然后填充到文本框中。選定的日期也可以被格式化為預(yù)定格式。

日期：

<input id="dd" type="text"></input> 
<script> 
$('#dd').datebox({ 
required:true 
}); 
$("#dd").datebox({ 
onSelect:function(mydate){ 
var year=mydate.getFullYear(); 
var month=mydate.getMonth()+1; 
var date=mydate.getDate(); 
alert(year+"年"+month+"月"+date+"日"); 
} 
}); 
</script>

6.4 Slider（滑動條）

使用$.fn.slider.defaults重寫默認值對象。

滑動條允許用戶從一個有限的范圍內(nèi)選擇一個數(shù)值。當滑塊控件沿著軌道移動的時候，將會顯示一個提示來表示當前值。用戶可以通過設(shè)置其屬性自定義滑塊。

學(xué)生成績:<span id="tip" ></span> 
<hr /> 
<div id="ss" style="height:400px;width:400px"> 
</div> 
<script> 
$("#ss").slider({ 
mode:"h", 
min:0, 
max:100, 
rule:[0,'|',25,'|',50,'|',75,'|',100], 
showTip:true, 
value:60 
}); 
$("#ss").slider({ 
onChange:function(newValue){ 
if(newValue==60){ 
$("#tip").text("合格").css("color","yellow"); 
}else if(newValue==70){ 
$("#tip").text("中等").css("color","pink"); 
}else if(newValue==80){ 
$("#tip").text("良好").css("color","blue"); 
}else if(newValue==90){ 
$("#tip").text("優(yōu)秀").css("color","green"); 
} 
} 
}) 
</script>

6.5 NumberSpinner（數(shù)字微調(diào)）

數(shù)字微調(diào)控件的創(chuàng)建是基于微調(diào)控件和數(shù)值輸入框控件的。他可以轉(zhuǎn)換輸入的值，比如：數(shù)值、百分比、貨幣等。它也允許使用上/下微調(diào)按鈕調(diào)整到用戶的期望值。

商品數(shù)量：

<input id="ss" style="width:100px"> <br /> 
你一共買了<span id="num">1</span>件商品 
<script> 
$('#ss').numberspinner({ 
value:1, 
min:1, 
max:100 
}); 
$('#ss').numberspinner({ 
onSpinUp:function(){ 
var value=$("#ss").numberspinner("getValue"); 
//將當前值設(shè)置到span標簽 
$("#num").text(value).css("color","red"); 
}, 
onSpinDown:function(){ 
var value=$("#ss").numberspinner("getValue"); 
//將當前值設(shè)置到span標簽 
$("#num").text(value).css("color","red"); 
} 
}); 
//添加鍵盤事件 
$('#ss').keyup(function(event){ 
//獲取按鍵的unicode編碼 
var myevent=event; 
var code=myevent.keyCode; 
if(code==13){ 
var value=$(this).val(); 
//將當前值設(shè)置到span標簽 
$("#num").text(value).css("color","red"); 
} 
}); 
</script>

七、窗口組件的使用

7.1 Window（窗口）

擴展自$.fn.panel.defaults。使用$.fn.window.defaults重寫默認值對象。

窗口控件是一個浮動和可拖拽的面板可以用作應(yīng)用程序窗口。默認情況下,窗口可以移動,調(diào)整大小和關(guān)閉。它的內(nèi)容也可以被定義為靜態(tài)html或要么通過ajax動態(tài)加載。

靜態(tài)方法創(chuàng)建：

<div id="win" class="easyui-window" title="My Window" style="width:600px;height:400px" 
data-options="iconCls:'icon-save',modal:true"> 
Window Content 
</div>

動態(tài)創(chuàng)建：

<input type="button" value="打開窗口1" id="open1"/> 
<input type="button" value="打開窗口2" id="open2"/> 
<div id="win1"></div> 
<div id="win2"></div> 
<script> 
$("#open1").click(function(){ 
$('#win1').window({ 
width:600, 
height:400, 
modal:false , 
minimizable :false, 
maximizable:false, 
title:"我的窗口" 
}); 
}); 
$("#open2").click(function(){ 
$('#win2').window({ 
width:600, 
height:400, 
modal:false , 
minimizable :false, 
maximizable:false, 
title:"我的窗口" 
}); 
}); 
</script>

7.2 Dialog（對話框窗口）

該對話框是一種特殊類型的窗口，它在頂部有一個工具欄，在底部有一個按鈕欄。對話框窗口右上角只有一個關(guān)閉按鈕用戶可以配置對話框的行為顯示其他工具,如collapsible,minimizable,maximizable工具等。

<input type="button" value="打開對話框" id="open1"/> 
<div id="win1"></div> 
<script> 
$("#open1").click(function(){ 
$('#win1').dialog({ 
width:400, 
height:400, 
modal:false , 
minimizable :false, 
maximizable:false, 
title:"我的對話框", 
toolbar:[ 
{ 
text:'編輯', 
iconCls:'icon-edit', 
handler:function(){alert('edit')} 
},{ 
text:'幫助', 
iconCls:'icon-help', 
handler:function(){alert('help')} 
} 
], 
buttons:[ 
{ 
text:'保存', 
handler:function(){alert("保存");} 
},{ 
text:'關(guān)閉', 
handler:function(){ 
//關(guān)閉對話框 
$("#win1").dialog("close"); 
} 
} 
], 
href:"/EasyUi/form.html" 
}); 
}); 
</script>

7.3 Messager（消息窗口）

消息窗口提供了不同的消息框風(fēng)格，包含alert(警告框), confirm(確認框), prompt(提示框), progress(進度框)等。所有的消息框都是異步的。用戶可以在交互消息之后使用回調(diào)函數(shù)去處理結(jié)果或做一些自己需要處理的事情。

<input type="button" value="確認框" /><br /> 
<input type="button" value="警告框" /><br /> 
<input type="button" value="輸入框" /><br /> 
<input type="button" value="顯示框" /><br /> 
<script> 
$("input").click(function(){ 
//定位button按鈕，提供單擊事件 
var tip=$(this).val(); 
tip=$.trim(tip); 
if("警告框"==tip){ 
$.messager.alert("警告框","警告處分","waring",function(){ 
//alert("關(guān)閉"); 
}); 
} 
if("確認框"==tip){ 
$.messager.confirm("確認框","你確認要刪除么",function(value){ 
alert(value); 
}); 
} 
if("輸入框"==tip){ 
$.messager.prompt("輸入框","請輸入你的姓名",function(name){ 
alert(name); 
}); 
} 
if("顯示框"==tip){ 
$.messager.show({ 
showType: "slide", 
showSpeed: 600, 
width:300, 
height:300, 
title:"顯示框", 
timeout:5000, 
msg:'消息將在5秒后關(guān)閉。' 
} 
); 
} 
}); 
</script>

八、表格和樹組件的使用

使用$.fn.tree.defaults重寫默認值對象。

樹控件在web頁面中一個將分層數(shù)據(jù)以樹形結(jié)構(gòu)進行顯示。它提供用戶展開、折疊、拖拽、編輯和異步加載等功能。

<ul id="treeID" class="easyui-tree"> 
<li> 
<span>第一章</span> 
<ul> 
<li> 
<span>第一節(jié)</span> 
<ul> 
<li> 
<span>第一條</span> 
</li> 
<li> 
<span>第二條</span> 
</li> 
</ul> 
</li> 
<li> 
<span>第二節(jié)</span> 
</li> 
</ul> 
</li> 
<li> 
<span>第二章</span> 
</li> 
</ul> 
<script type="text/javascript"> 
$(function(){ 
//收起所有的選項 
$("#treeID").tree("collapseAll"); 
}); 
</script>

我們還可以引入外部文件，使用json格式的文件來添加到這個tree中。

<ul id="treeID"></ul> 
<script type="text/javascript"> 
$("#treeID").tree({ 
url : "/EasyUi/json/pro.json" 
}); 
</script>

json格式為：

[ 
{ 
"id":1, 
"text":"廣東", 
"state":"closed", 
"children":[ 
{ 
"id":11, 
"text":"廣州" , 
"state":"closed", 
"children":[ 
{ 
"id":111, 
"text":"天河" 
}, 
{ 
"id":112, 
"text":"越秀" 
} 
] 
}, 
{ 
"id":12, 
"text":"深圳" 
} 
] 
}, 
{ 
"id":2, 
"text":"湖南" 
} 
]