一、EasyUI組件的簡單介紹
easyUI提供了很多組件讓我們使用，如下圖所示：
使用這些組件可以幫助我們快速地進行項目開發，下面以一個用戶登錄程序為例講解EasyUI組件的使用
二、EasyUI組件的使用
2.1、創建測試的JavaWeb項目
2.2、編寫測試代碼
編寫一個用戶登錄頁面Login1.html，用於輸入用戶名和密碼進行登錄，使用JQuery的ajax方法異步提交表單
Login1.html的代碼如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>EasyUI組件使用范例</title> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 <!-- 引入JQuery --> 7 <script type="text/javascript" src="jquery-easyui-1.4.1/jquery.min.js"></script> 8 <!-- 引入EasyUI --> 9 <script type="text/javascript" src="jquery-easyui-1.4.1/jquery.easyui.min.js"></script> 10 <!-- 引入EasyUI的中文國際化js，讓EasyUI支持中文 --> 11 <script type="text/javascript" src="jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script> 12 <!-- 引入EasyUI的樣式文件--> 13 <link rel="stylesheet" href="jquery-easyui-1.4.1/themes/default/easyui.css" type="text/css"/> 14 <!-- 引入EasyUI的圖標樣式文件--> 15 <link rel="stylesheet" href="jquery-easyui-1.4.1/themes/icon.css" type="text/css"/> 16 <script type="text/javascript" src="js/Utils.js"></script> 17 <script type="text/javascript"> 18 $(function(){ 19 //console.info(g_contextPath); 20 //console.info(g_basePath); 21 //頁面加載完成之后創建登錄的dialog 22 $('#loginAndRegisterForm').dialog({ 23 title: '用戶登錄', 24 width: 240, 25 height: 150, 26 closable: false,//設置dialog不允許被關閉 27 cache: false, 28 modal: true, 29 buttons:[ 30 { 31 text:'登錄', 32 iconCls: 'icon-ok', 33 width:70, 34 height:30, 35 handler:function(){ 36 //console.info(g_contextPath+'/servlet/LoginHandleServlet'); 37 //console.info(g_basePath+'/servlet/LoginHandleServlet'); 38 //console.info($('#loginForm').serialize());//在火狐中打印的結果：userName=gacl&userPwd=123 39 loginHandle();//處理用戶登錄 40 } 41 }, 42 { 43 text:'重置', 44 iconCls: 'icon-ok', 45 width:70, 46 height:30, 47 handler:function(){ 48 doReset('loginForm'); 49 } 50 } 51 ] 52 53 }); 54 55 /*重置form表單*/ 56 function doReset(formId){ 57 $(':input','#'+formId) 58 .not(':button, :submit, :reset, :hidden') 59 .val('') 60 .removeAttr('checked') 61 .removeAttr('selected'); 62 } 63 64 /*處理用戶登錄*/ 65 function loginHandle(){ 66 $.ajax({ 67 //url:g_contextPath+'/servlet/LoginHandleServlet', 68 url:g_basePath+'/servlet/LoginHandleServlet',//url表示服務器端處理用戶登錄的URL地址 69 /*data:{ 70 //data表示要提交到服務器端的數據，通常的寫法 71 "userName":$("#userName").val(), 72 "userPwd":$("#userPwd").val() 73 },*/ 74 //data表示要提交到服務器端的數據，更加簡潔的寫法 75 data:$('#loginForm').serialize(),//serialize()方法的作用是將form表單中的內容序列化成字符串 76 cahe:false, 77 /* 78 用dataType來指明服務器端返回的數據格式是一個json字符串，客戶端接收到返回的json字符串之后， 79 Jquery會自動把這個json字符串轉換成一個Json對象 80 */ 81 dataType:'json', 82 success:function(r){ 83 //此時的r已經是經過Jquery處理過之后的Json對象了 84 //console.info(r.msg); 85 if(r && r.success){ 86 //調用dialog的close方法關閉dialog 87 $('#loginAndRegisterForm').dialog('close'); 88 $.messager.show({ 89 title:'消息', 90 msg:r.msg 91 }); 92 //登錄成功后跳轉到系統首頁 93 //window.location.replace(g_basePath+'/index.jsp'); 94 //window.location.href = g_basePath+'/index.jsp'; 95 }else{ 96 $.messager.alert('消息',r.msg); 97 } 98 } 99 }); 100 } 101 }); 102 </script> 103 104 </head> 105 106 <body> 107 孤傲蒼狼 108 <div id="loginAndRegisterForm"> 109 <form method="post" id="loginForm"> 110 <table> 111 <tr> 112 <th style="text-align:left;"> 113 用戶名： 114 </th> 115 <td> 116 <!-- class="easyui-textbox"表示使用EasyUI的textbox組件--> 117 <input type="text" id="userName" style="width:150px;" name="userName" class="easyui-textbox"/> 118 </td> 119 </tr> 120 <tr> 121 <th style="text-align:left;"> 122 密碼： 123 </th> 124 <td> 125 <input type="password" id="userPwd" style="width:150px;" name="userPwd" class="easyui-textbox"/> 126 </td> 127 </tr> 128 </table> 129 </form> 130 </div> 131 </body> 132 </html>
Login1.html頁面運行效果如下：
Login1.html中用到了一個Utils.js，Utils.js中有兩個方法：getBasePath和getContextPath，分別用於獲取Web應用的basePath和contextPath，獲取Web應用的basePath和contextPath的目的就是為了在提交form表單到指定的Sevlet中進行處理時拼湊出處理請求的Servlet的絕對路徑
例如：
url:g_contextPath+'/servlet/LoginHandleServlet'
url:g_basePath+'/servlet/LoginHandleServlet'
這樣無論Servlet如何映射url-pattern，都可以正確找到該Servlet
Utils.js代碼如下：
1 //立即執行的js 2 (function() { 3 //獲取contextPath 4 var contextPath = getContextPath(); 5 //獲取basePath 6 var basePath = getBasePath(); 7 //將獲取到contextPath和basePath分別賦值給window對象的g_contextPath屬性和g_basePath屬性 8 window.g_contextPath = contextPath; 9 window.g_basePath = basePath; 10 })(); 11 12 /** 13 * @author 孤傲蒼狼 14 * 獲得項目根路徑，等價於jsp頁面中 15 * <% 16 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 17 %> 18 * 使用方法：getBasePath(); 19 * @returns 項目的根路徑 20 * 21 */ 22 function getBasePath() { 23 var curWwwPath = window.document.location.href; 24 var pathName = window.document.location.pathname; 25 var pos = curWwwPath.indexOf(pathName); 26 var localhostPath = curWwwPath.substring(0, pos); 27 var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1); 28 return (localhostPath + projectName); 29 } 30 31 /** 32 * @author 孤傲蒼狼 33 * 獲取Web應用的contextPath，等價於jsp頁面中 34 * <% 35 String path = request.getContextPath(); 36 %> 37 * 使用方法:getContextPath(); 38 * @returns /項目名稱(/EasyUIStudy_20141104) 39 */ 40 function getContextPath() { 41 return window.document.location.pathname.substring(0, window.document.location.pathname.indexOf('\/', 1)); 42 };
處理用戶登錄請求的Servlet的LoginHandleServlet代碼如下：
1 package me.gacl.web.controller; 2 3 import java.io.IOException; 4 5 import javax.servlet.ServletException; 6 import javax.servlet.http.HttpServlet; 7 import javax.servlet.http.HttpServletRequest; 8 import javax.servlet.http.HttpServletResponse; 9 10 import com.alibaba.fastjson.JSON; 11 12 import me.gacl.custom.model.Json; 13 14 public class LoginHandleServlet extends HttpServlet { 15 16 public void doGet(HttpServletRequest request, HttpServletResponse response) 17 throws ServletException, IOException { 18 //服務器端使用UTF-8編碼將響應內容輸出到客戶端 19 response.setCharacterEncoding("UTF-8"); 20 //通知客戶端瀏覽器以UTF-8編碼顯示內容，避免產生中文亂碼問題 21 response.setHeader("content-type", "text/html;charset=UTF-8"); 22 String userName = request.getParameter("userName"); 23 String userPwd = request.getParameter("userPwd"); 24 Json json = new Json(); 25 if (userName.equals("gacl") && userPwd.equals("123")) { 26 json.setMsg("登錄成功"); 27 json.setSuccess(true); 28 }else { 29 json.setMsg("用戶名或密碼錯誤，登錄失敗！"); 30 json.setSuccess(false); 31 } 32 //使用alibaba(阿里巴巴)的fastJson工具類將Json對象轉換成一個json字符串 33 String jsonStr = JSON.toJSONString(json); 34 //將json字符串作為響應內容輸出到客戶端瀏覽器。 35 response.getWriter().write(jsonStr); 36 } 37 38 public void doPost(HttpServletRequest request, HttpServletResponse response) 39 throws ServletException, IOException { 40 doGet(request, response); 41 } 42 }
運行結果如下所示：
Login1.html中是以傳統的ajax異步提交form表單的，下面我們來看看如何使用EasyUI提供的form組件來實現相同的功能，編寫一個Login2.html，代碼如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>EasyUI組件使用范例</title> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 <!-- 引入JQuery --> 7 <script type="text/javascript" src="jquery-easyui-1.4.1/jquery.min.js"></script> 8 <!-- 引入EasyUI --> 9 <script type="text/javascript" src="jquery-easyui-1.4.1/jquery.easyui.min.js"></script> 10 <!-- 引入EasyUI的中文國際化js，讓EasyUI支持中文 --> 11 <script type="text/javascript" src="jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script> 12 <!-- 引入EasyUI的樣式文件--> 13 <link rel="stylesheet" href="jquery-easyui-1.4.1/themes/default/easyui.css" type="text/css"/> 14 <!-- 引入EasyUI的圖標樣式文件--> 15 <link rel="stylesheet" href="jquery-easyui-1.4.1/themes/icon.css" type="text/css"/> 16 <script type="text/javascript" src="js/Utils.js"></script> 17 <script type="text/javascript"> 18 $(function(){ 19 //console.info(g_contextPath); 20 //console.info(g_basePath); 21 $('#loginAndRegisterForm').dialog({ 22 title: '用戶登錄', 23 width: 240, 24 height: 150, 25 closable: false,//設置dialog不允許被關閉 26 cache: false, 27 modal: true, 28 buttons:[ 29 { 30 text:'登錄', 31 iconCls: 'icon-ok', 32 width:70, 33 height:30, 34 handler:function(){ 35 //console.info(g_contextPath+'/servlet/LoginHandleServlet'); 36 //console.info(g_basePath+'/servlet/LoginHandleServlet'); 37 //console.info($('#loginForm').serialize());//在火狐中打印的結果：userName=gacl&userPwd=123 38 loginHandle();//處理用戶登錄 39 } 40 }, 41 { 42 text:'重置', 43 iconCls: 'icon-ok', 44 width:70, 45 height:30, 46 handler:function(){ 47 doReset('loginForm'); 48 } 49 } 50 ] 51 52 }); 53 54 /*重置form表單*/ 55 function doReset(formId){ 56 $(':input','#'+formId) 57 .not(':button, :submit, :reset, :hidden') 58 .val('') 59 .removeAttr('checked') 60 .removeAttr('selected'); 61 } 62 63 /*處理用戶登錄*/ 64 function loginHandle(){ 65 //使用EasyUI提供的form組件來提交表單 66 $('#loginForm').form('submit',{ 67 //url:g_contextPath+'/servlet/LoginHandleServlet', 68 url:g_basePath+'/servlet/LoginHandleServlet',//url表示服務器端處理用戶登錄的URL地址 69 success:function(r){ 70 //注意：此時的r只是一個普通的Json字符串，因此需要手動把它變成Json對象 71 //console.info(r); 72 //r = JSON.parse(r);//利用IE8支持的原生JSON對象的parse方法將json字符串轉換成標准的JSON對象 73 //r=eval('('+r+')');//利用eval方法將將json字符串轉換成標准的JSON對象 74 r = $.parseJSON(r);//利用Jquery的parseJSONfang將json字符串轉換成標准的JSON對象 75 //console.info(r); 76 if(r && r.success){ 77 //調用dialog的close方法關閉dialog 78 $('#loginAndRegisterForm').dialog('close'); 79 $.messager.show({ 80 title:'消息', 81 msg:r.msg 82 }); 83 //登錄成功后跳轉到系統首頁 84 //window.location.replace(g_basePath+'/index.jsp'); 85 //window.location.href = g_basePath+'/index.jsp'; 86 }else{ 87 $.messager.alert('消息',r.msg); 88 } 89 } 90 }); 91 } 92 }); 93 </script> 94 95 </head> 96 97 <body> 98 孤傲蒼狼 99 <div id="loginAndRegisterForm"> 100 <form method="post" id="loginForm"> 101 <table> 102 <tr> 103 <th style="text-align:left;">用戶名：</th> 104 <!-- class="easyui-textbox"表示使用EasyUI的textbox組件--> 105 <td><input type="text" id="userName" style="width:150px;" name="userName" class="easyui-textbox"/></td> 106 </tr> 107 <tr> 108 <th style="text-align:left;">密碼：</th> 109 <td><input type="password" id="userPwd" style="width:150px;" name="userPwd" class="easyui-textbox"/></td> 110 </tr> 111 </table> 112 </form> 113 </div> 114 </body> 115 </html>
運行效果如下：
