easyui组件简单使用方法

2017年12月18日 10:29 | 3343次浏览

一、EasyUI组件的简单介绍

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

使用这些组件可以帮助我们快速地进行项目开发,下面以一个用户登录程序为例讲解EasyUI组件的使用

二、EasyUI组件的使用

2.1、创建测试的JavaWeb项目

2.2、编写测试代码

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

Login1.html的代码如下:

<!DOCTYPE html>
<html>
  <head>
    <title>EasyUI组件使用范例</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <!-- 引入JQuery -->
      <script type="text/javascript" src="jquery-easyui-1.5/jquery.min.js"></script>
      <!-- 引入EasyUI -->
      <script type="text/javascript" src="jquery-easyui-1.5/jquery.easyui.min.js"></script>
      <!-- 引入EasyUI的中文国际化js,让EasyUI支持中文 -->
      <script type="text/javascript" src="jquery-easyui-1.5/locale/easyui-lang-zh_CN.js"></script>
      <!-- 引入EasyUI的样式文件-->
      <link rel="stylesheet" href="jquery-easyui-1.5/themes/default/easyui.css" type="text/css"/>
      <!-- 引入EasyUI的图标样式文件-->
      <link rel="stylesheet" href="jquery-easyui-1.5/themes/icon.css" type="text/css"/>
      <script type="text/javascript" src="js/Utils.js"></script>
      <script type="text/javascript">
          $(function(){
              //console.info(g_contextPath);
              //console.info(g_basePath);
              //页面加载完成之后创建登录的dialog
              $('#loginAndRegisterForm').dialog({   
                  title: '用户登录',
                  width: 240,   
                  height: 150,   
                  closable: false,//设置dialog不允许被关闭
                  cache: false,   
                  modal: true,
                  buttons:[
                                {
                                text:'登录',
                                iconCls: 'icon-ok',
                                width:70,
                                height:30,
                                handler:function(){
                                    //console.info(g_contextPath+'/servlet/LoginHandleServlet');
                                    //console.info(g_basePath+'/servlet/LoginHandleServlet');
                                    //console.info($('#loginForm').serialize());//在火狐中打印的结果:userName=gacl&userPwd=123
                                    loginHandle();//处理用户登录
                                }
                            },
                            {
                                text:'重置',
                                iconCls: 'icon-ok',
                                width:70,
                                height:30,
                                handler:function(){
                                    doReset('loginForm'); 
                                }
                            }
                        ]

              }); 
              
              /*重置form表单*/
              function doReset(formId){
                  $(':input','#'+formId)
                   .not(':button, :submit, :reset, :hidden')
                   .val('')
                   .removeAttr('checked')
                   .removeAttr('selected');
              }
              
              /*处理用户登录*/
              function loginHandle(){
                  $.ajax({
                    //url:g_contextPath+'/servlet/LoginHandleServlet',
                    url:g_basePath+'/servlet/LoginHandleServlet',//url表示服务器端处理用户登录的URL地址
                    /*data:{
                        //data表示要提交到服务器端的数据,通常的写法
                        "userName":$("#userName").val(),
                        "userPwd":$("#userPwd").val()
                    },*/
                    //data表示要提交到服务器端的数据,更加简洁的写法
                    data:$('#loginForm').serialize(),//serialize()方法的作用是将form表单中的内容序列化成字符串
                    cahe:false,
                    /*
                    用dataType来指明服务器端返回的数据格式是一个json字符串,客户端接收到返回的json字符串之后,
                    Jquery会自动把这个json字符串转换成一个Json对象
                    */
                    dataType:'json',
                    success:function(r){
                        //此时的r已经是经过Jquery处理过之后的Json对象了
                        //console.info(r.msg);
                        if(r && r.success){
                            //调用dialog的close方法关闭dialog
                            $('#loginAndRegisterForm').dialog('close');
                            $.messager.show({
                                title:'消息',
                                msg:r.msg
                            });
                            //登录成功后跳转到系统首页
                            //window.location.replace(g_basePath+'/index.jsp');
                            //window.location.href = g_basePath+'/index.jsp';
                        }else{
                            $.messager.alert('消息',r.msg);
                        }
                    }
                });
              }
          });
      </script>
      
  </head>
  
  <body>
      
      <div id="loginAndRegisterForm">
          <form method="post" id="loginForm">
              <table>
                  <tr>
                      <th style="text-align:left;">
                          用户名:
                      </th>
                      <td>
                          <!-- class="easyui-textbox"表示使用EasyUI的textbox组件-->
                          <input type="text" id="userName" style="width:150px;" name="userName" class="easyui-textbox"/>
                      </td>
                  </tr>
                  <tr>
                      <th style="text-align:left;">
                          密码:
                      </th>
                      <td>
                          <input type="password" id="userPwd" style="width:150px;" name="userPwd" class="easyui-textbox"/>
                      </td>
                  </tr>
              </table>
          </form>
      </div>
  </body>
</html>

Login1.html页面运行效果如下:

 Login1.html中用到了一个Utils.js,Utils.js中有两个方法:getBasePath和getContextPath,分别用于获取Web应用的basePath和contextPath,获取Web应用的basePath和contextPath的目的就是为了在提交form表单到指定的Sevlet中进行处理时拼凑出处理请求的Servlet的绝对路径
例如:
url:g_contextPath+'rvlet/LoginHandleServlet'
url:g_basePath+'rvlet/LoginHandleServlet'
 这样无论Servlet如何映射url-pattern,都可以正确找到该Servlet
Utils.js代码如下: 

//立即执行的js
(function() {
    //获取contextPath
    var contextPath = getContextPath();
    //获取basePath
    var basePath = getBasePath();
    //将获取到contextPath和basePath分别赋值给window对象的g_contextPath属性和g_basePath属性
    window.g_contextPath = contextPath;
    window.g_basePath = basePath;
})();

/**
 * @author 孤傲苍狼
 * 获得项目根路径,等价于jsp页面中
 *  <%
        String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    %>
 * 使用方法:getBasePath();
 * @returns 项目的根路径
 *  
 */
function getBasePath() {
    var curWwwPath = window.document.location.href;
    var pathName = window.document.location.pathname;
    var pos = curWwwPath.indexOf(pathName);
    var localhostPath = curWwwPath.substring(0, pos);
    var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
    return (localhostPath + projectName);
}

/**
 * @author 孤傲苍狼
 * 获取Web应用的contextPath,等价于jsp页面中
 *  <%
        String path = request.getContextPath();
    %>
 * 使用方法:getContextPath();
 * @returns /项目名称(/EasyUIStudy_20141104)
 */
function getContextPath() {
    return window.document.location.pathname.substring(0, window.document.location.pathname.indexOf('\/', 1));
};

处理用户登录请求的Servlet的LoginHandleServlet代码如下:

package me.gacl.web.controller;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.alibaba.fastjson.JSON;

import me.gacl.custom.model.Json;

public class LoginHandleServlet extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        //服务器端使用UTF-8编码将响应内容输出到客户端
        response.setCharacterEncoding("UTF-8");
        //通知客户端浏览器以UTF-8编码显示内容,避免产生中文乱码问题
        response.setHeader("content-type", "text/html;charset=UTF-8");
        String userName = request.getParameter("userName");
        String userPwd = request.getParameter("userPwd");
        Json json = new Json();
        if (userName.equals("gacl") && userPwd.equals("123")) {
            json.setMsg("登录成功");
            json.setSuccess(true);
        }else {
            json.setMsg("用户名或密码错误,登录失败!");
            json.setSuccess(false);
        }
        //使用alibaba(阿里巴巴)的fastJson工具类将Json对象转换成一个json字符串
        String jsonStr = JSON.toJSONString(json);
        //将json字符串作为响应内容输出到客户端浏览器。
        response.getWriter().write(jsonStr);
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doGet(request, response);
    }
}


EasyUI提供的form组件实现登录

Login1.html中是以传统的ajax异步提交form表单的,下面我们来看看如何使用EasyUI提供的form组件来实现相同的功能,编写一个Login2.html,代码如下:

<!DOCTYPE html>
<html>
  <head>
    <title>EasyUI组件使用范例</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     <!-- 引入JQuery -->
      <script type="text/javascript" src="jquery-easyui-1.5/jquery.min.js"></script>
      <!-- 引入EasyUI -->
      <script type="text/javascript" src="jquery-easyui-1.5/jquery.easyui.min.js"></script>
      <!-- 引入EasyUI的中文国际化js,让EasyUI支持中文 -->
      <script type="text/javascript" src="jquery-easyui-1.5/locale/easyui-lang-zh_CN.js"></script>
      <!-- 引入EasyUI的样式文件-->
      <link rel="stylesheet" href="jquery-easyui-1.5/themes/default/easyui.css" type="text/css"/>
      <!-- 引入EasyUI的图标样式文件-->
      <link rel="stylesheet" href="jquery-easyui-1.5/themes/icon.css" type="text/css"/>
      <script type="text/javascript" src="js/Utils.js"></script>
      <script type="text/javascript">
          $(function(){
              //console.info(g_contextPath);
              //console.info(g_basePath);
              $('#loginAndRegisterForm').dialog({   
                  title: '用户登录',
                  width: 240,   
                  height: 150,   
                  closable: false,//设置dialog不允许被关闭
                  cache: false,   
                  modal: true,
                    buttons:[
                                {
                                text:'登录',
                                iconCls: 'icon-ok',
                                width:70,
                                height:30,
                                handler:function(){
                                    //console.info(g_contextPath+'/servlet/LoginHandleServlet');
                                    //console.info(g_basePath+'/servlet/LoginHandleServlet');
                                    //console.info($('#loginForm').serialize());//在火狐中打印的结果:userName=gacl&userPwd=123
                                    loginHandle();//处理用户登录
                                }
                            },
                            {
                                text:'重置',
                                iconCls: 'icon-ok',
                                width:70,
                                height:30,
                                handler:function(){
                                    doReset('loginForm'); 
                                }
                            }
                        ]

              }); 
              
              /*重置form表单*/
              function doReset(formId){
                  $(':input','#'+formId)
                   .not(':button, :submit, :reset, :hidden')
                   .val('')
                   .removeAttr('checked')
                   .removeAttr('selected');
              }
              
              /*处理用户登录*/
              function loginHandle(){
                  //使用EasyUI提供的form组件来提交表单
                  $('#loginForm').form('submit',{
                    //url:g_contextPath+'/servlet/LoginHandleServlet',
                    url:g_basePath+'/servlet/LoginHandleServlet',//url表示服务器端处理用户登录的URL地址
                    success:function(r){
                        //注意:此时的r只是一个普通的Json字符串,因此需要手动把它变成Json对象
                        //console.info(r);
                        //r = JSON.parse(r);//利用IE8支持的原生JSON对象的parse方法将json字符串转换成标准的JSON对象
                        //r=eval('('+r+')');//利用eval方法将将json字符串转换成标准的JSON对象
                        r = $.parseJSON(r);//利用Jquery的parseJSONfang将json字符串转换成标准的JSON对象
                        //console.info(r);
                        if(r && r.success){
                            //调用dialog的close方法关闭dialog
                            $('#loginAndRegisterForm').dialog('close');
                            $.messager.show({
                                title:'消息',
                                msg:r.msg
                            });
                            //登录成功后跳转到系统首页
                            //window.location.replace(g_basePath+'/index.jsp');
                            //window.location.href = g_basePath+'/index.jsp';
                        }else{
                            $.messager.alert('消息',r.msg);
                        }
                    }
                });
              }
          });
      </script>
      
  </head>
  
  <body>
      孤傲苍狼
      <div id="loginAndRegisterForm">
          <form method="post" id="loginForm">
              <table>
                  <tr>
                      <th style="text-align:left;">用户名:</th>
                      <!-- class="easyui-textbox"表示使用EasyUI的textbox组件-->
                      <td><input type="text" id="userName" style="width:150px;" name="userName" class="easyui-textbox"/></td>
                  </tr>
                  <tr>
                      <th style="text-align:left;">密码:</th>
                      <td><input type="password" id="userPwd" style="width:150px;" name="userPwd" class="easyui-textbox"/></td>
                  </tr>
              </table>
          </form>
      </div>
  </body>
</html>

其结果和第一种方法一样。




小说《我是全球混乱的源头》

感觉本站内容不错,读后有收获?小额赞助,鼓励网站分享出更好的教程