EasyUI框架
一、概述
1.1 EasyUI是什么？
EasyUI全稱是Jquery-EasyUI,它是基于Jquery的一個UI插件庫，封裝了許多實用的控件和功能，并且是完美支持HTML5網頁的框架。提供的控件包括數據表格，樹形表格，菜單，進度條，選項卡，日期組合框，調節器，對話框等等。
EasyUI的目標就是幫助Web開發者更輕松的打造出功能豐富并且美觀的UI界面。開發者不需要編寫復雜的JavaScript，也不要對CSS樣式有深入的了解，開發者只需要了解一些簡單的Html標簽（table標簽、form標簽、div標簽等）即可。
EasyUI開發前端頁面的好處：
- 豐富的jQuery插件庫
- 使用簡單，可以快速開發出原型界面
- 支持html5，實現跨瀏覽器等等
1.2 搭建開發環境
下載地址：http://www.jeasyui.net
下載完成后直接解壓縮，其目錄結構如下圖所示：
在頁面中引入下面文件：
1.3 入門示例
<script type="text/javascript">$(function(){$.messager.alert("提示信息","這是我的第一個EasyUI程序","info");}); </script>運行效果：
二、常用控件
2.1 消息框
messager提供了不同類型的消息框。例如：confirm、alert、p’rompt等等。所有消息框都是異步的，用戶可以使用messager回調函數進行交互。
（1）消息提示框
<script type="text/javascript">$(function(){$.messager.show({title:'消息提示',msg:'添加數據成功',showType:'slide',timeout:2000});}); </script>運行效果：
（2）消息警告框
運行效果：
（3）確認對話框
運行效果：
2.2 對話框
對話框是一個特殊類型的窗口。它在頂部有一個工具欄，在底部有一個按鈕欄。默認情況下，對話框（dialog）只有一個顯示在頭部右側的關閉工具。用戶可以配置對話框行為來顯示其他工具（比如：可折疊 collapsible、可最小化 minimizable、可最大化 maximizable，等等）。
- 創建對話框：
方式一： 通過DOM節點標簽創建；
方式二：通過javascript腳本創建；
（1）DOM節點創建對話框
<div id="d1" class="easyui-dialog" title="DOM節點創建的方式" style="width: 400px;height: 200px;" data-options = "iconCls:'icon-save',resizable:true,modal:true">DOM節點創建的方式 </div>運行效果：
對話框常用屬性：
- title:定義對話框標題，如：MyDialog
- collapsible:定義是否顯示可折疊按鈕。默認:false(不顯示)
- minimizable:定義是否顯示最小化按鈕。默認:false(不顯示)
- maxmizable:定義是否顯示最大化按鈕。默認:false(不顯示)
- resizable:定義對話框窗口是否可以被拖拉縮放。默認:false(不可以)
- closable:定義是否顯示關閉按鈕。默認:true(顯示)
- closed:定義是否在初始化組件時關閉(隱藏)窗口。默認:false(不隱藏)
- modal:定義窗口是否帶有遮罩效果。默認:true(有遮罩)
- buttons:該對話框按鈕通過數組定義。
- href:定義引用的頁面的url。
（2）js腳本創建對話框
//在body標簽追加一個id=”dd”的div標簽 $('body').append('<div id="dd"></div>'); $('#dd').dialog({title:'My Dialog',width:400,height:200,closed:false,cache:false,modal:true,href:'index.html',buttons:[{text:'保存', handler:function(){$.messager.alert('系統提示','這里是點擊保存觸發的事件');}},{text:'取消',handler:function(){$('#dd').dialog('destroy'); }}] });注意：href屬性只是引入被引用<body></body>標簽之間的內容。所以被引入頁面的css、js是繼承使用父頁面的。另外一個值得大家注意的地方是，父頁面和子頁面標簽的id不能出現重復，否則會被替換。
2.3 布局控件
布局（layout）是有五個區域（北區 north、南區 south、東區 east、西區 west 和中區 center）的容器。中間的區域面板是必需的，邊緣區域面板是可選的。每個邊緣區域面板可通過拖拽邊框調整尺寸，也可以通過點擊折疊觸發器來折疊面板。
例如：
<div id="cc" class="easyui-layout" data-options="fit:true"> <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',iconCls:'icon-reload',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="padding:5px;background:#eee;"></div> </div>運行效果：
屬性說明：
- title：布局面板的標題。默認為null(String)，當為null或者不填寫，布局自動隱藏折疊按鈕；
- region：定義布局面板的位置(方向)，可以取下列值的其中之一：north、south、east、west、center；
- border：設置為true將顯示布局面板的邊框。默認為true。
- spilt：如果設置為true將顯示一個分割條，用戶可以拖動分割條來改變布局面板的尺寸。默認為false；
- iconCls：一個用來顯示布局面板頭部圖標的css類。默認為null；
2.4 表格控件
數據網格（datagrid）以表格格式顯示數據，并為選擇、排序、分組和編輯數據提供了豐富的支持。數據網格（datagrid）的設計目的是減少開發時間，且不要求開發人員具備指定的知識。它是輕量級的，但是功能豐富。它的特性包括單元格合并，多列頁眉，凍結列和頁腳，等等。
創建表格的三種方式：
- 從現有表格元素基礎上創建DataGrid
- 通過table標簽創建DataGrid
- 通過js腳本創建DataGrid
2.4.1 從現有表格元素基礎上創建DataGrid
<table class="easyui-datagrid" data-options="fit:true"> <thead> <tr> <th data-options="field:'code'">編碼</th> <th data-options="field:'name'">名稱</th> <th data-options="field:'price'">價格</th> </tr> </thead> <tbody> <tr> <td>001</td><td>name1</td><td>2323</td> </tr> <tr> <td>002</td><td>name2</td><td>4612</td> </tr> </tbody> </table>2.4.2 通過table標簽創建DataGrid
<table class="easyui-datagrid" data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true,fit:true"> <thead> <tr> <th data-options="field:'code',width:100">編碼</th> <th data-options="field:'name',width:100">名稱</th> <th data-options="field:'price',width:100,align:'right'">價格</th> </tr> </thead> </table>datagrid_data.json文件的內容是一個json數組格式的數據。
[{'code':1,'name:'電冰箱'，‘price’:1999 }, {'code':2,'name:'洗衣機'，‘price’:1599 }, {'code':3,'name:'空調'，‘price’:2999 }]2.4.3 通過js腳本創建DataGrid
首先定義一個table標簽。
<table id="dg"></table>然后通過js腳本初始化表格。
<script> $(function(){ $('#dg').datagrid({url:'datagrid_data.json', method:'get',fit:true, columns:[[ {field:'code',title:'編號',width:100}, {field:'name',title:'名稱',width:100}, {field:'price',title:'價格',width:100,align:'right',formatter:function(value,row,index) {return value + "元";}} ]]}); }); </script>表格屬性：
- nowrap:當數據長度超出列寬時將會自動截取。默認true
- idField:表示該列是唯一數據(id)。默認null
- url:用于從遠程站點請求數據的超鏈接地址。默認null
- pagination:設置為true,將在表格的底部顯示分頁工具條。默認false
- rownumbers:設置為true時,將顯示行號。默認false
- singleSelect:設置為true時，表示只能選中一行。默認false
- toolbar：添加一個工具條
- pagePosition:定義分頁欄的位置?？捎胻op、bottom（默認）、both。
- pageNumber:分頁的初始頁面數。默認1
- pageSize:初始化分頁每頁顯示的條數。默認10
- pageList:初始化分頁每頁記錄數列表。默認[10,20,30,40,50]
數據列屬性：
- title:列標題。默認undefined
- field:列字段。默認undefined
- width:列寬。默認undefined
- rowspan:表示一個單元格可以跨越多少行。默認0
- colspan:表示一個單元格可以跨越多少列。默認0
- align:表示列數據對齊方式。可用left、center、right。默認left
- checkbox:設置為true時，將在最前面顯示復選框。默認false
- formatter:格式化單元格函數有3個參數
- value:字段值
- rowData:行數據
- rowIndex:行索引
2.4.4 DataGrid的主要方法
load：載入并顯示第一頁記錄，通常用于執行條件查詢功能；
$('#table').datagrid('load', {'參數名':'參數值', ...});reload：重載表格數據，與load方法的功能相同。但是重載的是當前頁面，而不是第一頁；
$('#table').datagrid('reload');getSelected：返回被選擇的記錄。例如：
{text:'修改',iconCls:'icon-edit',handler:function(){var row = $('#dg').datagrid('getSelected');$.messager.alert('你選擇的值是：', row.code); } }2.5 Tree控件
樹形菜單用于web頁面以一個樹形結構顯示分層數據，它提供用戶展開、折疊、拖拽、編輯和異步加載等功能。
2.5.1 使用DOM標簽創建Tree
<ul id="tt" class="easyui-tree"> <li> <span>Folder</span> <ul> <li><span>Sub Folder 1</span> <ul><li> <span><a href="#">File 11</a></span></li></ul> </li> </ul> </li> <li> <span>File21</span> </li> </ul>2.5.2 js腳本創建Tree
$(function(){$('#tt').tree({ url:'tree_data.json' }); });<ul id="tt"></ul>tree_data.json文件內容的數據格式：
[{"id":1,"text":"My Documents","children":[{"id":11,"text":"Photos","state":"closed","children":[{"id":111,"text":"Friend"},{"id":112,"text":"Wife"},{"id":113,"text":"Company"}]},{"id":12,"text":"Program Files","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}]},{"id":13,"text":"index.html"},{"id":14,"text":"about.html"},{"id":15,"text":"welcome.html"}] }]屬性說明：
- id：節點ID，對加載遠程數據很重要。
- text：顯示節點文本。
- state：節點狀態，‘open’ 或 ‘closed’，默認：‘open’。如果為’closed’的時候，將不自動展開該節點。
- checked：表示該節點是否被選中。
- attributes: 被添加到節點的自定義屬性。
- children: 一個節點數組聲明了若干節點。
2.6 表單控件
form控件提供了各種方法來操作執行表單字段，比如：ajax提交, load, clear等等。當提交表單的時候，還可以調用validate方法檢查表單是否合法。
<form id="ff" method="post"> <div> <label for="name">Name:</label> <input class="easyui-validatebox" type="text" name="name" data-options="required:true" /> </div> <div> <label for="email">Email:</label> <input class="easyui-validatebox" type="text" name="email" data-options="validType:'email'" /> </div> </form>2.6.1 驗證框
validatebox(驗證框)的設計目的是為了驗證輸入的表單字段是否有效。如果用戶輸入了無效的值，它將會更改輸入框的背景顏色，并且顯示警告圖標和提示信息。
- 創建驗證框：
方式一：通過DOM標簽創建驗證框
<input id="email" class="easyui-validatebox" data-options="required:true,validType:'email'" />方式二：通過js腳本創建驗證框
<input id="email" />$('#email').validatebox({required: true, validType: 'email' });運行效果：
完整代碼：
2.6.2 輸入框
TextBox(文本框)是一個增強的輸入字段組件， 它允許用戶非常簡單的創建一組表單。它是一個用于構建其他組合控件的基礎組件，如：combo，databox、spinner等。
- 創建輸入框：
方式一：通過標簽創建輸入框
<input class="easyui-textbox" data-options="iconCls:'icon-search',required: true" style="width:300px">方式二：通過js腳本創建輸入框
<input id="tt" />$('#tt').textbox({ required: true, iconCls:'icon-man', iconAlign:'left' });運行效果：
完整代碼：
2.6.3 數值輸入框
數值輸入框是用來限制用戶只能輸入數值型數據的。他可以轉換一個輸入的元素到其他類型，比如：數字、百分比、貨幣等。
- 創建數值輸入框：
方式一：通過標簽創建；
<input class="easyui-numberbox" data-options="iconCls:'icon-search',required: true,min:0,precision:2" style="width:300px">方式二：通過js腳本創建；
// 驗證必填、最小值為0、有兩位小數 $('#tt').numberbox({ required: true, min:0,precision:2,iconAlign:'left' });運行效果：
完整代碼：
2.6.4 日期輸入框
日期輸入框結合了一個可編輯的文本框控件和允許用戶選擇日期的下拉日歷面板控件。選擇的日期會自動轉變為一個有效的日期然后填充到文本框中。選定的日期也可以被格式化為預定格式。
- 創建日期輸入框：
方式一：通過標簽創建；
<input id="dd" type="text" class="easyui-datebox" required="required"></input>方式二：通過js腳本創建；
<input id="tt" />$('#tt').datebox({ required: true });運行效果：
完整代碼：
2.6.5 下拉列表框
下拉列表框顯示一個可編輯文本框和下拉式列表，用戶可以選擇一個值或多個值。用戶可以直接輸入文本到列表頂部或選擇一個或多個當前列表中的值。
- 創建下拉列表框：
方式一：通過標簽創建；
<input id="cc" class="easyui-combobox" name="dept" data-options="valueField:'id',textField:'text',url:'get_data.json'" />get_data.json文件內容的格式：
[{"id":1,"text":"Java","desc":"Write once, run anywhere" },{"id":2,"text":"C#","desc":"One of the programming languages designed for the Common Language Infrastructure" },{"id":3,"text":"Ruby","selected":true,"desc":"A dynamic, reflective, general-purpose object-oriented programming language" },{"id":4,"text":"Perl","desc":"A high-level, general-purpose, interpreted, dynamic programming language" },{"id":5,"text":"Basic","desc":"A family of general-purpose, high-level programming languages" }]方式二：通過js腳本創建；
<input id="cc" name="dept"> $('#cc').combobox({ url:'combobox_data.json', valueField:'id', textField:'text' });方式三：通過select元素創建一個預定義結構的下拉框；
<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>方式四：創建2個有依賴關系的下拉框；
<input id="cc1" class="easyui-combobox" data-options=" valueField: 'id', textField: 'text', url: 'getData', onSelect: function(rec){ var url = 'getData?id='+rec.id; $('#cc2').combobox('reload', url); }"/> <input id="cc2" class="easyui-combobox" data-options="valueField:'id',textField:'text'" />總結
- 上一篇： EasyUI-基本框架
- 下一篇： 易邮邮件服务器(eyoumailserv