一、实验介绍
1.1 实验内容
本节课程主要利用 easyUI 实现系统的前端页面。
1.2 实验知识点
- easyUI
- JavaScript
- html
1.3 实验环境
- JDK1.8
- Eclipse JavaEE
二、实验步骤
2.1 表现层相关文件获取
打开终端，输入以下命令获取相关文件，包括 easyui、jQuery 等相关文件，保存到目录 /home/shiyanlou/ 下。
wget http://labfile.oss.aliyuncs.com/courses/824/fontendFiles.tar
解压文件到 /home/shiyanlou/ 下。
tar zxvf fontendFiles.tar
然后将 /home/shiyanlou/fontendFiles 文件夹下的全部文件夹拷贝到项目 hrms 的 src->main->webapp 下。
2.2 login.jsp
在项目 hrms 的 src->main->webapp 下新建 JSP 页面 login.jsp 作为系统的登录页面，并添加如下代码：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//Dtd HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>hrms-login</title> <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script> <style type=text/css> body { text-align: center; padding-bottom: 0px; background-color: #ddeef2; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px } A:link { COLOR: #000000; text-decoration: none } A:visited { COLOR: #000000; text-decoration: none } A:hover { COLOR: #ff0000; text-decoration: underline } A:active { text-decoration: none } .input { border-bottom: #ccc 1px solid; border-left: #ccc 1px solid; line-height: 20px; width: 182px; height: 20px; border-top: #ccc 1px solid; border-right: #ccc 1px solid } .input1 { border-bottom: #ccc 1px solid; border-left: #ccc 1px solid; line-height: 20px; width: 120px; height: 20px; border-top: #ccc 1px solid; border-right: #ccc 1px solid; } </style> <script type="text/javascript"> /* 登录 */ function login() { var username = $("#username").val(); var password = $("#password").val(); if (username == null || username == "") { alert("username can't be empty\uff01"); return; } if (password == null || password == "") { alert("password can't be empty\uff01"); return; } $("#adminlogin").submit(); } /* 用户名或密码错误时显示 */ if ('${errorMsg}' != '') { alert('${errorMsg}'); } /* 拦截器显示信息 */ if ('${message}' != '') { alert('${message}'); } </script> </head> <body> <form id=adminlogin method=post name=adminlogin action="${pageContext.request.contextPath}/admin/login"> <div></div> <table style="margin: auto; width: 100%; height: 100%" border=0 cellSpacing=0 cellPadding=0> <tbody> <tr> <td height=150> </td> </tr> <tr style="height: 254px"> <td> <div style="margin: 0px auto; width: 868px"> <img style="display: block" src="${pageContext.request.contextPath}/images/body_03.jpg"> </div> <div style="background-color: #278296"> <div style="margin: 0px auto; width: 936px"> <div style="BACKGROUND: url(${pageContext.request.contextPath}/images/body_05.jpg) no-repeat; height: 155px"> <div style="text-align: left; width: 265px; float: right; height: 125px; _height: 95px"> <table border=0 cellSpacing=0 cellPadding=0 width="100%"> <tbody> <tr> <td style="height: 45px"><input type="text" class=input value="${admin.username}" name="username" id="username"></td> </tr> <tr> <td><input type="password" class=input value="${admin.password}" name="password" id="password" /></td> </tr> </tbody> </table> </div> <div style="height: 1px; clear: both"></div> <div style="width: 380px; float: right; clear: both"> <table border=0 cellSpacing=0 cellPadding=0 width=300> <tbody> <tr> <td width=100 align=right><input style="border-right-width: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" id=btnLogin src="${pageContext.request.contextPath}/images/btn1.jpg" type=image name=btnLogin onclick="javascript:login();"></td> <td width=100 align=middle><input style="border-right-width: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" id=btnReset src="${pageContext.request.contextPath}/images/btn2.jpg" type=image name=btnReset onclick="javascript:adminlogin.reset();"></td> </tr> </tbody> </table> </div> </div> </div> </div> <div style="margin: 0px auto; width: 936px"> <img src="${pageContext.request.contextPath}/images/body_06.jpg"> </div> </td> </tr> <tr style="height: 30%"> <td> </td> </tr> </tbody> </table> </form> </body> </html> 2.3 home_page.jsp
在项目 hrms 的 src->main->webapp 下新建 JSP 页面 home_page.jsp 作为系统的主页面，并添加如下代码：
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>hrms_main</title> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/jquery-easyui-1.3.3/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/jquery-easyui-1.3.3/themes/icon.css"> <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.3.3/jquery.min.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.3.3/jquery.easyui.min.js"></script> <script type="text/javascript"> var url; function addTab(url, text, iconCls) { var content = "<iframe frameborder=0 scrolling='auto' style='width:100%;height:100%' src='${pageContext.request.contextPath}/views/" + url + "'></iframe>"; $("#tabs").tabs("add", { title : text, iconCls : iconCls, closable : true, content : content }); } function openTab(text, url, iconCls) { if ($("#tabs").tabs("exists", text)) { $("#tabs").tabs("close", text); addTab(url, text, iconCls); $("#tabs").tabs("select", text); } else { addTab(url, text, iconCls); } } /* 退出 */ function logout() { $.messager .confirm( "system prompt", "Do you want to exit?", function(r) { if (r) { window.location.href = "${pageContext.request.contextPath}/admin/logout"; } }); } </script> <body class="easyui-layout"> <div region="north" style="height: 78px; background-color: #ffff"> <table width="100%"> <tr> <td width="50%"></td> <td valign="bottom" style="font-size: 20px; color: #8B8B8B; font-family: '\u6977\u4f53';" align="right" width="50%"><font size="3"> <strong>Current Admin\uff1a</strong> </font> <font color="red">${sessionScope.currentAdmin.username}</font></td> </tr> </table> </div> <div region="center"> <div class="easyui-tabs" fit="true" border="false" id="tabs"> <div title="Home" data-options="iconCls:'icon-home'"> <div align="center" style="padding-top: 50px"> <font color="grey" size="10">Human Affairs Management System</font> </div> <div align="center" style="padding-top: 20px;"> <font style="font-size: 20px;">www.shiyanlou.com</font> </div> </div> </div> </div> <div region="west" style="width: 200px; height: 500px;" title="Navigation Menu" split="true"> <div class="easyui-accordion"> <div title="Department Manage" data-options="selected:true,iconCls:'icon-shujias'" style="padding: 10px; height: 10px;"> <a href="javascript:openTab(' Department Info','deptManage.jsp')" class="easyui-linkbutton" data-options="plain:true" style="width: 150px;"> Department Info</a> </div> <div title="Position Manage" data-options="selected:true,iconCls:'icon-schoolceo'" style="padding: 10px; height: 10px;"> <a href="javascript:openTab(' Position Info','positionManage.jsp')" class="easyui-linkbutton" data-options="plain:true" style="width: 150px;"> Position Info</a> </div> <div title="Employee Manage" data-options="iconCls:'icon-students' " style="padding: 10px"> <a href="javascript:openTab(' Employee Info','employeeManage.jsp')" class="easyui-linkbutton" data-options="plain:true" style="width: 150px;">Employee Info</a> </div> <div title="Post Manage" data-options="selected:true,iconCls:'icon-wenzhang'" style="padding: 10px; height: 10px;"> <a href="javascript:openTab(' Post Info','postManage.jsp')" class="easyui-linkbutton" data-options="plain:true" style="width: 150px;"> Post Info</a> </div> <div title="System Manage" data-options="iconCls:'icon-item'" style="padding: 10px; border: none;"> <a href="javascript:openTab(' Admin List','adminManage.jsp','icon-lxr')" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-lxr'" style="width: 150px;"> Admin List</a><a href="javascript:logout()" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-exit'" style="width: 150px;"> Exit</a> </div> </div> </div> </body> </html> 2.4 postContent.jsp
在项目 hrms 的 src->main->webapp 下新建 JSP 页面 postContent.jsp 作为公告内容详情的展示页面，并添加如下代码：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Post Content</title> </head> <body>${requestScope.postContent} </body> </html> 2.5 五大功能模块 JSP 页面
在项目 hrms 的 src->main->webapp 下新建 Folder views。
2.5.1 adminManage.jsp
在项目 hrms 的 src->main->webapp->views 下新建 JSP 页面 adminManage.jsp 作为系统管理页面，并添加如下代码：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/jquery-easyui-1.3.3/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/jquery-easyui-1.3.3/themes/icon.css"> <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.3.3/jquery.min.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.3.3/jquery.easyui.min.js"></script> <script type="text/javascript"> var url; /* 根据条件查询管理员 */ function searchAdmin() { $("#dg").datagrid('load', { "username" : $("#s_username").val() }); } /* 删除管理员，可以是多个 */ function deleteAdmin() { var selectedRows = $("#dg").datagrid('getSelections'); if (selectedRows.length == 0) { $.messager.alert("system prompt", "Please choose the data to delete!"); return; } var strIds = []; for ( var i = 0; i < selectedRows.length; i++) { strIds.push(selectedRows[i].id); } var ids = strIds.join(","); $.messager .confirm( "system prompt", "Do you want to delete the <font color=red>" + selectedRows.length + "</font> data?", function(r) { if (r) { $ .post( "${pageContext.request.contextPath}/admin/delete", { ids : ids }, function(result) { if (result.success) { $.messager .alert( "system prompt", "Delete successful!"); $("#dg").datagrid( "reload"); } else { $.messager .alert( "system prompt", "Can't delete superAdmin or current admin!"); } }, "json"); } }); } function openAdminAddDialog() { $("#dlg").dialog("open").dialog("setTitle", "Add new admin"); url = "${pageContext.request.contextPath}/admin/save"; } /* 保存管理员，根据不同的 url 选择是添加还是修改 */ function saveAdmin() { $("#fm").form("submit", { url : url, onSubmit : function() { return $(this).form("validate"); }, success : function(result) { $.messager.alert("system prompt", "Save successful!"); resetValue(); $("#dlg").dialog("close"); $("#dg").datagrid("reload"); } }); } function openAdminModifyDialog() { var selectedRows = $("#dg").datagrid('getSelections'); if (selectedRows.length != 1) { $.messager.alert("system prompt", "Please choose a data to edit!"); return; } var row = selectedRows[0]; if (row.id == 1) { $.messager.alert("system prompt", "Can't modity superadmin' information!"); return; } $("#dlg").dialog("open").dialog("setTitle", "Edit admin information"); $('#fm').form('load', row); $("#password").val("******"); url = "${pageContext.request.contextPath}/admin/save?id=" + row.id; } function resetValue() { $("#username").val(""); $("#password").val(""); } function closeAdminDialog() { $("#dlg").dialog("close"); resetValue(); } </script> </head> <body style="margin: 1px;"> <table id="dg" title="Admin Manage" class="easyui-datagrid" fitColumns="true" pagination="true" rownumbers="true" url="${pageContext.request.contextPath}/admin/list" fit="true" toolbar="#tb"> <thead> <tr> <th field="cb" checkbox="true" align="center"></th> <th field="id" width="50" align="center">id</th> <th field="username" width="80" align="center">username</th> <th field="role_name" width="80" align="center">role_name</th> </tr> </thead> </table> <div id="tb"> <div> <a href="javascript:openAdminAddDialog()" class="easyui-linkbutton" iconCls="icon-add" plain="true">Add</a> <a href="javascript:openAdminModifyDialog()" class="easyui-linkbutton" iconCls="icon-edit" plain="true">Modify</a> <a href="javascript:deleteAdmin()" class="easyui-linkbutton" iconCls="icon-remove" plain="true">Delete</a> </div> <div> Username: <input type="text" id="s_username" size="20" onkeydown="if(event.keyCode==13) searchAdmin()" /> <a href="javascript:searchAdmin()" class="easyui-linkbutton" iconCls="icon-search" plain="true">Search</a> </div> </div> <div id="dlg" class="easyui-dialog" style="width: 620px; height: 250px; padding: 10px 20px" closed="true" buttons="#dlg-buttons"> <form id="fm" method="post"> <table cellspacing="8px"> <tr> <td>Username:</td> <td><input type="text" id="username" name="username" class="easyui-validatebox" required="true" /> <font color="red">*</font></td> </tr> <tr> <td>Password:</td> <td><input type="text" id="password" name="password" class="easyui-validatebox" required="true" /> <font color="red">*</font></td> </tr> </table> </form> </div> <div id="dlg-buttons"> <a href="javascript:saveAdmin()" class="easyui-linkbutton" iconCls="icon-ok">Save</a> <a href="javascript:closeAdminDialog()" class="easyui-linkbutton" iconCls="icon-cancel">Close</a> </div> </body> </html> 2.5.2 postManage.jsp
在项目 hrms 的 src->main->webapp->views 下新建 JSP 页面 postManage.jsp 作为公告管理页面，并添加如下代码：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>postManage</title> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/jquery-easyui-1.3.3/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/jquery-easyui-1.3.3/themes/icon.css"> <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.3.3/jquery.min.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.3.3/jquery.easyui.min.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/ueditor/ueditor.config.js"> </script> <script type="text/javascript" src="${pageContext.request.contextPath}/ueditor/ueditor.all.min.js"> </script> <script type="text/javascript" src="${pageContext.request.contextPath}/js/common.js"></script> <script type="text/javascript"> var url; function ResetEditor() { UE.getEditor('myEditor', { initialFrameHeight : 480, initialFrameWidth : 660, enableAutoSave : false, elementPathEnabled : false, wordCount : false, }); } /* 根据条件查询公告 */ function searchPost() { $("#dg").datagrid('load', { "title" : $("#postTitle").val(), }); } /* 删除公告，可以是多个 */ function deletePost() { var selectedRows = $("#dg").datagrid('getSelections'); if (selectedRows.length == 0) { $.messager.alert("system prompt", "Please choose a data to edit!"); return; } var strIds = []; for ( var i = 0; i < selectedRows.length; i++) { strIds.push(selectedRows[i].id); } var ids = strIds.join(","); $.messager .confirm( "Please choose a data to edit!", "Do you want to delete the <font color=red>" + selectedRows.length + "</font> data?", function(r) { if (r) { $ .post( "${pageContext.request.contextPath}/post/delete", { ids : ids }, function(result) { if (result.success) { $.messager .alert( "system prompt", "Delete successful!"); $("#dg").datagrid( "reload"); } else { $.messager .alert( "system prompt", "Delete error!"); } }, "json"); } }); } function openPostAddDialog() { var html = '<div id="myEditor" name="content"></div>'; $('#editor').append(html); ResetEditor(editor); var ue = UE.getEditor('myEditor'); ue.ready(function() { ue.setContent(""); }); $("#dlg").dialog("open").dialog("setTitle", "Add post"); url = "${pageContext.request.contextPath}/post/save"; } /* 保存公告，根据不同的 url 选择是添加还是修改 */ function savePost() { $("#fm").form("submit", { url : url, onSubmit : function() { return $(this).form("validate"); }, success : function(result) { $.messager.alert("system prompt", "Save successful!"); $("#dlg").dialog("close"); $("#dg").datagrid("reload"); resetValue(); } }); } function openPostModifyDialog() { var selectedRows = $("#dg").datagrid('getSelections'); if (selectedRows.length != 1) { $.messager.alert("system prompt", "Please choose a data to edit!"); return; } var row = selectedRows[0]; $("#dlg").dialog("open").dialog("setTitle", "Edit post"); $('#fm').form('load', row); var html = '<div id="myEditor" name="content"></div>'; $('#editor').append(html); ResetEditor(editor); var ue = UE.getEditor('myEditor'); ue.ready(function() { ue.setContent(row.content); }); url = "${pageContext.request.contextPath}/post/save?id=" + row.id; } function formatHref(val, row) { return "<a href='${pageContext.request.contextPath}/post/getById?id=" + row.id + "' target='_blank'>Show Content</a>"; } function resetValue() { $("#title").val(""); $("#container").val(""); ResetEditor(); } function closePostDialog() { $("#dlg").dialog("close"); resetValue(); } </script> </head> <body style="margin: 1px;" id="ff"> <table id="dg" title="Post Manage" class="easyui-datagrid" pagination="true" rownumbers="true" fit="true" data-options="pageSize:10" url="${pageContext.request.contextPath}/post/list" toolbar="#tb"> <thead data-options="frozen:true"> <tr> <th field="cb" checkbox="true" align="center"></th> <th field="id" width="10%" align="center" hidden="true">id</th> <th field="title" width="300" align="center">title</th> <th field="date" width="150" align="center">create_date</th> <th field="admin.username" width="150" align="center">announcer</th> <th field="content" width="150" align="center" formatter="formatHref">operation</th> </tr> </thead> </table> <div id="tb"> <div> <a href="javascript:openPostAddDialog()" class="easyui-linkbutton" iconCls="icon-add" plain="true">Add</a> <a href="javascript:openPostModifyDialog()" class="easyui-linkbutton" iconCls="icon-edit" plain="true">Modify</a> <a href="javascript:deletePost()" class="easyui-linkbutton" iconCls="icon-remove" plain="true">Delete</a> </div> <div> Title: <input type="text" id="postTitle" size="20" onkeydown="if(event.keyCode==13) searchPost()" /> <a href="javascript:searchPost()" class="easyui-linkbutton" iconCls="icon-search" plain="true">Search</a> </div> </div> <div id="dlg" class="easyui-dialog" style="width: 850px; height: 555px; padding: 10px 20px; position: relative; z-index: 1000;" closed="true" buttons="#dlg-buttons"> <form id="fm" method="post"> <table cellspacing="8px"> <tr> <td>TiTle:</td> <td><input type="text" id="title" name="title" class="easyui-validatebox" required="true" /> <font color="red">*</font></td> </tr> <tr> <td>Content:</td> <td id="editor"></td> </tr> </table> </form> </div> <div id="dlg-buttons"> <a href="javascript:savePost()" class="easyui-linkbutton" iconCls="icon-ok">Save</a> <a href="javascript:closePostDialog()" class="easyui-linkbutton" iconCls="icon-cancel">Close</a> </div> </body> </html> 2.5.3 deptManage.jsp
在项目 hrms 的 src->main->webapp->views 下新建 JSP 页面 deptManage.jsp 作为部门管理页面，并添加如下代码：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/jquery-easyui-1.3.3/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/jquery-easyui-1.3.3/themes/icon.css"> <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.3.3/jquery.min.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.3.3/jquery.easyui.min.js"></script> <script type="text/javascript"> var url; /* 根据条件查询部门 */ function searchDept() { $("#dg").datagrid('load', { "name" : $("#s_name").val() }); } /* 删除部门，可以是多个 */ function deleteDept() { var selectedRows = $("#dg").datagrid('getSelections'); if (selectedRows.length == 0) { $.messager.alert("system prompt", "Please choose the data to delete!"); return; } var strIds = []; for ( var i = 0; i < selectedRows.length; i++) { strIds.push(selectedRows[i].id); } var ids = strIds.join(","); $.messager .confirm( "system prompt", "Do you want to delete the <font color=red>" + selectedRows.length + "</font> data?", function(r) { if (r) { $ .post( "${pageContext.request.contextPath}/dept/delete", { ids : ids }, function(result) { if (result.success) { $.messager .alert( "system prompt", "Delete successful!"); $("#dg").datagrid( "reload"); } else { $.messager .alert( "system prompt", "Delete error! The department has employees!"); } }, "json"); } }); } function openDeptAddDialog() { $("#dlg").dialog("open").dialog("setTitle", "Add new department"); url = "${pageContext.request.contextPath}/dept/save"; } /* 保存部门，根据不同的 url 选择是添加还是修改 */ function saveDept() { $("#fm").form("submit", { url : url, onSubmit : function() { return $(this).form("validate"); }, success : function(result) { $.messager.alert("system prompt", "Save successful!"); resetValue(); $("#dlg").dialog("close"); $("#dg").datagrid("reload"); } }); } function openDeptModifyDialog() { var selectedRows = $("#dg").datagrid('getSelections'); if (selectedRows.length != 1) { $.messager.alert("system prompt", "Please choose a data to edit!"); return; } var row = selectedRows[0]; $("#dlg").dialog("open").dialog("setTitle", "Edit department information"); $('#fm').form('load', row); url = "${pageContext.request.contextPath}/dept/save?id=" + row.id; } function resetValue() { $("#name").val(""); $("#description").val(""); } function closeDeptDialog() { $("#dlg").dialog("close"); resetValue(); } </script> </head> <body style="margin: 1px;"> <table id="dg" title="Department Manage" class="easyui-datagrid" fitColumns="true" pagination="true" rownumbers="true" url="${pageContext.request.contextPath}/dept/list" fit="true" toolbar="#tb"> <thead> <tr> <th field="cb" checkbox="true" align="center"></th> <th field="id" width="50" align="center" hidden="true">id</th> <th field="name" width="80" align="center">name</th> <th field="description" width="200" align="center">description</th> </tr> </thead> </table> <div id="tb"> <div> <a href="javascript:openDeptAddDialog()" class="easyui-linkbutton" iconCls="icon-add" plain="true">Add</a> <a href="javascript:openDeptModifyDialog()" class="easyui-linkbutton" iconCls="icon-edit" plain="true">Modify</a> <a href="javascript:deleteDept()" class="easyui-linkbutton" iconCls="icon-remove" plain="true">Delete</a> </div> <div> Name: <input type="text" id="s_name" size="20" onkeydown="if(event.keyCode==13) searchDept()" /> <a href="javascript:searchDept()" class="easyui-linkbutton" iconCls="icon-search" plain="true">Search</a> </div> </div> <div id="dlg" class="easyui-dialog" style="width: 450px; height: 250px; padding: 10px 20px" closed="true" buttons="#dlg-buttons"> <form id="fm" method="post"> <table cellspacing="8px"> <tr> <td>Name:</td> <td><input type="text" id="name" name="name" style="width: 180px" class="easyui-validatebox" required="true" /> <font color="red">*</font></td> </tr> <tr> <td>Description:</td> <td><textarea id="description" name="description" style="width: 180px; height: 80px;" class="easyui-validatebox" required="true"></textarea> <font color="red">*</font></td> </tr> </table> </form> </div> <div id="dlg-buttons"> <a href="javascript:saveDept()" class="easyui-linkbutton" iconCls="icon-ok">Save</a> <a href="javascript:closeDeptDialog()" class="easyui-linkbutton" iconCls="icon-cancel">Close</a> </div> </body> </html> 2.5.4 positionManage.jsp
在项目 hrms 的 src->main->webapp->views 下新建 JSP 页面 positionManage.jsp 作为职位管理页面，并添加如下代码：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/jquery-easyui-1.3.3/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/jquery-easyui-1.3.3/themes/icon.css"> <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.3.3/jquery.min.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.3.3/jquery.easyui.min.js"></script> <script type="text/javascript"> var url; /* 根据条件查询职位 */ function searchPosition() { $("#dg").datagrid('load', { "name" : $("#s_name").val() }); } /* 删除职位，可以是多个 */ function deletePosition() { var selectedRows = $("#dg").datagrid('getSelections'); if (selectedRows.length == 0) { $.messager.alert("system prompt", "Please choose the data to delete!"); return; } var strIds = []; for ( var i = 0; i < selectedRows.length; i++) { strIds.push(selectedRows[i].id); } var ids = strIds.join(","); $.messager .confirm( "system prompt", "Do you want to delete the <font color=red>" + selectedRows.length + "</font> data?", function(r) { if (r) { $ .post( "${pageContext.request.contextPath}/position/delete", { ids : ids }, function(result) { if (result.success) { $.messager .alert( "system prompt", "Delete successful!"); $("#dg").datagrid( "reload"); } else { $.messager .alert( "system prompt", "Delete error! The position has employees!"); } }, "json"); } }); } function openPositionAddDialog() { $("#dlg").dialog("open").dialog("setTitle", "Add new position"); url = "${pageContext.request.contextPath}/position/save"; } /* 保存职位，根据不同的 url 选择是添加还是修改 */ function savePosition() { $("#fm").form("submit", { url : url, onSubmit : function() { return $(this).form("validate"); }, success : function(result) { $.messager.alert("system prompt", "Save successful!"); resetValue(); $("#dlg").dialog("close"); $("#dg").datagrid("reload"); } }); } function openPositionModifyDialog() { var selectedRows = $("#dg").datagrid('getSelections'); if (selectedRows.length != 1) { $.messager.alert("system prompt", "Please choose a data to edit!"); return; } var row = selectedRows[0]; $("#dlg").dialog("open") .dialog("setTitle", "Edit position information"); $('#fm').form('load', row); url = "${pageContext.request.contextPath}/position/save?id=" + row.id; } function resetValue() { $("#name").val(""); $("#description").val(""); } function closePositionDialog() { $("#dlg").dialog("close"); resetValue(); } </script> </head> <body style="margin: 1px;"> <table id="dg" title="Position Manage" class="easyui-datagrid" fitColumns="true" pagination="true" rownumbers="true" url="${pageContext.request.contextPath}/position/list" fit="true" toolbar="#tb"> <thead> <tr> <th field="cb" checkbox="true" align="center"></th> <th field="id" width="50" align="center" hidden="true">id</th> <th field="name" width="80" align="center">name</th> <th field="description" width="200" align="center">description</th> </tr> </thead> </table> <div id="tb"> <div> <a href="javascript:openPositionAddDialog()" class="easyui-linkbutton" iconCls="icon-add" plain="true">Add</a> <a href="javascript:openPositionModifyDialog()" class="easyui-linkbutton" iconCls="icon-edit" plain="true">Modify</a> <a href="javascript:deletePosition()" class="easyui-linkbutton" iconCls="icon-remove" plain="true">Delete</a> </div> <div> Name: <input type="text" id="s_name" size="20" onkeydown="if(event.keyCode==13) searchPosition()" /> <a href="javascript:searchPosition()" class="easyui-linkbutton" iconCls="icon-search" plain="true">Search</a> </div> </div> <div id="dlg" class="easyui-dialog" style="width: 450px; height: 250px; padding: 10px 20px" closed="true" buttons="#dlg-buttons"> <form id="fm" method="post"> <table cellspacing="8px"> <tr> <td>Name:</td> <td><input type="text" id="name" name="name" style="width: 180px" class="easyui-validatebox" required="true" /> <font color="red">*</font></td> </tr> <tr> <td>Description:</td> <td><textarea id="description" name="description" style="width: 180px; height: 80px;" class="easyui-validatebox" required="true"></textarea> <font color="red">*</font></td> </tr> </table> </form> </div> <div id="dlg-buttons"> <a href="javascript:savePosition()" class="easyui-linkbutton" iconCls="icon-ok">Save</a> <a href="javascript:closePositionDialog()" class="easyui-linkbutton" iconCls="icon-cancel">Close</a> </div> </body> </html> 2.5.5 employeeManage.jsp
在项目 hrms 的 src->main->webapp->views 下新建 JSP 页面 employeeManage.jsp 作为员工管理页面，并添加如下代码：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/jquery-easyui-1.3.3/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/jquery-easyui-1.3.3/themes/icon.css"> <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.3.3/jquery.min.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.3.3/jquery.easyui.min.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script> <script type="text/javascript"> var url; var firstDepartmentId; var firstDepartmentName; var firstPositionId; var firstPositionName; var submitDeptId; var submitPosId; var updateFlag; /* 根据条件查询员工 */ function searchEmpl() { $("#dg").datagrid('load', { "id" : $("#e_id").val(), "name" : $("#e_name").val(), "department.name" : $("#e_dept").val(), "position.name" : $("#e_position").val(), "sex" : $("#e_sex").val() }); } /* 删除员工，可以是多个 */ function deleteEmpl() { var selectedRows = $("#dg").datagrid('getSelections'); if (selectedRows.length == 0) { $.messager.alert("system prompt", "Please choose the data to delete!"); return; } var strIds = []; for ( var i = 0; i < selectedRows.length; i++) { strIds.push(selectedRows[i].id); } var ids = strIds.join(","); $.messager .confirm( "system prompt", "Do you want to delete the <font color=red>" + selectedRows.length + "</font> data?", function(r) { if (r) { $ .post( "${pageContext.request.contextPath}/empl/delete", { ids : ids }, function(result) { if (result.success) { $.messager .alert( "system prompt", "Delete successful!"); $("#dg").datagrid( "reload"); } else { $.messager .alert( "system prompt", "Delete error!"); } }, "json"); } }); } function openEmplAddDialog() { $("#dlg").dialog("open").dialog("setTitle", "Add new employee"); $("#id").attr("readOnly", false); url = "${pageContext.request.contextPath}/empl/save"; updateFlag = "no"; } /* 保存员工，根据不同的 url 选择是添加还是修改 */ function saveEmpl() { submitDeptId = $("#dept").combobox('getValue'); submitPosId = $("#pos").combobox('getValue'); $("#fm") .form( "submit", { url : url + "?dept_id= " + submitDeptId + "&pos_id= " + submitPosId + "&updateFlag=" + updateFlag, onSubmit : function() { var msg = ""; // 进行输入信息的校验，非空，id 和 phone 的格式 if (!$(this).form("validate")) { msg = "all information can't be empty!"; } else if (!/^[0-9]+$/.test($("#id").val())) { msg = "Please input number type for id!"; } else if (!/^1[3|5|7|8]\d{9}$/ .test($("#phone").val())) { msg = "Please input right phone!"; } if (msg != "") { $.messager.alert("system prompt", msg); return false; } else { return true; } }, success : function(data) { var result = eval('(' + data + ')'); if (result.success) { $.messager.alert("system prompt", "Save successful!"); resetValue(); $("#dlg").dialog("close"); $("#dg").datagrid("reload"); } else { $.messager .alert("system prompt", "The id already exists,please input a new id!"); } } }); } function openEmplModifyDialog() { var selectedRows = $("#dg").datagrid('getSelections'); if (selectedRows.length != 1) { $.messager.alert("system prompt", "Please choose a data to edit!"); return; } var row = selectedRows[0]; $("#dlg").dialog("open") .dialog("setTitle", "Edit employee information"); $("#id").attr("readOnly", true); $('#fm').form('load', row); $('#birthday').datebox('setValue', row.birthday); $('#dept').combobox('setValue', row.department.id); $('#dept').combobox('setText', row.department.name); $('#pos').combobox('setValue', row.position.id); $('#pos').combobox('setText', row.position.name); url = "${pageContext.request.contextPath}/empl/save"; updateFlag = "yes"; } function resetValue() { $("#id").val(""); $("#id").attr("readOnly", false); $("#name").val(""); $('#sex').combobox('setValue', "male"); $("#phone").val(""); $("#email").val(""); $("#address").val(""); $('#education').combobox('setValue', "Bachelor"); $('#birthday').datebox('setValue', formatterDate(new Date())); $('#dept').combobox('setValue', firstDepartmentId); $('#dept').combobox('setText', firstDepartmentName); $('#pos').combobox('setValue', firstPositionId); $('#pos').combobox('setText', firstPositionName); } function closeEmplDialog() { $("#dlg").dialog("close"); resetValue(); } /* 为部门的 combobox 设默认值 */ $(document).ready(function() { $.ajax({ url : '${pageContext.request.contextPath}/dept/getcombobox', type : 'post', success : function(data) { if (data) { $('#dept').combobox('setValue', data[0].id); $('#dept').combobox('setText', data[0].name); firstDepartmentId = data[0].id; firstDepartmentName = data[0].name; } } }); }); /* 为职位的 combobox 设默认值 */ $(document).ready(function() { $.ajax({ url : '${pageContext.request.contextPath}/position/getcombobox', type : 'post', success : function(data) { if (data) { $('#pos').combobox('setValue', data[0].id); $('#pos').combobox('setText', data[0].name); firstPositionId = data[0].id; firstPositionName = data[0].name; } } }); }); /* 设置 datebox 默认值为指定格式的当前日期 */ formatterDate = function(date) { var day = date.getDate() > 9 ? date.getDate() : "0" + date.getDate(); var month = (date.getMonth() + 1) > 9 ? (date.getMonth() + 1) : "0" + (date.getMonth() + 1); return date.getFullYear() + '-' + month + '-' + day; }; window.onload = function() { $('#birthday').datebox('setValue', formatterDate(new Date())); }; </script> </head> <body style="margin: 1px;"> <table id="dg" title="Employee Manage" class="easyui-datagrid" fitColumns="true" pagination="true" rownumbers="true" url="${pageContext.request.contextPath}/empl/list" fit="true" toolbar="#tb"> <thead> <tr> <th field="cb" checkbox="true" align="center"></th> <th field="id" width="50" align="center">id</th> <th field="name" width="80" align="center">name</th> <th field="sex" width="50" align="center">sex</th> <th field="phone" width="80" align="center">phone</th> <th field="email" width="100" align="center">email</th> <th field="address" width="80" align="center">address</th> <th field="education" width="60" align="center">education</th> <th field="birthday" width="80" align="center">birthday</th> <th field="department.id" width="50" align="center" hidden="true">dept_id</th> <th field="department.name" width="80" align="center">department</th> <th field="position.id" width="50" align="center" hidden="true">pos_id</th> <th field="position.name" width="80" align="center">position</th> </tr> </thead> </table> <div id="tb"> <div> <a href="javascript:openEmplAddDialog()" class="easyui-linkbutton" iconCls="icon-add" plain="true">Add</a> <a href="javascript:openEmplModifyDialog()" class="easyui-linkbutton" iconCls="icon-edit" plain="true">Modify</a> <a href="javascript:deleteEmpl()" class="easyui-linkbutton" iconCls="icon-remove" plain="true">Delete</a> </div> <div> <table> <tr> <td> ID: <input type="text" id="e_id" size="20" onkeydown="if(event.keyCode==13) searchEmpl()" /> </td> <td> Name: <input type="text" id="e_name" size="20" onkeydown="if(event.keyCode==13) searchEmpl()" /> </td> <td> Department: <input type="text" id="e_dept" size="20" onkeydown="if(event.keyCode==13) searchEmpl()" /> </td> </tr> <tr> <td> Position: <input type="text" id="e_position" size="20" onkeydown="if(event.keyCode==13) searchEmpl()" /> </td> <td> Sex: <input type="text" id="e_sex" size="20" onkeydown="if(event.keyCode==13) searchEmpl()" /> </td> <td> <a href="javascript:searchEmpl()" class="easyui-linkbutton" iconCls="icon-search" plain="true">Search</a> </td> </tr> </table> </div> </div> <div id="dlg" class="easyui-dialog" style="width: 500px; height: 550px; padding: 10px 20px" closed="true" buttons="#dlg-buttons"> <form id="fm" method="post"> <table cellspacing="8px"> <tr> <td>ID:</td> <td><input type="text" id="id" name="id" style="width: 210px" class="easyui-validatebox" data-options="required:true,validType:'digits'" /> <font color="red">*</font></td> </tr> <tr> <td>Name:</td> <td><input type="text" id="name" name="name" style="width: 210px" class="easyui-validatebox" required="true" /> <font color="red">*</font></td> </tr> <tr> <td>Sex:</td> <td><select id="sex" class="easyui-combobox" name="sex" style="width: 220px; heigth: 60px" data-options="editable:false,panelHeight:'auto'"> <option>male</option> <option>female</option> </select></td> </tr> <tr> <td>Phone:</td> <td><input type="text" id="phone" name="phone" style="width: 210px" class="easyui-validatebox" required="true" /> <font color="red">*</font></td> </tr> <tr> <td>Email:</td> <td><input type="text" id="email" name="email" style="width: 210px" class="easyui-validatebox" data-options="required:true,validType:'email'" /> <font color="red">*</font></td> </tr> <tr> <td>Address:</td> <td><textarea id="address" name="address" style="width: 210px; height: 50px" class="easyui-validatebox" required="true"></textarea> <font color="red">*</font></td> </tr> <tr> <td>Education:</td> <td><select id="education" class="easyui-combobox" name="education" style="width: 220px; heigth: 60px" data-options="editable:false,panelHeight:'auto'"> <option>Bachelor</option> <option>Master</option> <option>Doctor</option> </select></td> </tr> <tr> <td>Birthday:</td> <td><input id="birthday" name="birthday" type="text" class="easyui-datebox" data-options="editable:false" required="required" style="width: 220px"></td> </tr> <tr> <td>Department:</td> <td><select class="easyui-combobox" id="dept" name="dept" data-options="url:'${pageContext.request.contextPath}/dept/getcombobox', method:'post', valueField:'id', textField:'name', editable:false, panelHeight:'auto'" style="width: 220px"></select></td> </tr> <tr> <td>Position:</td> <td><select class="easyui-combobox" id="pos" name="pos" data-options="url:'${pageContext.request.contextPath}/position/getcombobox', method:'post', valueField:'id', textField:'name', editable:false, panelHeight:'auto'" style="width: 220px"></select></td> </tr> </table> </form> </div> <div id="dlg-buttons"> <a href="javascript:saveEmpl()" class="easyui-linkbutton" iconCls="icon-ok">Save</a> <a href="javascript:closeEmplDialog()" class="easyui-linkbutton" iconCls="icon-cancel">Close</a> </div> </body> </html> 三、实验总结
到这里我们就完成了表现层 JSP 代码的实现，下一节我们将完成拦截器和 Spring MVC 框架的整合。
825
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
