????? 在 B/S 開發中頁面制作涉及 HTML 、 CSS 、 javascript 等技術，我們隨掌握相關技術，但實際開發中頁面美化特別是樣式設計一直困擾著我們。怎樣更好、更快的設計美觀、專業、時代性的頁面呢？ JQuery EasyUI 就能幫助我們解決這個問題。
jQuery EasyUI 是一組基于 jQuery 的 UI 插件集合，而 jQuery EasyUI 的目標就是幫助 web 開發者更輕松的打造出功能豐富并且美觀的 UI 界面。開發者不需要編寫復雜的 javascript ，也不需要對 css 樣式有深入的了解，開發者需要了解的只有一些簡單的 html 標簽。
? ???? jQuery EasyUI 為我們提供了大多數 UI 控件的使用，如： accordion ， combobox ， menu ， dialog （ 網頁窗體效果 ）， tabs ， tree ， DataGrid （強大的 數據的綁定和顯示控件 ）， ValidateBox （ 數據驗證控件，可以很好的對表單數據進行驗證 ）、 window 等等。
OK ，下面就開始我們的探索之旅 …
|
|
一、 JqueryEasyUI 準備
1 、下載 jQuery EasyUI 1.2.3
2 、將下載包中下列內容拷貝到你項目中
themes 文件夾
jquery.easyui.min.js
jquery-1.4.4.min.js
?
3 、在頁面中加入 js/css 文件
<link rel="stylesheet" type="text/css" href="../common/themes/icon.css"/>
<link rel="stylesheet" type="text/css" href="../common/themes/default/easyui.css" />
<script type="text/javascript" src="../common/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../common/jquery.easyui.min.js"></script>
二、 Dialog （網頁窗體效果）
輕松實現在顯示頁面對話框，可定制工具欄、按鈕、對話框內容，足以滿足應用的需要，效果如下：
語法格式：
$( ‘ #dd ’ ).dialog(options);
Options 是參數描述，描述形式是 { 屬性名：值 , 屬性名：值 ,…}, 在很多 JQuery 框架中方法的參數都是這樣描述的
主要屬性列表：
l ???????? title ： ‘ 對話框標題 ’ ?
l ???????? minimizable :true|false
l ???????? maximizable :true|false
l ???????? resizable ? :true|false ?? ????
l ???????? toolbar :[{…},{…},{…},…] ??? // 定義工具欄
l ???????? buttons ::[{…},{…},{…},…] ? // 定義對話框右下角的按鈕
對于屬性有多個值的設置，采用如下形式（同樣大多數 JQuery 框架中也都是這樣描述的）：
[
{text:' 添加 ',iconCls:'icon-add',handler:function(){alert('t');}},
{text:' 查詢 ',iconCls:'icon-search',handler:function(){alert('t');}
]
說明 iconCls 設置按鈕的圖標樣式，目前 jQuery EasyUI 圖標有（存放在 themes/icons 目錄）：
對應的樣式即 icon- 圖標文件名
代碼實現：
Open.html ：
< link rel = "stylesheet" type = "text/css" href = "../themes/icon.css" >
< script type = "text/javascript" src = "../common/jquery-1.4.4.min.js" ></ script >
< script type = "text/javascript" src = "../common/jquery.easyui.min.js" ></ script >
< script type = "text/javascript" src = "open.js" ></ script >
?
< span onclick = "Open_Dialog()" > 彈框 </ span >
< div id = "mydialog" style = "display:none;padding:5px;width:400px;height:200px;" title = " 彈框練習 " >
??? <!— 在此處組織 對話框的內容 -->
??? Dialog Content
</ div >
Open.js:
function Open_Dialog() {
??? $ ( '#mydialog' ).show();// 首先把隱藏的層顯示出來
??? $ ( '#mydialog' ).dialog(
??????? { ? minimizable: true ,
??????????? maximizable: true ,
??????????? toolbar: [{
??????????? text: ' 添加 ' ,
??????????? iconCls: 'icon-add' ,
??????????? handler: function () {
??????????????? alert( ' 添加數據 ' )
??????????????? }
??????????? },{
??????????????? text: ' 查詢 ' ,
??????????????? iconCls: 'icon-search' ,
??????????????? handler: function () {
??????????????? alert( ' 查詢數據 ' ) }
??????????? }],
??????????? buttons: [{
??????????????? text: ' 關閉 ' ,
??????????????? handler: function () {
??????????????? $ ( '#mydialog' ).dialog( 'close' );
??????????????? }
??????????????? }]
??????? });
}
這樣就 ok ，試一下吧！
?
三、各種消息框
Js 中的 alert() 、 confirm() 外觀太土氣了，現在都是采用彈出層的效果，要與時俱進
使用 messager 組件可輕松實現
1、 ? 顯示消息框
$.messager.alert(title, msg, icon, fn ) ，效果如下：
2 、 $.messager.confirm(title, msg, fn ) ，效果如下：
?
Messager 的 這兩個方法十分簡單 ,title 設置對話框的標題， msg 對話框的內容， icon 對話框上的圖標類型（取值： error,question,info,warning ）， fn 單擊按鈕要調用的函數
示例代碼：
< script >
function alert_info() {
??? $.messager.alert( ' 消息框 ' , ' 消息 ' , 'info' );
}
function confirm_info() {
??? $.messager.confirm( ' 確認 ' , ' 要刪除嗎？ ' , function (ret) {
??????? if (ret) {
??????????? $.messager.alert( ' 消息 ' , ' 已刪除 ' );
??????? }
??? } );
}
</ script >
?
< a href = "javascript:alert_info();" > 消息 </ a >< br >
< a href = "javascript:confirm_info();" > 確認 </ a >< br >
?
3 、 $.messager.show(Options)
比較特殊，是在屏幕的右下角顯示消息框，可設置超時時間（ the message window will be auto closed when timeout. ），常常用來制作及時提醒的效果
Options 是參數描述，描述形式是 { 屬性名：值 , 屬性名：值 ,…}
主要屬性 :
Width: 窗體寬度
Height: 窗體高度
Msg: 窗體文本內容
Title: 窗體標題
Timeout: 設置窗口的多長時間關閉
showType: 消息窗口的顯示方式： null ， slide ， fade ， show 。默認是 slide
?
示例代碼：
function show() {
? ? $.messager.show( {
??? ? ? title: ' 提示信息 ' ,
??? ? ? msg: ' 信息 5 秒后消失 ' ,
??? ? ? showType: 'show' ,
??? ? ? height:300,
??? ? ? width:400,
??????? timeout:5000 ? ?
? ? } );
? }
<a href="javascript:void(0)" onClick="show()"> 顯示 </a> |
?
四、表單驗證
表單驗證：一要編寫驗證規則；二要編寫信息顯示效果。比較麻煩，占據我們比較多的時間，而 JQuery EasyUI 提供的驗證組件很好的解決這個問題，只需在表單字段上做如下設置：
Class= "easyui-validatebox" ? 設置驗證結果的樣式
validType=” email ” ? 應用 驗證規則
required = "true" ? 決定是否必須填寫
missingMessage=”Email 必須填寫 ” ? 設置顯示信息
invalidMessage=”Email 格式無效 ” ?? 設置顯示信息
即可，是不是很容易
不過 validType 只有 email 、 url 、 length[m,n] 幾種 驗證規則
效果演示：
代碼：
< tr >
??? < td align = "right" > 姓名 : </ td >
??? < td >< input class = "easyui-validatebox" required = "true" validType = "length[2,6]" missingMessage = " 姓名必須填寫 " ? invalidMessage = " 姓名必須是 2 到 6 位 " ></ td >
</ tr >
< tr >
??? < td ? align = "right" > 電子郵件 : </ td >
??? < td >< input class = "easyui-validatebox" required = "true" validType = "email" ></ td >
</ tr >
< tr >
??? < td ? align = "right" > URL: </ td >
??? < td >< input class = "easyui-validatebox" required = "true" validType = "url" ></ td >
</ tr >
五、 DataGrid 數據列表控件
DataGrid 用來做什么的呢？讓我們先看看用它實現的效果：
通過 DataGrid 可以以表格的形式呈現數據，可以實現分頁、排序、執行添加、修改、刪除數據， 為我們提供很多便利，正因為 DataGrid 的強大，所以使用起來也相當比較復雜，我們先從基本的學起，逐步深入
一、基本屬性
Title ： DataGrid 的標題
Width ：寬度
Height ：高度
iconCls ： DataGrid 的圖標
二、定義列標題， DataGrid 有兩種形式的列標題
定義普通列屬性
Columns
定義凍結列：被凍結的列將不隨著水平滑塊的滾動而滾動（類似于 Excel 效果）
frozenColumns
兩種列標題設置列的值是一樣的
[{field:'age',title:' 年齡 ',width:50},{field:'grade',title:' 班級 ',width:80},… ? ]
field: 標題名稱（與 json 數據的屬性名一致）
title ：標題文本
width: 寬度
三、綁定數據
url ： ‘ 數據源 ’ ，要求采用 Json 格式組織數據
指定 json 文件
動態產生（稍后講解）
特定的 Json 格式數據，要求如下：
{"rows":[
?????? {"id":"1001","name":"Jack","age":18,"grade":"S101"},
?????? {"id":"1002","name":"Peter","age":18,"grade":"S101"},
?????? {"id":"1003","name":"John","age":18,"grade":"S101"} ]
}
說明： rows 描述要顯示的所有行數據，使用 { ‘屬性名’：‘值’ ,. ‘屬性名’：‘值’ ,…} 描述一條記錄，記錄之間用 ’,’ 分割， 注意屬性名要與列標題的 field 屬性值一致，這樣記錄就綁定到 DataGrid 上了
四：定義工具欄
toolbar
值： [{text:' 添加 ',iconCls:'icon-add'},'-',{text:' 刪除 ',iconCls:'icon-remove'}]
?
這些是 DataGrid 最核心的屬性掌握了這些，我們來做個練習
?
代碼演示 :
? 頁面部分：
? < body >
? ? < table id = "test" ></ table >
? </ body >
Js 代碼：
$( function () {
??? $( '#test' ).datagrid( {
??????? title: 'jQuery EasyUI---DataGrid' ,
??????? iconCls: 'icon-save' ,
??????? width: 500,
??????? height: 350, ?
??????? url: 'datagrid_data.json' , ?
??? ??? frozenColumns: [[
??????? { field: 'ck' , checkbox: true } ,
??????? { title: 'ID' , field: 'ID' , width: 80, sortable: true }
??????? ]],
??? ??? columns: [
??????? [
??????????? { field: 'name' , title: ' 姓名 ' , width: 120 } ,
??????????? { field: 'addr' , title: ' 地址 ' , width: 120, ? sortable: true } ,
??????????? { field: 'opt' , title: ' 操作 ' , width: 100, align: 'center' , ?
??????????????? formatter: function (value, rec) {
??????????????? return '<span style="color:red"> 編輯 刪除 </span>' ;
??????????????? }
??????????? }
??????? ]],
??????? toolbar: [ {
??????????? text: ' 添加 ' ,
??????????? iconCls: 'icon-add' ,
??????????? handler: function () {
??????????? alert( ' 添加數據 ' )
??????????? } } , '-' ,
??????????? {
??????????? text: ' 保存 ' ,
??????????? iconCls: 'icon-save' ,
??????????? handler: function () {
??????????? alert( ' 保存數據 ' )
??????? } } ]
??? } );
} );
?
五、數據分頁
DataGrid 跟分頁相關的屬性有主要有三個：
pagination ： true ? 表示使用分頁
pageSize ： 5 ? 設置一頁顯示多少條記錄
pageList ： [5,10,20] ?? 設置下拉列表的選項 ， 通過該選項可以重新設置分頁尺寸
注意若 pagination ： true ? 數據源（ json 數據）必須設置 total 屬性，通過該屬性設置數據的總記錄數，這對于分頁是必須得
Json 數據格式：
{ “total”:20,
"rows":[
?????? {"id":"1001","name":"Jack","age":18,"grade":"S101"},
?????? {"id":"1002","name":"Peter","age":18,"grade":"S101"},
?????? {"id":"1003","name":"John","age":18,"grade":"S101"} ]
}
?
六、使用 DataGrid 動態顯示數據并實現分頁
主要三個步驟：
步驟 1 ：設置 url: '/demo/ListServlet‘
步驟 2 ：編寫后臺組件
接受二個參數： page: 頁號； rows: 每頁記錄大小
這兩個參數是 DataGrid 分頁導航向目標（ url 設置的動態頁面）傳遞的數據
提取數據集合 (List)
步驟 3 ：轉化 JSon 格式
使用 json-lib 組件
完整示例代碼如下：
頁面：
< body >
< table id = "student" ></ table >
</ body >
JS 代碼：
< script >
$( function () {
$( "#student" ).datagrid(
{
??? title: ' 學生信息 ' ,
??? width:500,
??? height:400,
??? iconCls: 'icon-save' ,
??? url: '/querydemo/ListServlet' ,
??? idField: "id" ,
??? singleSelect: false ,
??? frozenColumns:[[
??? { field: 'ck' ,checkbox: true} ,
??? { field: 'id' ,title: ' 編號 ' ,width:50 } ,
??? { field: 'name' ,title: ' 姓名 ' ,width:100 }
??? ]],
??? columns:[
??????? [
??????????? { field: 'age' ,title: ' 年齡 ' ,width:50 } ,
??????????? { field: 'grade' ,title: ' 班級 ' ,width:80 }
??????? ],
???
??? ],
??? toolbar:[
??????? { text: " 刪除 " ,iconCls: "icon-remove" } ,
??????? { text: " 添加 " ,iconCls: "icon-add" }
??? ],
??? pagination: true ,
??? pageSize:5,
??? pageList:[5,10,20] ?
}
);
?
} );
</ script >
ListServlet 代碼：
public void doPost(HttpServletRequest request, HttpServletResponse response)
??????????? throws ServletException, IOException {
??????? response.setCharacterEncoding( "utf-8" );
??????? StudentService ss= new StudentServiceImpl();
??????? String spage=request.getParameter( "page" );
??????? String srows=request.getParameter( "rows" );
??????? if (spage== null ||spage.equals( "" )){
??????????? spage= "1" ;
??????? }
??????? if (srows== null ||srows.equals( "" )){
??????????? srows= "5" ;
??????? }
??????? int page=Integer. parseInt (spage);
??????? int row=Integer. parseInt (srows);
??????? PageMode pm=ss.getStudentList(page, row);
??????? JSONObject jsonobj = new JSONObject();
??????? jsonobj .put( "total" , pm.getTotalCount());
??????? jsonobj .put( "rows" , pm.getData());
??????? response.getWriter().print( jsonobj .toString());
??? }
說明：使用 JSObject 組件將 java 數據轉為 Json 格式數據，然后通過 Response 輸出到客戶端
??????? JSONObject jsonobj = new JSONObject();// 創建 JSObject 組件
// 將要轉換的數據放置到 jsonobj 中
??? ??? // 放置 DataGrid 分頁所需要的 total 屬性其值
??????? jsonobj .put( "total" , pm.getTotalCount());
??????? // 放置 DataGrid 分頁所需要的 rows 屬性及其值 ???
jsonobj .put( "rows" , pm.getData());
// 將存放在 jsonobj 的數據，轉化為 JSON 格式
??????? jsonobj .toString()
?
注意：需要向項目中加入如下 Jar 包
?
?
業務層代碼（ StudentServiceImpl ）：
private List< Student > stuList = new ArrayList< Student >();
??? public StudentServiceImpl(){
??????? // 可操作數據庫，這里在 list 中組織數據
??????? stuList .add( new Student (1001, " 張飛 " ,18, "S2" ));
??????? stuList .add( new Student (1002, " 劉備 " ,18, "S2" ));
??????? stuList .add( new Student (1003, " 貂蟬 " ,18, "S2" ));
??????? stuList .add( new Student (1004, " 關羽 " ,18, "S2" )); ??
??????? stuList .add( new Student (1005, " 曹操 " ,18, "S2" ));
??????? stuList .add( new Student (1006, " 夏侯惇 " ,18, "S2" ));
??????? stuList .add( new Student (1007, " 周瑜 " ,18, "S2" ));
??????? stuList .add( new Student (1008, " 孫權 " ,18, "S2" ));
??????? stuList .add( new Student (1009, " 孫堅 " ,18, "S2" ));
??????? stuList .add( new Student (1010, " 關平 " ,18, "S2" ));
??????? stuList .add( new Student (1011, "Jack" ,18, "S2" ));
??????? stuList .add( new Student (1012, "Jack" ,18, "S2" ));
??????? stuList .add( new Student (1013, "Jack" ,18, "S2" ));
??????? stuList .add( new Student (1014, "Jack" ,18, "S2" ));
??????? stuList .add( new Student (1015, "Jack" ,18, "S2" )); ?
??????? stuList .add( new Student (1016, "Jack" ,18, "S2" ));
??????? stuList .add( new Student (1017, "Jack" ,18, "S2" ));
??????? stuList .add( new Student (1018, "Jack" ,18, "S2" ));
??????? stuList .add( new Student (1019, "Jack" ,18, "S2" ));
??????? stuList .add( new Student (1020, "Jack" ,18, "S2" ));
???????
??? }
??? @Override
??? public PageMode getStudentList( int pageNo, int pageSize) {
??????? // TODO Auto-generated method stub
??????? PageMode pm= new PageMode();
??????? pm.setTotalCount(20);
??????? int offset=(pageNo-1)*pageSize;
??????? int end=pageNo*pageSize;
??????? for ( int i=offset;i<end;i++){
??????????? pm.getData().add( stuList .get(i));
??????? }
???????
??????? return pm;
??? }
實體組件：
PageMode ：
public class PageMode {
???
??? // 封裝總記錄數
private int totalCount ;
// 封裝數據
??? private List data = new ArrayList();
???
??? public int getTotalCount() {
??????? return totalCount ;
??? }
??? public void setTotalCount( int totalCount) {
??????? this . totalCount = totalCount;
??? }
??? public List getData() {
??????? return data ;
??? }
??? public void setData(List data) {
??????? this . data = data;
??? }
}
Student ：
public class Student implements java.io.Serializable {
??? private int id ;
??? private String name ;
??? private int age ;
??? private String grade ;
??? // 省略 set/get 方法
}
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
