????? 在 B/S 開發(fā)中頁面制作涉及 HTML 、 CSS 、 javascript 等技術(shù)，我們隨掌握相關(guān)技術(shù)，但實(shí)際開發(fā)中頁面美化特別是樣式設(shè)計(jì)一直困擾著我們。怎樣更好、更快的設(shè)計(jì)美觀、專業(yè)、時(shí)代性的頁面呢？ JQuery EasyUI 就能幫助我們解決這個(gè)問題。
jQuery EasyUI 是一組基于 jQuery 的 UI 插件集合，而 jQuery EasyUI 的目標(biāo)就是幫助 web 開發(fā)者更輕松的打造出功能豐富并且美觀的 UI 界面。開發(fā)者不需要編寫復(fù)雜的 javascript ，也不需要對(duì) css 樣式有深入的了解，開發(fā)者需要了解的只有一些簡單的 html 標(biāo)簽。
? ???? jQuery EasyUI 為我們提供了大多數(shù) UI 控件的使用，如： accordion ， combobox ， menu ， dialog （ 網(wǎng)頁窗體效果 ）， tabs ， tree ， DataGrid （強(qiáng)大的 數(shù)據(jù)的綁定和顯示控件 ）， ValidateBox （ 數(shù)據(jù)驗(yàn)證控件，可以很好的對(duì)表單數(shù)據(jù)進(jìn)行驗(yàn)證 ）、 window 等等。
OK ，下面就開始我們的探索之旅 …
|
|
一、 JqueryEasyUI 準(zhǔn)備
1 、下載 jQuery EasyUI 1.2.3
2 、將下載包中下列內(nèi)容拷貝到你項(xiàng)目中
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 （網(wǎng)頁窗體效果）
輕松實(shí)現(xiàn)在顯示頁面對(duì)話框，可定制工具欄、按鈕、對(duì)話框內(nèi)容，足以滿足應(yīng)用的需要，效果如下：
語法格式：
$( ‘ #dd ’ ).dialog(options);
Options 是參數(shù)描述，描述形式是 { 屬性名：值 , 屬性名：值 ,…}, 在很多 JQuery 框架中方法的參數(shù)都是這樣描述的
主要屬性列表：
l ???????? title ： ‘ 對(duì)話框標(biāo)題 ’ ?
l ???????? minimizable :true|false
l ???????? maximizable :true|false
l ???????? resizable ? :true|false ?? ????
l ???????? toolbar :[{…},{…},{…},…] ??? // 定義工具欄
l ???????? buttons ::[{…},{…},{…},…] ? // 定義對(duì)話框右下角的按鈕
對(duì)于屬性有多個(gè)值的設(shè)置，采用如下形式（同樣大多數(shù) JQuery 框架中也都是這樣描述的）：
[
{text:' 添加 ',iconCls:'icon-add',handler:function(){alert('t');}},
{text:' 查詢 ',iconCls:'icon-search',handler:function(){alert('t');}
]
說明 iconCls 設(shè)置按鈕的圖標(biāo)樣式，目前 jQuery EasyUI 圖標(biāo)有（存放在 themes/icons 目錄）：
對(duì)應(yīng)的樣式即 icon- 圖標(biāo)文件名
代碼實(shí)現(xiàn)：
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 = " 彈框練習(xí) " >
??? <!— 在此處組織 對(duì)話框的內(nèi)容 -->
??? Dialog Content
</ div >
Open.js:
function Open_Dialog() {
??? $ ( '#mydialog' ).show();// 首先把隱藏的層顯示出來
??? $ ( '#mydialog' ).dialog(
??????? { ? minimizable: true ,
??????????? maximizable: true ,
??????????? toolbar: [{
??????????? text: ' 添加 ' ,
??????????? iconCls: 'icon-add' ,
??????????? handler: function () {
??????????????? alert( ' 添加數(shù)據(jù) ' )
??????????????? }
??????????? },{
??????????????? text: ' 查詢 ' ,
??????????????? iconCls: 'icon-search' ,
??????????????? handler: function () {
??????????????? alert( ' 查詢數(shù)據(jù) ' ) }
??????????? }],
??????????? buttons: [{
??????????????? text: ' 關(guān)閉 ' ,
??????????????? handler: function () {
??????????????? $ ( '#mydialog' ).dialog( 'close' );
??????????????? }
??????????????? }]
??????? });
}
這樣就 ok ，試一下吧！
?
三、各種消息框
Js 中的 alert() 、 confirm() 外觀太土氣了，現(xiàn)在都是采用彈出層的效果，要與時(shí)俱進(jìn)
使用 messager 組件可輕松實(shí)現(xiàn)
1、 ? 顯示消息框
$.messager.alert(title, msg, icon, fn ) ，效果如下：
2 、 $.messager.confirm(title, msg, fn ) ，效果如下：
?
Messager 的 這兩個(gè)方法十分簡單 ,title 設(shè)置對(duì)話框的標(biāo)題， msg 對(duì)話框的內(nèi)容， icon 對(duì)話框上的圖標(biāo)類型（取值： error,question,info,warning ）， fn 單擊按鈕要調(diào)用的函數(shù)
示例代碼：
< script >
function alert_info() {
??? $.messager.alert( ' 消息框 ' , ' 消息 ' , 'info' );
}
function confirm_info() {
??? $.messager.confirm( ' 確認(rèn) ' , ' 要?jiǎng)h除嗎？ ' , function (ret) {
??????? if (ret) {
??????????? $.messager.alert( ' 消息 ' , ' 已刪除 ' );
??????? }
??? } );
}
</ script >
?
< a href = "javascript:alert_info();" > 消息 </ a >< br >
< a href = "javascript:confirm_info();" > 確認(rèn) </ a >< br >
?
3 、 $.messager.show(Options)
比較特殊，是在屏幕的右下角顯示消息框，可設(shè)置超時(shí)時(shí)間（ the message window will be auto closed when timeout. ），常常用來制作及時(shí)提醒的效果
Options 是參數(shù)描述，描述形式是 { 屬性名：值 , 屬性名：值 ,…}
主要屬性 :
Width: 窗體寬度
Height: 窗體高度
Msg: 窗體文本內(nèi)容
Title: 窗體標(biāo)題
Timeout: 設(shè)置窗口的多長時(shí)間關(guān)閉
showType: 消息窗口的顯示方式： null ， slide ， fade ， show 。默認(rèn)是 slide
?
示例代碼：
function show() {
? ? $.messager.show( {
??? ? ? title: ' 提示信息 ' ,
??? ? ? msg: ' 信息 5 秒后消失 ' ,
??? ? ? showType: 'show' ,
??? ? ? height:300,
??? ? ? width:400,
??????? timeout:5000 ? ?
? ? } );
? }
<a href="javascript:void(0)" onClick="show()"> 顯示 </a> |
?
四、表單驗(yàn)證
表單驗(yàn)證：一要編寫驗(yàn)證規(guī)則；二要編寫信息顯示效果。比較麻煩，占據(jù)我們比較多的時(shí)間，而 JQuery EasyUI 提供的驗(yàn)證組件很好的解決這個(gè)問題，只需在表單字段上做如下設(shè)置：
Class= "easyui-validatebox" ? 設(shè)置驗(yàn)證結(jié)果的樣式
validType=” email ” ? 應(yīng)用 驗(yàn)證規(guī)則
required = "true" ? 決定是否必須填寫
missingMessage=”Email 必須填寫 ” ? 設(shè)置顯示信息
invalidMessage=”Email 格式無效 ” ?? 設(shè)置顯示信息
即可，是不是很容易
不過 validType 只有 email 、 url 、 length[m,n] 幾種 驗(yàn)證規(guī)則
效果演示：
代碼：
< 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 數(shù)據(jù)列表控件
DataGrid 用來做什么的呢？讓我們先看看用它實(shí)現(xiàn)的效果：
通過 DataGrid 可以以表格的形式呈現(xiàn)數(shù)據(jù)，可以實(shí)現(xiàn)分頁、排序、執(zhí)行添加、修改、刪除數(shù)據(jù)， 為我們提供很多便利，正因?yàn)? DataGrid 的強(qiáng)大，所以使用起來也相當(dāng)比較復(fù)雜，我們先從基本的學(xué)起，逐步深入
一、基本屬性
Title ： DataGrid 的標(biāo)題
Width ：寬度
Height ：高度
iconCls ： DataGrid 的圖標(biāo)
二、定義列標(biāo)題， DataGrid 有兩種形式的列標(biāo)題
定義普通列屬性
Columns
定義凍結(jié)列：被凍結(jié)的列將不隨著水平滑塊的滾動(dòng)而滾動(dòng)（類似于 Excel 效果）
frozenColumns
兩種列標(biāo)題設(shè)置列的值是一樣的
[{field:'age',title:' 年齡 ',width:50},{field:'grade',title:' 班級(jí) ',width:80},… ? ]
field: 標(biāo)題名稱（與 json 數(shù)據(jù)的屬性名一致）
title ：標(biāo)題文本
width: 寬度
三、綁定數(shù)據(jù)
url ： ‘ 數(shù)據(jù)源 ’ ，要求采用 Json 格式組織數(shù)據(jù)
指定 json 文件
動(dòng)態(tài)產(chǎn)生（稍后講解）
特定的 Json 格式數(shù)據(jù)，要求如下：
{"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 描述要顯示的所有行數(shù)據(jù)，使用 { ‘屬性名’：‘值’ ,. ‘屬性名’：‘值’ ,…} 描述一條記錄，記錄之間用 ’,’ 分割， 注意屬性名要與列標(biāo)題的 field 屬性值一致，這樣記錄就綁定到 DataGrid 上了
四：定義工具欄
toolbar
值： [{text:' 添加 ',iconCls:'icon-add'},'-',{text:' 刪除 ',iconCls:'icon-remove'}]
?
這些是 DataGrid 最核心的屬性掌握了這些，我們來做個(gè)練習(xí)
?
代碼演示 :
? 頁面部分：
? < 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( ' 添加數(shù)據(jù) ' )
??????????? } } , '-' ,
??????????? {
??????????? text: ' 保存 ' ,
??????????? iconCls: 'icon-save' ,
??????????? handler: function () {
??????????? alert( ' 保存數(shù)據(jù) ' )
??????? } } ]
??? } );
} );
?
五、數(shù)據(jù)分頁
DataGrid 跟分頁相關(guān)的屬性有主要有三個(gè)：
pagination ： true ? 表示使用分頁
pageSize ： 5 ? 設(shè)置一頁顯示多少條記錄
pageList ： [5,10,20] ?? 設(shè)置下拉列表的選項(xiàng) ， 通過該選項(xiàng)可以重新設(shè)置分頁尺寸
注意若 pagination ： true ? 數(shù)據(jù)源（ json 數(shù)據(jù)）必須設(shè)置 total 屬性，通過該屬性設(shè)置數(shù)據(jù)的總記錄數(shù)，這對(duì)于分頁是必須得
Json 數(shù)據(jù)格式：
{ “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 動(dòng)態(tài)顯示數(shù)據(jù)并實(shí)現(xiàn)分頁
主要三個(gè)步驟：
步驟 1 ：設(shè)置 url: '/demo/ListServlet‘
步驟 2 ：編寫后臺(tái)組件
接受二個(gè)參數(shù)： page: 頁號(hào)； rows: 每頁記錄大小
這兩個(gè)參數(shù)是 DataGrid 分頁導(dǎo)航向目標(biāo)（ url 設(shè)置的動(dòng)態(tài)頁面）傳遞的數(shù)據(jù)
提取數(shù)據(jù)集合 (List)
步驟 3 ：轉(zhuǎn)化 JSon 格式
使用 json-lib 組件
完整示例代碼如下：
頁面：
< body >
< table id = "student" ></ table >
</ body >
JS 代碼：
< script >
$( function () {
$( "#student" ).datagrid(
{
??? title: ' 學(xué)生信息 ' ,
??? width:500,
??? height:400,
??? iconCls: 'icon-save' ,
??? url: '/querydemo/ListServlet' ,
??? idField: "id" ,
??? singleSelect: false ,
??? frozenColumns:[[
??? { field: 'ck' ,checkbox: true} ,
??? { field: 'id' ,title: ' 編號(hào) ' ,width:50 } ,
??? { field: 'name' ,title: ' 姓名 ' ,width:100 }
??? ]],
??? columns:[
??????? [
??????????? { field: 'age' ,title: ' 年齡 ' ,width:50 } ,
??????????? { field: 'grade' ,title: ' 班級(jí) ' ,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 數(shù)據(jù)轉(zhuǎn)為 Json 格式數(shù)據(jù)，然后通過 Response 輸出到客戶端
??????? JSONObject jsonobj = new JSONObject();// 創(chuàng)建 JSObject 組件
// 將要轉(zhuǎn)換的數(shù)據(jù)放置到 jsonobj 中
??? ??? // 放置 DataGrid 分頁所需要的 total 屬性其值
??????? jsonobj .put( "total" , pm.getTotalCount());
??????? // 放置 DataGrid 分頁所需要的 rows 屬性及其值 ???
jsonobj .put( "rows" , pm.getData());
// 將存放在 jsonobj 的數(shù)據(jù)，轉(zhuǎn)化為 JSON 格式
??????? jsonobj .toString()
?
注意：需要向項(xiàng)目中加入如下 Jar 包
?
?
業(yè)務(wù)層代碼（ StudentServiceImpl ）：
private List< Student > stuList = new ArrayList< Student >();
??? public StudentServiceImpl(){
??????? // 可操作數(shù)據(jù)庫，這里在 list 中組織數(shù)據(jù)
??????? 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, " 關(guān)羽 " ,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, " 孫權(quán) " ,18, "S2" ));
??????? stuList .add( new Student (1009, " 孫堅(jiān) " ,18, "S2" ));
??????? stuList .add( new Student (1010, " 關(guān)平 " ,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;
??? }
實(shí)體組件：
PageMode ：
public class PageMode {
???
??? // 封裝總記錄數(shù)
private int totalCount ;
// 封裝數(shù)據(jù)
??? 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 方法
}
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫作最大的動(dòng)力，如果您喜歡我的文章，感覺我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長非常感激您！手機(jī)微信長按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
