easyui搭建第四课
1.简单的重构了一下登录页面:
1.1 将原来做的登录、注册以及引用的js和css分别放入单独的jsp页面,以便方便引入页面。
1.1.1 新建了views/include/head.jsp页面,将所有用到的js、css分别引入该页面:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ request.getContextPath();
%>
<!-- ** Javascript ** -->
<script type="text/javascript" src="<%=basePath%>/jslib/jquery-easyui-1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/jslib/jquery-easyui-1.4.2/jquery.easyui.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/jslib/jquery-easyui-1.4.2/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="<%=basePath%>/jslib/extEasyUI.js"></script>
<script type="text/javascript" src="<%=basePath%>/jslib/extJquery.js"></script>
<!-- 公共资源CSS,JS -->
<!--Css -->
<link rel="stylesheet" href="<%=basePath%>/jslib/jquery-easyui-1.4.2/themes/default/easyui.css" type="text/css"></link>
<link rel="stylesheet" href="<%=basePath%>/jslib/jquery-easyui-1.4.2/themes/icon.css" type="text/css"></link>
1.1.2 分离出了登录窗口以及注册窗口。
(1)登录窗口:views/sys/dialog/login.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<script type="text/javascript">
$(function() {
$('#views_sys_dialog_login_loginDialog').dialog({
title : '登录',
modal : true,
closable : false,
buttons : [ {
text : '注册',
iconCls : 'icon-edit',
handler : function() {
$('#views_sys_dialog_reg_regForm input').val('');
$('#views_sys_dialog_reg_regDialog').dialog('open');
}
}, {
text : '登录',
iconCls : 'icon-help',
handler : function() {
$('#views_sys_dialog_login_loginForm').submit();
}
} ]
});
$('#views_sys_dialog_login_loginForm').form({
url : '${pageContext.request.contextPath}/login.do',
// dataType : 'json',
// contentType : 'application/json;charset=UTF-8',
success : function(data) {
var $data = $.parseJSON(data);
console.info($data.success);
console.info($data.message);
if ($data.success) {
window.location='${pageContext.request.contextPath}/main.do';
}
$.messager.show({
title : '提示',
msg : $data.message,
timeout : 5000,
showType : 'slide'
});
}
});
});
</script>
<div id="views_sys_dialog_login_loginDialog" class="easyui-dialog">
<form id="views_sys_dialog_login_loginForm" method="post">
<table>
<tr>
<th>登录名</th>
<td><input name="name" class="easyui-validatebox" data-options="required:true,missingMessage:'*登录名称必填'"></td>
</tr>
<tr>
<th>密码</th>
<td><input id="password" name="password" type="password" class="easyui-validatebox" data-options="required:true"></td>
</tr>
</table>
</form>
</div>
(2) 注册窗口:views/sys/dialog/reg.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<script type="text/javascript">
$(function() {
$('#views_sys_dialog_reg_regDialog').dialog({
title : '登录',
modal : true,
// closed : true,
buttons : [ {
text : '注册',
iconCls : 'icon-edit',
handler : function() {
regUser();
}
} ]
}).dialog('close');
});
function regUser() {
//初始化form
// $('#views_sys_dialog_reg_regForm').form('submit', {
// url : '${pageContext.request.contextPath}/userController/reg.do',
// // dataType : 'json',
// // contentType : 'application/json;charset=UTF-8',
// success : function(data) {
// var $data = $.parseJSON(data);
// console.info($data.success);
// console.info($data.message);
// if ($data.success) {
// $('#index_regDialog').dialog('close');
// }
// $.messager.show({
// title : '提示',
// msg : $data.message,
// timeout : 5000,
// showType : 'slide'
// });
// }
// });
if ($('#views_sys_dialog_reg_regForm').form('validate')) {
$.ajax({
url : '${pageContext.request.contextPath}/userController/reg.do',
data : $('#views_sys_dialog_reg_regForm').serialize(),
dataType : 'json',
success : function(data, textStatus, jqXHR) {
var $data = data;//$.parseJSON(data);
console.info($data.success);
console.info($data.message);
if ($data.success) {
$('#views_sys_dialog_reg_regDialog').dialog('close');
}
$.messager.show({
title : '提示',
msg : $data.message,
timeout : 5000,
showType : 'slide'
});
}
});
}
}
</script>
<div id="views_sys_dialog_reg_regDialog">
<form id="views_sys_dialog_reg_regForm" method="post">
<table>
<tr>
<th>登录名</th>
<td><input name="name" class="easyui-validatebox" data-options="required:true,missingMessage:'*登录名称必填'"></td>
</tr>
<tr>
<th>密码</th>
<td><input id="password" name="password" type="password" class="easyui-validatebox" data-options="required:true"></td>
</tr>
<tr>
<th>重复密码</th>
<td><input id="rpwd" name="rpwd" type="password" class="easyui-validatebox" data-options="required:true, validType:'eqPwd[\'#password\']'"></td>
</tr>
</table>
</form>
</div>
(3) 重构后的登录页面:views/sys/login.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%@include file="/views/include/head.jsp"%>
<title>登录</title>
</head>
<body>
<%@include file="/views/sys/dialog/login.jsp"%>
<%@include file="/views/sys/dialog/reg.jsp"%>
</body>
</html>
2. 新建登录后的首页:
2.1 将easyui布局的center, south, north, east, west分别建立对应的jsp页面:
(1) views/main/north.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%>
<h1>luckyssmm 演示系统</h1>
<div class="ui-login">
<div class="ui-login-info">
欢迎 <span class="orange">${user.name}</span> 第[<span class="orange">${user.loginCount}</span>]次登录 <a class="modify-pwd-btn" href="javascript:void(0);">修改密码</a> | <a class="logout-btn" href="${pageContext.request.contextPath}/logout.shtml">退出</a>
</div>
</div>
(2) views/main/south.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<div class="panel-header" style="border: none; text-align: center;">CopyRight © 2015 LUCKYSSMM 版权所有. 官方网址: www.lcukyssmm.org</div>
(3) views/main/west.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%>
<script type="text/javascript">
/**
* 创建新选项卡
* @param tabId 选项卡id
* @param title 选项卡标题
* @param url 选项卡远程调用路径
*/
function addTab(tabId,title,url){
//如果当前id的tab不存在则创建一个tab
if($("#"+tabId).html()==null){
var name = 'iframe_'+tabId;
$('#views_main_center_centerTab').tabs('add',{
title: title,
closable:true,
cache : false,
//注:使用iframe即可防止同一个页面出现js和css冲突的问题
content : '<iframe name="'+name+'"id="'+tabId+'"src="'+url+'" width="100%" height="100%" frameborder="0" scrolling="auto" ></iframe>'
});
}
}
</script>
<div id="aa" class="easyui-accordion" data-options="fit:true, border:false">
<div title="Top Panel" data-options="iconCls:'icon-search', collapsed:false,collapsible:false" style="padding: 10px;">
<input class="easyui-searchbox" prompt="Enter something here" style="width: 100px; height: 25px;">
</div>
<div title="Title1" data-options="iconCls:'icon-save'" style="overflow: auto; padding: 10px;">
<h3 style="color: #0099FF;">Accordion for jQuery</h3>
<p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
</div>
<div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding: 10px;">
<ul>
<li><a href="javascript:addTab('tabId_menuInfo','菜单管理','${pageContext.request.contextPath}/menu/menu.do');">菜单管理</a></li>
<li><a href="javascript:addTab('tabId_privilege','权限管理','${pageContext.request.contextPath}/menu/menu.do');">权限管理</a></li>
</ul>
</div>
</div>
(4) views/main/east.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<script type="text/javascript" charset="utf-8">
$(function() {
$('#layout_east_calendar').calendar({
fit : true,
current : new Date(),
border : false,
onSelect : function(date) {
$(this).calendar('moveTo', new Date());
}
});
$('#layout_east_onlinePanel').panel({
tools : [ {
iconCls : 'database_refresh',
handler : function() {
}
} ]
});
});
</script>
<div class="easyui-layout" data-options="fit:true,border:false">
<div data-options="region:'north',border:false" style="height: 180px; overflow: hidden;">
<div id="layout_east_calendar"></div>
</div>
<div data-options="region:'center',border:false" style="overflow: hidden;">
<div id="layout_east_onlinePanel" data-options="fit:true,border:false" title="luckyssmm">
<div class="well well-small" style="margin: 3px;">
<hr />
如果发现系统有BUG,请给我发Email:
</div>
</div>
</div>
</div>
(5) views/main/center.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<div class="easyui-tabs" id="views_main_center_centerTab" data-options="fit:true,border:false">
<div title="Welcome" style="padding: 20px; overflow: hidden;">
<div style="margin-top: 20px;">
<h3>简要说明</h3>
<ul>
<li>采用SpringMVC+Mybatis等主流框架</li>
<li>支持数据库: Mysql,Oracle10g</li>
<li>前端:使用Jquery和Easyui技术.JS封装简洁,操作简单.</li>
<li>权限:对菜单,按钮控制.根据登陆用户权限展示拥有的菜单和按钮.</li>
<li>拦截:对所有无权限URL进行拦截,防止手动发送HTTP请求,确保系统全性.</li>
</ul>
</div>
<div style="margin-top: 20px;">
<h3>技术交流</h3>
<p> 本系统由luckyssmm开发提供</p>
<ul>
<li>交流群:</li>
<li>开发者:lucky</li>
<li>邮箱:lucky@163.com</li>
<li>官网:<a href="http://www.luckyssmm.org">http://www.luckyssmm.org</a></li>
</ul>
</div>
</div>
</div>
(6) 整合后的首页如下:views/main/main.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%@include file="/views/include/head.jsp"%>
<link rel="stylesheet" type="text/css" href="<%=basePath%>/css/main.css">
<script type="text/javascript">
</script>
<title>首页</title>
</head>
<body class="easyui-layout">
<div class="ui-header" data-options="region:'north',split:true,border:false,title:'欢迎访问luckyssmm系统', href:'${pageContext.request.contextPath}/views/main/north.jsp'" style="height: 60px; overflow: hidden;"></div>
<div data-options="region:'south',split:true,border:false, href:'${pageContext.request.contextPath}/views/main/south.jsp'" style="height: 20px; overflow: hidden;"></div>
<div data-options="region:'east',title:'East',split:true, href:'${pageContext.request.contextPath}/views/main/east.jsp'" style="width: 180px;"></div>
<div data-options="region:'west',split:true, title:'luckyssmm系统', href:'${pageContext.request.contextPath}/views/main/west.jsp'" style="width: 160px;"></div>
<!-- 中间内容页面 -->
<div data-options="region:'center', href:'${pageContext.request.contextPath}/views/main/center.jsp'"></div>
</body>
</html>
3. 新增菜单界面:views/sys/menu.jsp
3.1 第一种方法:比较简单的页面:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%@include file="/views/include/head.jsp"%>
<title>菜单管理</title>
<script type="text/javascript">
</script>
</head>
<body>
<table class="easyui-datagrid" data-options="url:'${pageContext.request.contextPath}/menu/list.do',fitColumns:true,singleSelect:true,toolbar: [{
text:'修改',
iconCls: 'icon-edit',
handler: function(){alert('edit')}
},'-',{
text:'增加',
iconCls: 'icon-add',
handler: function(){alert('add')}
}]">
<thead>
<tr>
<th data-options="field:'id',width:100">菜单编码</th>
<th data-options="field:'name',width:100">菜单名称</th>
<th data-options="field:'href',width:100,align:'right'">菜单链接</th>
<th data-options="field:'parent_id',width:100,align:'right'">上级菜单</th>
</tr>
</thead>
</table>
</body>
</html>
3.2 去掉table中的data_options属性,改为使用js初始化:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%@include file="/views/include/head.jsp"%>
<title>菜单管理</title>
<script type="text/javascript">
$(function() {
$('#views_sys_menuGrid').datagrid({
url : '${pageContext.request.contextPath}/menu/list.do',
fitColumns : true,
singleSelect : true,
toolbar : [ {
text : '修改',
iconCls : 'icon-edit',
handler : function() {
alert('edit')
}
}, '-', {
text : '增加',
iconCls : 'icon-add',
handler : function() {
alert('add')
}
} ]
});
});
</script>
</head>
<body>
<table id="views_sys_menuGrid" class="easyui-datagrid">
<thead>
<tr>
<th data-options="field:'id',width:100">菜单编码</th>
<th data-options="field:'name',width:100">菜单名称</th>
<th data-options="field:'href',width:100,align:'right'">菜单链接</th>
<th data-options="field:'parent_id',width:100,align:'right'">上级菜单</th>
</tr>
</thead>
</table>
</body>
</html>
3.3 纯js初始化datagrid:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%@include file="/views/include/head.jsp"%>
<title>菜单管理</title>
<script type="text/javascript">
$(function() {
$('#views_sys_menuGrid').datagrid({
url : '${pageContext.request.contextPath}/menu/list.do',
fitColumns : true,
singleSelect : true,
toolbar : [ {
text : '修改',
iconCls : 'icon-edit',
handler : function() {
alert('edit')
}
}, '-', {
text : '增加',
iconCls : 'icon-add',
handler : function() {
alert('add')
}
} ],
columns : [ [ {
field : 'id',
title : '菜单编码',
width : 100
}, {
field : 'name',
title : '菜单名称',
width : 100
}, {
field : 'href',
title : '菜单链接',
width : 100,
align : 'right'
}, {
field : 'parent_id',
title : '上级菜单',
width : 100
} ] ]
});
});
</script>
</head>
<body>
<table id="views_sys_menuGrid" class="easyui-datagrid">
<!-- <thead> -->
<!-- <tr> -->
<!-- <th data-options="field:'id',width:100">菜单编码</th> -->
<!-- <th data-options="field:'name',width:100">菜单名称</th> -->
<!-- <th data-options="field:'href',width:100,align:'right'">菜单链接</th> -->
<!-- <th data-options="field:'parent_id',width:100,align:'right'">上级菜单</th> -->
<!-- </tr> -->
<!-- </thead> -->
</table>
</body>
</html>
4. 实现菜单的新增按钮的功能:
注:
${pageContext.request.contextPath}/menu/menuAdd.do
需要新建对应的controller来实现页面的跳转。
<script type="text/javascript">
$(function() {
$('#views_sys_menuGrid').datagrid({
url : '${pageContext.request.contextPath}/menu/list.do',
fitColumns : true,
singleSelect : true,
toolbar : [ {
text : '修改',
iconCls : 'icon-edit',
handler : function() {
alert('edit')
}
}, '-', {
text : '增加',
iconCls : 'icon-add',
handler : function() {
addMenu();
}
} ]
});
});
function addMenu() {
var addMenuDialog = parent.$.modalDialog({
title : '添加资源',
width : 500,
height : 300,
href : '${pageContext.request.contextPath}/menu/menuAdd.do',
buttons : [ {
text : '添加',
handler : function() {
}
}, {
text : '关闭',
handler : function() {
addMenuDialog.dialog('close'); // close a window
}
} ]
});
}
</script>
5.添加增加菜单的jsp页面:
5.1 views/sys/menuAdd.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<script type="text/javascript">
$(function() {
parent.$.messager.progress('close');
$('#icon').combobox({
data : $.iconData,
formatter : function(v) {
return $.formatString(
'<span class="{0}" style="display:inline-block;vertical-align:middle;width:16px;height:16px;"></span>{1}',
v.value, v.value);
}
});
});
</script>
<div class="easyui-layout" data-options="fit:true,border:false">
<div data-options="region:'center',border:false" title="" style="overflow: hidden;">
<form id="form" method="post">
<table class="table table-hover table-condensed">
<tr>
<th>编号</th>
<td><input name="id" type="text" value="${menu.id}" readonly="readonly"></td>
<th>上级菜单</th>
<td><select id="parent_id" name="parent_id" style="width: 140px; height: 29px;"></select><img src="${pageContext.request.contextPath}/style/images/extjs_icons/cut_red.png" οnclick="$('#pid').combotree('clear');" /></td>
</tr>
<tr>
<th>菜单名称</th>
<td><input name="name" type="text" placeholder="请输入菜单名称" class="easyui-validatebox" data-options="required:true" value=""></td>
<th>菜单链接</th>
<td><input name="href" type="text" placeholder="请输入菜单链接" class="easyui-validatebox" value=""></td>
</tr>
<tr>
<th>排序</th>
<td><input value="100" style="width: 140px; height: 29px; line-height: 29px; ime-mode: disabled;" data-options="required:true,min:0,max:100000,editable:false" class="easyui-numberspinner numberspinner-f spinner-text spinner-f validatebox-text numberbox-f" name="sort"></td>
<th>权限标识</th>
<td><input name="permission" type="text" placeholder="请输入权限标识,如:@RequiresPermissions(" 权限标识")" class="easyui-validatebox" data-options="required:true" value=""></td>
</tr>
<tr>
<th>菜单图标</th>
<td colspan="3"><input id="icon" name="icon" style="width: 375px; height: 29px;" data-options="editable:false" />
</tr>
<tr>
<th>备注</th>
<td colspan="3"><textarea name="remarks" rows="" cols="" class="span5"></textarea></td>
</tr>
</table>
</form>
</div>
</div>