EasyUI组件使用

Easyui组件使用

一、EasyUI组件的简单介绍

easyUI提供了很多组件让我们使用，如下图所示：

使用这些组件可以帮助我们快速地进行项目开发，下面以一个用户登录程序为例讲解EasyUI组件的使用 二、EasyUI组件的使用 2.1、创建测试的JavaWeb项目

2.2、编写测试代码

编写一个用户登录页面Login1.html，用于输入用户名和密码进行登录，使用JQuery的ajax方法异步提交表单 Login1.html的代码如下：

1 2 3

1 / 10

4

5 6

7 8

9 10

11 12

13 14

15 16 17 103 104 105 106 107 孤傲苍狼

108

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 * <%

5 / 10

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;

6 / 10

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\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

7 / 10

2 3

4

5 6

7 8

9 10

11 12

13 14

15 16 17 94 95 96 97 98 孤傲苍狼

99

本文作者：xdp-gacl

10 / 10