EasyUI經常使用組件（基礎）
---------------------------------------------------------------------------------------------------------------
[版權申明：本文系做者原創，轉載請註明出處]
文章出處：http://blog.csdn.net/sdksdk0/article/details/51914553
做者：朱培 ID：sdksdk0
---------------------------------------------------------------------------------------------------------------javascript
本文主要內容是介紹EasyUI的一些經常使用組件的使用，都是一些很是基礎的知識，適合入門者學習，主要包括Base（基礎）、Layout(佈局）、菜單和按鈕、表單、窗口、表格和樹等的使用。要求徹底掌握這些內容，學會查閱文檔，瞭解開發基本思想。若是想進一步深刻學習，能夠直接去官網進行學習，查閱文檔等http://www.jeasyui.com/。css
1、簡介
EasyUI是一種第三方組織開發的，開源的，功能強大的，基於jquery的插件庫。 主要能夠用於web的後臺前端。jQuery EasyUI 提供易於使用的組件，它使 Web 開發人員能快速地在流行的 jQuery 核心和 HTML5 上創建程序頁面。 這裏介紹的都是一些基本組件，項目中須要將其裝配起來，方可構建完整的web頁面，EasyUI只是衆多前端WEB組件之一。html
做用：快速基於現成的組件建立本身的web頁面。組件：指已經有第三方寫好的，直接可使用的功能界面，例如：form,layout,tree等。前端
2、開發步驟
一、先去官網下載相應的插件：
二、在myeclipse中新建一個web工程java
三、在WebRoot目錄下建立js和themes目錄，導入官方文件jquery
四、新建一個helloword.html的網頁，並引入下列文件：git
<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>
文件引入的順序不要錯，那麼到目前爲止，開發的準備工做就已經完成了。github
3、Base組件的使用
3.1 Pagination（分頁）
使用$.fn.pagination.defaults重寫默認值對象web
.分頁組件是一個比較經常使用的組件之一，咱們能夠有兩種使用方式，一種是直接在標籤上面添加相應的屬性，另外一種是經過js進行操做。ajax
靜態方式建立以下：
<div id="pagination" class="easyui-pagination" data-options="total:2000,pageSize:10" style="background:#efefef;border:1px solid #ccc;" > </div>
動態方式：
<div id="pp" style="background:#efefef;border:1px solid #ccc;"></div>
<script>
$("#pp").pagination({
"total":100, //表示總記錄數
"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)
}
})
我這裏是添加了一些事件和方法的，能夠依據實際狀況進行增長或刪除或修改裏面的小的部分組件。大大方便了咱們的開發。
3.2 ProgressBar（進度條）
使用$.fn.progressbar.defaults重寫默認值對象。
使用HTML標籤或程序建立進度條組件。從標籤建立更加簡單，添加'easyui-progressbar'類ID到<div/>標籤。
<div id="p" class="easyui-progressbar" data-options="value:60" style="width:400px;"></div>
使用Javascript建立進度條。
<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之間的隨機數
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){
//設置進度條當前值爲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>
4、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 面板的使用
第一種方式：經過標籤直接建立。
<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重寫默認值對象。
分類空間容許用戶使用多面板，但在同一時間只會顯示一個。每一個面板都內建支持展開和摺疊功能。點擊一個面板的標題將會展開或摺疊面板主體。面板內容能夠經過指定的'href'屬性使用ajax方式讀取面板內容。用戶能夠定義一個被默認選中的面板，若是未指定，那麼第一個面板就是默認的。
<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;">
朝陽區
</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>朝陽區</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重寫默認值對象。
選項卡顯示一批面板。但在同一個時間只會顯示一個面板。每一個選項卡面板都有頭標題和一些小的按鈕工具菜單，包括關閉按鈕和其餘自定義按鈕。
<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>
5、Menu 和Button組件的使用
LinkButton（按鈕）
使用$.fn.linkbutton.defaults重寫默認值對象。
按鈕組件使用超連接按鈕建立。它使用一個普通的<a>標籤進行展現。它能夠同時顯示一個圖標和文本,或只有圖標或文字。按鈕的寬度能夠動態和摺疊/展開以適應它的文本標籤。
<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>
6、Form組件的使用
6.1 ValidateBox（驗證框）
使用$.fn.validatebox.defaults重寫默認值對象。
validatebox(驗證框)的設計目的是爲了驗證輸入的表單字段是否有效。若是用戶輸入了無效的值，它將會更改輸入框的背景顏色，而且顯示警告圖標和提示信息。該驗證框能夠結合form(表單)插件並防止表單重複提交。
姓名:<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'
});
//自定義規則，驗證是否爲漢字
$.extend($.fn.validatebox.defaults.rules,{
chinese:{
//validator表示用戶在文本框中輸入的內容
validator:function(value){
var reg=/^[\u4e00-\u9fa5]/;
if(reg.test(value)){
return true;
}
},
//若是不符合中文規則，
message:'姓名必須是中文'
}
});
$("#emailID").validatebox({
required:true,
validType: ['length[1,30]','email']
});
$("#pwdID").validatebox({
required:true,
validType: ['length[6,6]','pwdnum']
});
//自定義規則，驗證是否爲密碼
$.extend($.fn.validatebox.defaults.rules,{
pwdnum:{
//validator表示用戶在文本框中輸入的內容
validator:function(value){
var reg=/^[0-9]/;
if(reg.test(value)){
return true;
}
},
//若是不符合中文規則，
message:'密碼必須爲數字'
}
});
</script> 對於表單驗證，咱們能夠對其進行自定義規則。這個時候若是加上正則驗證，就徹底能夠寫出一個很是好的驗證功能的了。在上面的這個屬性中，還能夠對提示框的位置進行改變，可使用的屬性是left和right。下面圖片中顯示的就是一個提示框在left的狀況，通常狀況下使用默認的right就能夠了。
6.2 ComboBox（下拉列表框）
擴展自$.fn.combo.defaults。使用$.fn.combobox.defaults重寫默認值對象。
下拉列表框顯示一個可編輯文本框和下拉式列表，用戶能夠選擇一個值或多個值。用戶能夠直接輸入文本到列表頂部或選擇一個或多個當前列表中的值。
靜態方法建立：
<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>
動態方法建立：
<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重寫默認值對象。
日期輸入框結合了一個可編輯的文本框控件和容許用戶選擇日期的下拉日曆面板控件。選擇的日期會自動轉變爲一個有效的日期而後填充到文本框中。選定的日期也能夠被格式化爲預約格式。
日期：
<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重寫默認值對象。
滑動條容許用戶從一個有限的範圍內選擇一個數值。當滑塊控件沿着軌道移動的時候，將會顯示一個提示來表示當前值。用戶能夠經過設置其屬性自定義滑塊。
學生成績:<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("優秀").css("color","green");
}
}
})
</script>
6.5 NumberSpinner（數字微調）
數字微調控件的建立是基於微調控件和數值輸入框控件的。他能夠轉換輸入的值，好比：數值、百分比、貨幣等。它也容許使用上/下微調按鈕調整到用戶的指望值。
商品數量：
<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");
//將當前值設置到span標籤
$("#num").text(value).css("color","red");
},
onSpinDown:function(){
var value=$("#ss").numberspinner("getValue");
//將當前值設置到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();
//將當前值設置到span標籤
$("#num").text(value).css("color","red");
}
});
</script>
7、窗口組件的使用
7.1 Window（窗口）
擴展自$.fn.panel.defaults。使用$.fn.window.defaults重寫默認值對象。
窗口控件是一個浮動和可拖拽的面板能夠用做應用程序窗口。默認狀況下,窗口能夠移動,調整大小和關閉。它的內容也能夠被定義爲靜態html或要麼經過ajax動態加載。
靜態方法建立：
<div id="win" class="easyui-window" title="My Window" style="width:600px;height:400px"
data-options="iconCls:'icon-save',modal:true">
Window Content
</div>
動態建立：
<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（對話框窗口）
該對話框是一種特殊類型的窗口，它在頂部有一個工具欄，在底部有一個按鈕欄。對話框窗口右上角只有一個關閉按鈕用戶能夠配置對話框的行爲顯示其餘工具,如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:'關閉',
handler:function(){
//關閉對話框
$("#win1").dialog("close");
}
}
],
href:"/EasyUi/form.html"
});
});
</script>
7.3 Messager（消息窗口）
消息窗口提供了不一樣的消息框風格，包含alert(警告框), confirm(確認框), prompt(提示框), progress(進度框)等。全部的消息框都是異步的。用戶能夠在交互消息以後使用回調函數去處理結果或作一些本身須要處理的事情。
<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("關閉");
});
}
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秒後關閉。'
}
);
}
});
</script>
8、表格和樹組件的使用
使用$.fn.tree.defaults重寫默認值對象。
樹控件在web頁面中一個將分層數據以樹形結構進行顯示。它提供用戶展開、摺疊、拖拽、編輯和異步加載等功能。
<ul id="treeID" class="easyui-tree">
<li>
<span>第一章</span>
<ul>
<li>
<span>第一節</span>
<ul>
<li>
<span>第一條</span>
</li>
<li>
<span>第二條</span>
</li>
</ul>
</li>
<li>
<span>第二節</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":"湖南"
}
]
總結：任何一門技術的學習，仍是要有學會查閱文檔的基本能力，要學會觸類旁通，我前面分享的內容也都是很是簡單的一些例子，有的是從官方文檔中進行改裝，加入了個人一些東西，雖說着些東西都是很是簡單的內容，可是咱們仍是須要提升警戒，知識面仍是要到位的。我深深的知道，比我牛的人不少，比我菜的人也不少，在這個行業中，惟有保持不斷學習的態度，不斷的吸取知識，才能讓本身成長，不要老是去鄙視別人，有些看上去簡單的東西實際操做起來仍是有一些困難的，人無完人，但願和你們一塊兒成長，共同進步！
相關文章
- 1. Linux經常使用的基礎組件
- 2. easyui---基礎組件：panel
- 3. easyui---基礎組件：window
- 4. EasyUI組件使用
- 5. easyUI 經常使用操做
- 6. JavaScript：經常使用基礎
- 7. 經常使用基礎類
- 8. mysql 經常使用基礎
- 9. 1.1.5Angular2經常使用組件
- 10. react 經常使用組件
- 更多相關文章...
- • Kotlin 基礎語法 - Kotlin 教程
- • Scala 基礎語法 - Scala教程
- • Composer 安裝與使用
- • 常用的分佈式事務解決方案
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. Linux經常使用的基礎組件
- 2. easyui---基礎組件：panel
- 3. easyui---基礎組件：window
- 4. EasyUI組件使用
- 5. easyUI 經常使用操做
- 6. JavaScript：經常使用基礎
- 7. 經常使用基礎類
- 8. mysql 經常使用基礎
- 9. 1.1.5Angular2經常使用組件
- 10. react 經常使用組件