如鵬網學習筆記（十三）EasyUI
一、EasyUI簡介
是一組基於JQuery的UI插件集合
主要作用：為JQuery對象提供新的方法，實現新的功能
可以快速創建出簡潔、友好、美觀的頁面，非常適合做網站後臺管理頁面（不夠漂亮，不適合做前臺頁面）
官方文檔：http://www.jeasyui.com/documentation/index.php
二、panel組件的創建
分兩步：
1，引入需要的樣式文件和js文件
<link rel="styleSheet" type="text/css" href="easyui的樣式地址">
<link rel="styleSheet" type="text/css" href="easyui的圖標樣式地址">
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
2，
方式一,通過設置元素的class屬性創建EasyUI控件
示例代碼：
<div class="easyui-panel" data-options="title:‘面板組件‘,width:300,height:185">
<p>內容</p>
</div>
方式二，通過js代碼創建EasyUI控件
//調用對象的panel屬性，利用{key1:value1,key2:value2}鍵值對的形式進行添加
$(document).ready(function(){
$("#div01").panel({
width:300,
height:185,
title:‘面板組件‘,
context:‘內容‘
});
});
三、panel的屬性
EasyUI組件的屬性用來指定組件的樣式、結構、內容等
title: 指定panel的標題
width 指定panel的寬度
height 指定panel的高度
fit 設置panel的大小是否適應父容器，值是true或者false //註意是父容器
border 設置panel是都顯示邊框 值是true或者false
collapsible 設置是否顯示可折疊按鈕，值是true或者false
closeable 設置是否顯示關閉按鈕，值是true或者false
href 加載另一個頁面的內容 註意：被加載頁面的body之外的內容會被忽略！！
註意：很多組件屬性的效果也可以使用HTML元素屬性或者CSS樣式屬性的方式來實現
在標簽內部寫style屬性，或者<style></style>寫CSS代碼
四、panel的事件屬性
onBeforeCollapse panel折疊前觸發，可以在事件處理函數中阻止折疊
onCollapse panel折疊後觸發
註意：panel事件屬於組件的屬性，使用上也是以鍵值對的形式
示例代碼：
onBeforeCollapse: function () {
var ss = confirm("是否真的要折疊");
if(ss){
}else{
return false;
}
}
五、panel的方法
setTitle 設置標題
open 打開
close 關閉
options 可以查看參數
組件的方法的調用格式：
jQuery對象.panel方法(方法名,參數列表);
示例代碼：
$("#btn01").click(function () {
$("#input01").panel("setTitle","新標題")
});
$("#btn02").click(function () {
$("#input01").panel("close");
});
$("#btn03").click(function () {
$("#input01").panel("open");
});
六、EasyUI的圖標
使用方法：data-options屬性中指定iconCls:‘圖標名稱‘
示例代碼：
iconCls:‘icon-add‘
七、鏈接按鈕
EasyUI通常把一個超鏈接改造成一個按鈕的樣式使用，稱之為linkbutton組件。
註意，是將一個超鏈接進行改動
特點：圓角、可添加圖標、美觀、可以添加事件
連接按鈕屬性：
disable 是否可以點擊，值是true或者false，true為不可以被點擊
iconCls 可以選擇圖標
示例代碼：
<a class="easyui-linkbutton" data-options="disable:true,iconCls:icon-add">add</a>
註意：不要忘記導入easyui的文件（兩個樣式屬性、jQuery和easyUI）
事件屬性：
onClick
示例代碼：
$(document).ready(function(){
$("a").linkbutton("disable",true);
});
八、表單控件
EasyUI封裝了很多表單控件，主要是提供數據有效性校驗功能
validatebox控件 屬性：required、validType、invalidMessage、validateOnBlur
textbox控件
datebox控件 屬性：formatter
datetimebox控件
form控件 屬性：url、success、onSubmit 方法：submit、validate
九、window組件
window組件用來彈出一個子窗口，方便添加、修改等操作
窗口組件基於panel組件
常用屬性：href、width、height
十、tabs標簽頁組件
tabs標簽頁可以看成由多個panel組成，但同一時間只顯示一個panel的內容
tabs組件的主要操作有：創建新tab頁、選擇tab頁
<div id="tt" class="easyui-tabs" data-options="width:600,height:371">
<div title="Tab1">
tab1 content
</div>
<div title="Tab2" data-options="closable:true">
tab2 content
</div>
</div>
屬性：fit是否填充父元素
方法：add、exists、select
十一、tree組件
tree組件一般用來做系統導航欄
<ul class="easyui-tree">
<li>
<span>Folder1</span>
<ul>
<li><span>File1</span></li>
<li><span>File2</span></li>
</ul>
</li>
<li>
<span>Folder2</span>
<ul>
<li><span>File4</span></li>
<li><span>File5</span></li>
</ul>
</li>
</ul>
很多時候采用這種方式為節點添加點擊動作：
<li>
<span>
<a href="#" onClick="xx()">File1</a>
</span>
</li>
十二、layout布局組件
EasyUI布局組件把頁面分為上、下、左、右、中間5個區域，分別稱為north、south、west、east、center，每個區域實際上是個panel組件
layout組件可以使用在<body>上也可以使用在<div>上
<body class="easyui-layout">
<div data-options="region:‘north‘,title:‘North Title‘,split:true" style="height:100px;"></div>
<div data-options="region:‘south‘,title:‘South Title‘,split:true" style="height:100px;"></div>
<div data-options="region:‘east‘,title:‘East‘,split:true" style="width:100px;"></div>
<div data-options="region:‘west‘,title:‘West‘,split:true" style="width:100px;"></div>
<div data-options="region:‘center‘,title:‘center title‘" style="background:#eee;"></div>
</body>
十三、datagrid數據表格
屬性：url、pagination、toolbar、loadFilter
方法：load、reload
<table class="easyui-datagrid"
data-options="title:‘用戶管理‘,pagination:true,width:600" >
<thead>
<tr>
<th data-options="field:‘email‘,width:140">登錄郵箱</th>
<th data-options="field:‘name‘,width:120">真實姓名</th>
<th data-options="field:‘phone‘,width:120">手機號碼</th>
<th data-options="field:‘school‘,width:120">畢業院校</th>
</tr>
</thead>
</table>
每次進行分有人操作，都會向url屬性指定的路徑發送請求，請求參數有page、rows
十四、結束語
EasyUI的主要內容就是主要組件的用法：panel、linkbutton、form、window、tabs、tree、layout、datagrid等
這些組件基本滿足我們對於後臺管理系統項目的布局、導航、列表、添加、修改、刪除等功能
學習的時候只要學習這些組件就可以了，如果在以後的工作中使用到EasyUI的其他組件，可以參考官方文檔
如鵬網學習筆記（十三）EasyUI