EasyUi的使用与代码编写(二)
EasyUi组件
EasyUI组件的简单介绍
easyUI提供了很多组件让我们使用，如下图所示：
使用这些组件可以帮助我们快速地进行项目开发，下面以一个用户登录程序为例讲解EasyUI组件的使用
EasyUI组件的使用
创建测试的JavaWeb项目
编写测试代码
编写一个用户登录页面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代码如下：
//立即执行的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);
}
}运行结果如下所示：
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>
运行效果如下：
parser源码分析
/**
* parser模块主要是解析页面中easyui的控件
*/
$.parser = {
// 是否自动解析
auto: true,
// 可以被解析的控件
plugins:['linkbutton','menu','menubutton','splitbutton','layout',
'tree','window','dialog','datagrid',
'combobox','combotree','numberbox','validatebox',
'calendar','datebox','panel','tabs','accordion'
],
// 解析函数
parse: function(context){
if ($.parser.auto){
for(var i=0; i<$.parser.plugins.length; i++){
(function(){
// 控件名
var name = $.parser.plugins[i];
// 查找class为easyui-控件名的jq对象，例如，easyui-layout
var r = $('.easyui-' + name, context);
if (r.length){
// 如果有这个对象，那么判断它有没有初始化函数
if (r[name]){
// 如果有直接调用
r[name]();
} else if (window.easyloader){
// 如果没有用easyloader把模块的js文件载入进来，再调用
easyloader.load(name, function(){
r[name]();
})
}
}
})();
}
}
}
};
// 调用parse方法，实际上easyloader中已经调用了，我估计这个是给不是easyloader加载时使用的
$(function(){
$.parser.parse();
});
})(jQuery);
EasyUI布局介绍
easyUI布局容器包括东、西、南、北、中五个区域，其中中心面板是必须的，而东、西、南、北这四个面板是可选的，如果布局里面不需要东、西、南、北这四个面板，那么可以把相应的div删掉，另外，如果需要创建复杂的easyUI布局，那么可以通过嵌套东、西、南、北、中五个面板来实现。下面简单演示一下EasyUI布局。
通过div创建easyUI布局
easyUI的layout可以通过div来创建，使用div来创建easyUI的layout，那么div的html代码结构必须要如下的结构：
<!--给div指定class属性指定easy的easyui-layout样式，这样就可以通过div创建easyui的layout -->
<div class="easyui-layout" style="width:600px;height:400px;margin:0 auto;">
<!-- 布局中如果不需要north这个面板，那么可以删掉这个div -->
<div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
<!-- 布局中如果不需要south这个面板，那么可以删掉这个div -->
<div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
<!-- 布局中如果不需要east这个面板，那么可以删掉这个div -->
<div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>
<!-- 布局中如果不需要west这个面板，那么可以删掉这个div -->
<div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
<!--north，south， east，west这几个面板都可以删掉，唯有这个center面板一定不能删掉，否则使用easyui-layout就会出错 -->
<div data-options="region:'center',title:'center title'" style="padding:5px;"></div>
</div> 看看完整的范例：
<!DOCTYPE html>
<html>
<head>
<title>通过div创建EasyUI的layout布局</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- 引入JQuery -->
<script type="text/javascript" src="jquery-easyui-1.4.1/jquery.min.js"></script>
<!-- 引入EasyUI -->
<script type="text/javascript" src="jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
<!-- 引入EasyUI的中文国际化js，让EasyUI支持中文 -->
<script type="text/javascript" src="jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
<!-- 引入EasyUI的样式文件-->
<link rel="stylesheet" href="jquery-easyui-1.4.1/themes/default/easyui.css" type="text/css"/>
<!-- 引入EasyUI的图标样式文件-->
<link rel="stylesheet" href="jquery-easyui-1.4.1/themes/icon.css" type="text/css"/>
</head>
<body>
<!--给div指定class属性指定easy的easyui-layout样式，这样就可以通过div创建easyui的layout -->
<div class="easyui-layout" style="width:600px;height:400px;margin:0 auto;">
<!-- 布局中如果不需要north这个面板，那么可以删掉这个div -->
<div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
<!-- 布局中如果不需要south这个面板，那么可以删掉这个div -->
<div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
<!-- 布局中如果不需要east这个面板，那么可以删掉这个div -->
<div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>
<!-- 布局中如果不需要west这个面板，那么可以删掉这个div -->
<div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
<!--north，south， east，west这几个面板都可以删掉，唯有这个center面板一定不能删掉，否则使用easyui-layout就会出错 -->
<div data-options="region:'center',title:'center title'" style="padding:5px;"></div>
</div>
</body>
</html>运行结果如下图所示：
通过body创建easyUI布局
<!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.4.1/jquery.min.js"></script>
<!-- 引入EasyUI -->
<script type="text/javascript" src="jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
<!-- 引入EasyUI的中文国际化js，让EasyUI支持中文 -->
<script type="text/javascript" src="jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
<!-- 引入EasyUI的样式文件-->
<link rel="stylesheet" href="jquery-easyui-1.4.1/themes/default/easyui.css" type="text/css"/>
<!-- 引入EasyUI的图标样式文件-->
<link rel="stylesheet" href="jquery-easyui-1.4.1/themes/icon.css" type="text/css"/>
</head>
<!--给body指定class属性指定easy的easyui-layout样式，这样就可以 使用body创建easyui的layout -->
<body class="easyui-layout">
<!-- 布局中如果不需要north这个面板，那么可以删掉这个div -->
<div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
<!-- 布局中如果不需要south这个面板，那么可以删掉这个div -->
<div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
<!-- 布局中如果不需要east这个面板，那么可以删掉这个div -->
<div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>
<!-- 布局中如果不需要west这个面板，那么可以删掉这个div -->
<div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
<!--north，south， east，west这几个面板都可以删掉，唯有这个center面板一定不能删掉，否则使用easyui-layout就会出错 -->
<div data-options="region:'center',title:'center title',href:'center.html'" style="padding:5px;"></div>
</body>
</html>运行结果如下所示：
使用嵌套easyui-layout来创建复杂布局
<!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.4.1/jquery.min.js"></script>
<!-- 引入EasyUI -->
<script type="text/javascript" src="jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
<!-- 引入EasyUI的中文国际化js，让EasyUI支持中文 -->
<script type="text/javascript" src="jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
<!-- 引入EasyUI的样式文件-->
<link rel="stylesheet" href="jquery-easyui-1.4.1/themes/default/easyui.css" type="text/css"/>
<!-- 引入EasyUI的图标样式文件-->
<link rel="stylesheet" href="jquery-easyui-1.4.1/themes/icon.css" type="text/css"/>
</head>
<!--给body指定class属性指定easy的easyui-layout样式，这样就可以 使用body创建easyui的layout -->
<body class="easyui-layout">
<div data-options="region:'north',title:'North Title'" style="height:100px"></div>
<!-- 布局中如果不需要west这个面板，那么可以删掉这个div -->
<div data-options="region:'west',title:'West'" style="width:100px;"></div>
<div data-options="region:'center'">
<!-- 嵌套布局 -->
<div class="easyui-layout" data-options="fit:true">
<!-- 布局中如果不需要north这个面板，那么可以删掉这个div -->
<div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
<!-- 布局中如果不需要south这个面板，那么可以删掉这个div -->
<div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
<!-- 布局中如果不需要east这个面板，那么可以删掉这个div -->
<div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>
<!-- 布局中如果不需要west这个面板，那么可以删掉这个div -->
<div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
<!--north，south， east，west这几个面板都可以删掉，唯有这个center面板一定不能删掉，否则使用easyui-layout就会出错 -->
<div data-options="region:'center',title:'center title'" style="padding:5px;"></div>
</div>
</div>
</body>
</html>运行结果如下所示：
通过Javascript创建easyUI布局
<!DOCTYPE html>
<html>
<head>
<title>通过JavaScript来创建EasyUI布局</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- 引入JQuery -->
<script type="text/javascript" src="jquery-easyui-1.4.1/jquery.min.js"></script>
<!-- 引入EasyUI -->
<script type="text/javascript" src="jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
<!-- 引入EasyUI的中文国际化js，让EasyUI支持中文 -->
<script type="text/javascript" src="jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
<!-- 引入EasyUI的样式文件-->
<link rel="stylesheet" href="jquery-easyui-1.4.1/themes/default/easyui.css" type="text/css"/>
<!-- 引入EasyUI的图标样式文件-->
<link rel="stylesheet" href="jquery-easyui-1.4.1/themes/icon.css" type="text/css"/>
<script type="text/javascript">
$(function(){
//画面加载完成之后就调用layout()方法将body变成easy的layout
$('#easyUILayoutBody').layout();
});
</script>
</head>
<!--给body指定class属性指定easy的easyui-layout样式，这样就可以 使用body创建easyui的layout -->
<body id="easyUILayoutBody">
<div data-options="region:'north',title:'North Title'" style="height:100px"></div>
<!-- 布局中如果不需要west这个面板，那么可以删掉这个div -->
<div data-options="region:'west',title:'West'" style="width:100px;"></div>
<div data-options="region:'center',title:'center'"></div>
</body>
</html>运行结果如下：
778
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
