EasyUI入門，jquery-easyui
阿新 • • 發佈：2018-12-13
EasyUI入門
本章目標
- 掌握EasyUI的基本用法
重點難點 - 掌握常用的EasyUI元件的使用
- 學會檢視EasyUIAPI文件和Demo學習EasyUI的用途。
為什麼使用EasyUI
現在開發網頁對前端頁面效果要求越來越高，使用者體驗要求也越來越高，那麼如何能簡單快速的開發出具有非常酷炫和高使用者體驗的頁面呢？一些封裝好的UI外掛幫助我們解決了這個問題。
- 常見的UI框架
- jQuery UI：jQuery官方提供的UI外掛。
- Bootstrap：來自Twitter的一款前端開源框架，目前也非常受歡迎。
- EasyUI：一套功能強大，並且使用簡單的UI外掛。
- MiniUI：和EasyUI類似，相當於Mini版的EasyUI。
- ExtJS：功能非常強大的重量級前端框架，無論是功能還是介面ExtJS都是業內頂尖的。但由於使用複雜，體積龐大，不適合初學者。
什麼是EasyUI
EasyUI 是一個基於jQuery 的UI框架，jQueryEasyUI的目標就是幫助Web開發者更輕鬆的打造功能豐富，並且頁面美觀的UI介面。
EasyUI的特點
- 基於jQuery使用者介面外掛的集合
- 為一些當前用於互動的js應用提供必要的功能。
- 使用EasyUI你不需要寫很多的javascript程式碼，通常只需要定義html標記來定義使用者介面即可。
- 開發產品時可節省大量的時間和資源。
- 簡單，但很強大。
- 支援擴充套件，可根據專案需求擴充套件外掛。
- 支援HTML5
- 免費版和商業版
比較適合建立後臺管理頁面
EasyUI的文件結構
- EasyUI的文件結構
- demo：示例程式碼
- demo-mobile：對應手機端示例程式碼
- locale:國際化語言包
- plugins：外掛包
- src：核心程式碼包
- themes：面板樣式檔案
- Jquery-easyui.min.js：easyui核心js檔案
- jquery-min.js：所依賴的jquery檔案
如何匯入EasyUI
在使用EasyUI之前必須先將先引入對應的JS檔案，由於EasyUI是在jQuery基礎上進行開發的，所以還必須在其他js之前引用對應的jquery檔案和css檔案。
<!--jquery檔案-->
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<!--easyui核心檔案-->
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<!--對應的語言包-->
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<!--面板檔案-->
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />
<!--圖示檔案-->
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />
如何使用EasyUI
使用EasyUI有兩種方式
-
HTML靜態class方式：通過指定class屬性來設定
<div class="easyui-dialog" title="標題" style="width:400px;height:200px"></div> -
通過js方式進行載入
<div id="box" style="width:400px;height:200px;">彈出對話方塊</div>$(function(){ $('#box').dialog(); });
注意：一般推薦使用js方式進行載入，因為一個UI元件有很多個屬性和方法，如果使用class將有極大的不方便。
智慧載入方式
-
除了前面提供了載入方式外，EasyUI還提供一種智慧載入方式。
-
智慧載入是不去載入easyui.min.js和easyui.css等大體積的js和css檔案，根據我們當前頁面的需要去載入用到的js和css樣式檔案。
-
要使用智慧載入首先需要引入easyloader.js，將其他js和 css檔案去掉。（需要保留jquery.js檔案）
<script type="text/javascript" src="easyui/easyloader.js"></script> -
使用easyload.load()方法進行按需載入
easyloader.load("dialog",function(){ $("#box").dialog(); });
注意：使用智慧載入的根據你所使用的ui元件按需載入，我們可以通過原始碼看到載入了非常多的JS和CSS，使用智慧載入會減少不必要的內容載入，但是會提高編碼的難度，降低效率。
Parser解析器
- Parser解析器是專門用來解析UI元件的，一般來說，我們不需要使用它即可完成UI元件的解析工作。當然，也可能在某些環境下手動進行解析。
| 屬性 | 值 | 說明 |
|---|---|---|
| $.parser.auto | true|false | 定義是否自動解析easyUI元件 |
$.parser.auto=false; //當設定為false時，頁面中指定class將不能完成解析。
注意：$.parser.auto = false，必須放在$(function(){})方法之外，否則無效。
- Parser除了auto屬性以外，還提供手動解析UI元件的方法。
| 方法 | 引數 | 說明 |
|---|---|---|
| $.parser.parse() | 空或者jq選擇器 | 當為空時，解析頁面中所有的UI元件，當為jq選擇器時，解析指定的UI元件。 |
| $.parser.onComplete | 回撥函式 | 當頁面中的UI元件解析完畢後指定的方法。 |
//UI解析完畢後執行的方法。必須放在$(function(){})之外
$.parser.onComplete = function(){
alert("UI解析完畢");
}
EasyUI中的外掛
EasyUI提供了豐富的外掛，適用於各種情況和場景。
- 基本類(Base)
- 佈局類(Layout)
- 視窗類(Window)
- 選單與按鈕類(Menu和Button)
- 樹形選單類(Tree)
- 資料網格類(Grid)
- 表單類(Form)
外掛演示
由於EasyUI中的外掛較多，直接對照幫助文件和Demo進行講解演示。
動態載入樹選單和開啟頁面
<script type="text/javascript">
$(function() {
$("#menuTree").tree({
lines:true,
url:'tree_data1.json',
onLoadSuccess:function(){
$("#tree").tree('expandAll');
},
onClick:function(node){
console.info(node);
if(node.path){
openTab(node);
}else if(node.id==16){
logOut();
}else if(node.id==15){
openPasswordModifyDialog();
}
}
});
<!--開啟標籤!-->
function openTab(node){
if ($("#tabs").tabs("exists",node.text)) {
$("#tabs").tabs("select",node.text);
}else{
var content="<iframe frameborder=0 scrolling='auto' style='width:100%;height:100%' src="+node.path+"></iframe>";
$("#tabs").tabs("add",{
title:node.text,
iconCls:node.iconCls,
closable:true,
content:content
});
}
}
})
</script>
easyui 元件使用
easyui佈局
- 匯入easyui依賴js、css檔案
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
- 通過html佈局
<body class="easyui-layout">
<div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">頂部</div>
<div data-options="region:'west',split:true,title:'West'" style="width:250px;padding:10px;">
左邊選單
</div>
<div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width:100px;padding:10px;">右邊選單</div>
<div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">底部</div>
<div data-options="region:'center',title:'Center'">
<div id="tabs" class="easyui-tabs" data-options="tools:'#tab-tools'" style="width:100%;height:630px">
</div>
</body>
樹形選單
- html通過div定義樹形節點
<div id="easyui-tree" class="easyui-panel" style="padding:5px"></div>
- js載入資料
$("#easyui-tree").tree({
url:'tree_data.json',
method:'get',
animate:true,
onLoadSuccess:function(){
$("#easyui-panel").tree('expandAll');
},
lines:true,
onClick: function(node) {
openTab(node);
}
});
- tree_data.json
[
{
"id": 11,
"text": "系統管理",
"state": "closed",
"children": [
{
"id": 111,
"text": "使用者管理",
"path": "userManage.jsp"
},
{
"id": 112,
"text": "角色管理",
"path": "roleManage.html"
},
{
"id": 113,
"text": "許可權管理"
}
]
},
{
"id": 12,
"text": "訂單管理",
"children": [
{
"id": 121,
"text": "Intel"
},
{
"id": 122,
"text": "Java",
"attributes": {
"p1": "Custom Attribute1",
"p2": "Custom Attribute2"
}
},
{
"id": 123,
"text": "Microsoft Office"
},
{
"id": 124,
"text": "Games",
"checked": true
}
]
}
]
表格使用
- 通過html中的table標籤定義表格
<table id="grid"></table>
- js非同步載入表格中的資料
$(function() {
$("#grid").datagrid({
title : 'Load Data', // 表格標題
iconCls : 'icon-save', // 表格圖示
width : 600, // 寬度
height : 250, // 高度
url : 'datagrid_data.json', // 非同步載入資料的url地址
columns : [ [ { // 定義所有列
field : "itemid", //json資料返回的欄位名
title : "編號", // 表格中列標題
width : 80 // 表格中列的寬度
}, {
field : "productid",
title : "商品",
width : 80
}, {
field : "listprice",
title : "價格",
width : 80
}, {
field : "unitcost",
title : "單位",
width : 80
}, {
field : "attr1",
title : "屬性",
width : 80
}, {
field : "status",
title : "狀態",
width : 80
} ] ]
});
});
- json資料
{
"total": 28,
"rows": [
{
"productid": "FI-SW-01",
"productname": "Koi",
"unitcost": 10.00,
"status": "P",
"listprice": 36.50,
"attr1": "Large",
"itemid": "EST-1"
},
{
"productid": "K9-DL-01",
"productname": "Dalmation",
"unitcost": 12.00,
"status": "P",
"listprice": 18.50,
"attr1": "Spotted Adult Female",
"itemid": "EST-10"
},
{
"productid": "RP-SN-01",
"productname": "Rattlesnake",
"unitcost": 12.00,
"status": "P",
"listprice": 38.50,
"attr1": "Venomless",
"itemid": "EST-11"
},
{
"productid": "RP-SN-01",
"productname": "Rattlesnake",
"unitcost": 12.00,
"status": "P",
"listprice": 26.50,
"attr1": "Rattleless",
"itemid": "EST-12"
},
{
"productid": "RP-LI-02",
"productname": "Iguana",
"unitcost": 12.00,
"status": "P",
"listprice": 35.50,
"attr1": "Green Adult",
"itemid": "EST-13"
},
{
"productid": "FL-DSH-01",
"productname": "Manx",
"unitcost": 12.00,
"status": "P",
"listprice": 158.50,
"attr1": "Tailless",
"itemid": "EST-14"
},
{
"productid": "FL-DSH-01",
"productname": "Manx",
"unitcost": 12.00,
"status": "P",
"listprice": 83.50,
"attr1": "With tail",
"itemid": "EST-15"
},
{
"productid": "FL-DLH-02",
"productname": "Persian",
"unitcost": 12.00,
"status": "P",
"listprice": 23.50,
"attr1": "Adult Female",
"itemid": "EST-16"
},
{
"productid": "FL-DLH-02",
"productname": "Persian",
"unitcost": 12.00,
"status": "P",
"listprice": 89.50,
"attr1": "Adult Male",
"itemid": "EST-17"
},
{
"productid": "AV-CB-01",
"productname": "Amazon Parrot",
"unitcost": 92.00,
"status": "P",
"listprice": 63.50,
"attr1": "Adult Male",
"itemid": "EST-18"
}
]
}
easy ui 所有圖示
<a href="###" class="easyui-linkbutton" iconCls="icon-add">icon-add</a>
<a href="###" class="easyui-linkbutton" iconCls="icon-edit">icon-edit</a>
<a href="###" class="easyui-linkbutton" iconCls="icon-clear">icon-clear</a>
<a href="###" class="easyui-linkbutton" iconCls="icon-remove">icon-remove</a>
<a href="###" class="easyui-linkbutton"