一、实验介绍

1.1 实验内容

本节课程主要利用 easyUI 实现系统的前端页面。

1.2 实验知识点

  • easyUI
  • JavaScript
  • html

1.3 实验环境

  • JDK1.8
  • Eclipse JavaEE

二、实验步骤

2.1 表现层相关文件获取

打开终端，输入以下命令获取相关文件，包括 easyui、jQuery 等相关文件，保存到目录 /home/shiyanlou/ 下。

  1. wget http://labfile.oss.aliyuncs.com/courses/824/fontendFiles.tar

解压文件到 /home/shiyanlou/ 下。

  1. tar zxvf fontendFiles.tar

然后将 /home/shiyanlou/fontendFiles 文件夹下的全部文件夹拷贝到项目 hrms 的 src->main->webapp 下。

2.2 login.jsp

在项目 hrms 的 src->main->webapp 下新建 JSP 页面 login.jsp 作为系统的登录页面，并添加如下代码：

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.     pageEncoding="UTF-8"%>
  3. <!DOCTYPE html PUBLIC "-//W3C//Dtd HTML 4.01 Transitional//EN">
  4. <html>
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7. <title>hrms-login</title>
  8. <script type="text/javascript"
  9.     src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
  10. <style type=text/css>
  11. body {
  12.     text-align: center;
  13.     padding-bottom: 0px;
  14.     background-color: #ddeef2;
  15.     margin: 0px;
  16.     padding-left: 0px;
  17.     padding-right: 0px;
  18.     padding-top: 0px
  19. }
  21. A:link {
  22.     COLOR: #000000;
  23.     text-decoration: none
  24. }
  26. A:visited {
  27.     COLOR: #000000;
  28.     text-decoration: none
  29. }
  31. A:hover {
  32.     COLOR: #ff0000;
  33.     text-decoration: underline
  34. }
  36. A:active {
  37.     text-decoration: none
  38. }
  40. .input {
  41.     border-bottom: #ccc 1px solid;
  42.     border-left: #ccc 1px solid;
  43.     line-height: 20px;
  44.     width: 182px;
  45.     height: 20px;
  46.     border-top: #ccc 1px solid;
  47.     border-right: #ccc 1px solid
  48. }
  50. .input1 {
  51.     border-bottom: #ccc 1px solid;
  52.     border-left: #ccc 1px solid;
  53.     line-height: 20px;
  54.     width: 120px;
  55.     height: 20px;
  56.     border-top: #ccc 1px solid;
  57.     border-right: #ccc 1px solid;
  58. }
  59. </style>
  60. <script type="text/javascript">
  61.     /* 登录 */
  62.     function login() {
  63.         var username = $("#username").val();
  64.         var password = $("#password").val();
  65.         if (username == null || username == "") {
  66.             alert("username can't be empty\uff01");
  67.             return;
  68.         }
  69.         if (password == null || password == "") {
  70.             alert("password can't be empty\uff01");
  71.             return;
  72.         }
  73.         $("#adminlogin").submit();
  75.     }
  76.     /* 用户名或密码错误时显示 */
  77.     if ('${errorMsg}' != '') {
  78.         alert('${errorMsg}');
  79.     }
  80.     /* 拦截器显示信息 */
  81.     if ('${message}' != '') {
  82.         alert('${message}');
  83.     }
  84. </script>
  85. </head>
  86. <body>
  87.     <form id=adminlogin method=post name=adminlogin
  88.         action="${pageContext.request.contextPath}/admin/login">
  89.         <div></div>
  90.         <table style="margin: auto; width: 100%; height: 100%" border=0
  91.             cellSpacing=0 cellPadding=0>
  92.             <tbody>
  93.                 <tr>
  94.                     <td height=150>&nbsp;</td>
  95.                 </tr>
  96.                 <tr style="height: 254px">
  97.                     <td>
  98.                         <div style="margin: 0px auto; width: 868px">
  99.                             <img style="display: block"
  100.                                 src="${pageContext.request.contextPath}/images/body_03.jpg">
  101.                         </div>
  102.                         <div style="background-color: #278296">
  103.                             <div style="margin: 0px auto; width: 936px">
  104.                                 <div
  105.                                     style="BACKGROUND: url(${pageContext.request.contextPath}/images/body_05.jpg) no-repeat; height: 155px">
  106.                                     <div
  107.                                         style="text-align: left; width: 265px; float: right; height: 125px; _height: 95px">
  108.                                         <table border=0 cellSpacing=0 cellPadding=0 width="100%">
  109.                                             <tbody>
  110.                                                 <tr>
  111.                                                     <td style="height: 45px"><input type="text"
  112.                                                         class=input value="${admin.username}" name="username"
  113.                                                         id="username"></td>
  114.                                                 </tr>
  115.                                                 <tr>
  116.                                                     <td><input type="password" class=input
  117.                                                         value="${admin.password}" name="password" id="password" /></td>
  118.                                                 </tr>
  119.                                             </tbody>
  120.                                         </table>
  121.                                     </div>
  122.                                     <div style="height: 1px; clear: both"></div>
  123.                                     <div style="width: 380px; float: right; clear: both">
  124.                                         <table border=0 cellSpacing=0 cellPadding=0 width=300>
  125.                                             <tbody>
  127.                                                 <tr>
  128.                                                     <td width=100 align=right><input
  129.                                                         style="border-right-width: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px"
  130.                                                         id=btnLogin
  131.                                                         src="${pageContext.request.contextPath}/images/btn1.jpg"
  132.                                                         type=image name=btnLogin onclick="javascript:login();"></td>
  133.                                                     <td width=100 align=middle><input
  134.                                                         style="border-right-width: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px"
  135.                                                         id=btnReset
  136.                                                         src="${pageContext.request.contextPath}/images/btn2.jpg"
  137.                                                         type=image name=btnReset
  138.                                                         onclick="javascript:adminlogin.reset();"></td>
  139.                                                 </tr>
  140.                                             </tbody>
  141.                                         </table>
  142.                                     </div>
  143.                                 </div>
  144.                             </div>
  145.                         </div>
  146.                         <div style="margin: 0px auto; width: 936px">
  147.                             <img src="${pageContext.request.contextPath}/images/body_06.jpg">
  148.                         </div>
  149.                     </td>
  150.                 </tr>
  151.                 <tr style="height: 30%">
  152.                     <td>&nbsp;</td>
  153.                 </tr>
  154.             </tbody>
  155.         </table>
  156.     </form>
  157. </body>
  158. </html>

2.3 home_page.jsp

在项目 hrms 的 src->main->webapp 下新建 JSP 页面 home_page.jsp 作为系统的主页面，并添加如下代码：

  1. <%@ page language="java" contentType="text/html; charset=utf-8"
  2.     pageEncoding="utf-8"%>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  7. <title>hrms_main</title>
  8. <link rel="stylesheet" type="text/css"
  9.     href="${pageContext.request.contextPath}/jquery-easyui-1.3.3/themes/default/easyui.css">
  10. <link rel="stylesheet" type="text/css"
  11.     href="${pageContext.request.contextPath}/jquery-easyui-1.3.3/themes/icon.css">
  12. <script type="text/javascript"
  13.     src="${pageContext.request.contextPath}/jquery-easyui-1.3.3/jquery.min.js"></script>
  14. <script type="text/javascript"
  15.     src="${pageContext.request.contextPath}/jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
  16. <script type="text/javascript">
  17.     var url;
  18.     function addTab(url, text, iconCls) {
  19.         var content = "<iframe frameborder=0 scrolling='auto' style='width:100%;height:100%' src='${pageContext.request.contextPath}/views/"
  20.                 + url + "'></iframe>";
  21.         $("#tabs").tabs("add", {
  22.             title : text,
  23.             iconCls : iconCls,
  24.             closable : true,
  25.             content : content
  26.         });
  27.     }
  28.     function openTab(text, url, iconCls) {
  29.         if ($("#tabs").tabs("exists", text)) {
  30.             $("#tabs").tabs("close", text);
  31.             addTab(url, text, iconCls);
  32.             $("#tabs").tabs("select", text);
  33.         } else {
  34.             addTab(url, text, iconCls);
  35.         }
  36.     }
  37.     /* 退出 */
  38.     function logout() {
  39.         $.messager
  40.                 .confirm(
  41.                         "system prompt",
  42.                         "Do you want to exit?",
  43.                         function(r) {
  44.                             if (r) {
  45.                                 window.location.href = "${pageContext.request.contextPath}/admin/logout";
  46.                             }
  47.                         });
  48.     }
  49. </script>
  50. <body class="easyui-layout">
  51.     <div region="north" style="height: 78px; background-color: #ffff">
  52.         <table width="100%">
  53.             <tr>
  54.                 <td width="50%"></td>
  55.                 <td valign="bottom"
  56.                     style="font-size: 20px; color: #8B8B8B; font-family: '\u6977\u4f53';"
  57.                     align="right" width="50%"><font size="3">&nbsp;&nbsp;<strong>Current
  58.                             Admin\uff1a</strong>
  59.                 </font> <font color="red">${sessionScope.currentAdmin.username}</font></td>
  60.             </tr>
  61.         </table>
  62.     </div>
  63.     <div region="center">
  64.         <div class="easyui-tabs" fit="true" border="false" id="tabs">
  65.             <div title="Home" data-options="iconCls:'icon-home'">
  66.                 <div align="center" style="padding-top: 50px">
  67.                     <font color="grey" size="10">Human Affairs Management System</font>
  68.                 </div>
  69.                 <div align="center" style="padding-top: 20px;">
  70.                     <font style="font-size: 20px;">www.shiyanlou.com</font>
  71.                 </div>
  72.             </div>
  73.         </div>
  74.     </div>
  75.     <div region="west" style="width: 200px; height: 500px;"
  76.         title="Navigation Menu" split="true">
  77.         <div class="easyui-accordion">
  78.             <div title="Department Manage"
  79.                 data-options="selected:true,iconCls:'icon-shujias'"
  80.                 style="padding: 10px; height: 10px;">
  81.                 <a href="javascript:openTab(' Department Info','deptManage.jsp')"
  82.                     class="easyui-linkbutton" data-options="plain:true"
  83.                     style="width: 150px;"> Department Info</a>
  84.             </div>
  86.             <div title="Position Manage"
  87.                 data-options="selected:true,iconCls:'icon-schoolceo'"
  88.                 style="padding: 10px; height: 10px;">
  89.                 <a href="javascript:openTab(' Position Info','positionManage.jsp')"
  90.                     class="easyui-linkbutton" data-options="plain:true"
  91.                     style="width: 150px;"> Position Info</a>
  92.             </div>
  94.             <div title="Employee Manage" data-options="iconCls:'icon-students' "
  95.                 style="padding: 10px">
  96.                 <a href="javascript:openTab(' Employee Info','employeeManage.jsp')"
  97.                     class="easyui-linkbutton" data-options="plain:true"
  98.                     style="width: 150px;">Employee Info</a>
  99.             </div>
  101.             <div title="Post Manage"
  102.                 data-options="selected:true,iconCls:'icon-wenzhang'"
  103.                 style="padding: 10px; height: 10px;">
  104.                 <a href="javascript:openTab(' Post Info','postManage.jsp')"
  105.                     class="easyui-linkbutton" data-options="plain:true"
  106.                     style="width: 150px;"> Post Info</a>
  107.             </div>
  109.             <div title="System Manage" data-options="iconCls:'icon-item'"
  110.                 style="padding: 10px; border: none;">
  111.                 <a
  112.                     href="javascript:openTab(' Admin List','adminManage.jsp','icon-lxr')"
  113.                     class="easyui-linkbutton"
  114.                     data-options="plain:true,iconCls:'icon-lxr'" style="width: 150px;">
  115.                     Admin List</a><a href="javascript:logout()" class="easyui-linkbutton"
  116.                     data-options="plain:true,iconCls:'icon-exit'" style="width: 150px;">
  117.                     Exit</a>
  118.             </div>
  119.         </div>
  120.     </div>
  121. </body>
  122. </html>

2.4 postContent.jsp

在项目 hrms 的 src->main->webapp 下新建 JSP 页面 postContent.jsp 作为公告内容详情的展示页面，并添加如下代码：

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.     pageEncoding="UTF-8"%>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7. <title>Post Content</title>
  8. </head>
  9. <body>${requestScope.postContent}
  10. </body>
  11. </html>

2.5 五大功能模块 JSP 页面

在项目 hrms 的 src->main->webapp 下新建 Folder views。

2.5.1 adminManage.jsp

在项目 hrms 的 src->main->webapp->views 下新建 JSP 页面 adminManage.jsp 作为系统管理页面，并添加如下代码：

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.     pageEncoding="UTF-8"%>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7. <title>Insert title here</title>
  8. <link rel="stylesheet" type="text/css"
  9.     href="${pageContext.request.contextPath}/jquery-easyui-1.3.3/themes/default/easyui.css">
  10. <link rel="stylesheet" type="text/css"
  11.     href="${pageContext.request.contextPath}/jquery-easyui-1.3.3/themes/icon.css">
  12. <script type="text/javascript"
  13.     src="${pageContext.request.contextPath}/jquery-easyui-1.3.3/jquery.min.js"></script>
  14. <script type="text/javascript"
  15.     src="${pageContext.request.contextPath}/jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
  16. <script type="text/javascript">
  17.     var url;
  18.     /* 根据条件查询管理员 */
  19.     function searchAdmin() {
  20.         $("#dg").datagrid('load', {
  21.             "username" : $("#s_username").val()
  22.         });
  23.     }
  24.     /* 删除管理员，可以是多个 */
  25.     function deleteAdmin() {
  26.         var selectedRows = $("#dg").datagrid('getSelections');
  27.         if (selectedRows.length == 0) {
  28.             $.messager.alert("system prompt",
  29.                     "Please choose the data to delete!");
  30.             return;
  31.         }
  32.         var strIds = [];
  33.         for ( var i = 0; i < selectedRows.length; i++) {
  34.             strIds.push(selectedRows[i].id);
  35.         }
  36.         var ids = strIds.join(",");
  37.         $.messager
  38.                 .confirm(
  39.                         "system prompt",
  40.                         "Do you want to delete the <font color=red>"
  41.                                 + selectedRows.length + "</font> data?",
  42.                         function(r) {
  43.                             if (r) {
  44.                                 $
  45.                                         .post(
  46.                                                 "${pageContext.request.contextPath}/admin/delete",
  47.                                                 {
  48.                                                     ids : ids
  49.                                                 },
  50.                                                 function(result) {
  51.                                                     if (result.success) {
  52.                                                         $.messager
  53.                                                                 .alert(
  54.                                                                         "system prompt",
  55.                                                                         "Delete successful!");
  56.                                                         $("#dg").datagrid(
  57.                                                                 "reload");
  58.                                                     } else {
  59.                                                         $.messager
  60.                                                                 .alert(
  61.                                                                         "system prompt",
  62.                                                                         "Can't delete superAdmin or current admin!");
  63.                                                     }
  64.                                                 }, "json");
  65.                             }
  66.                         });
  67.     }
  69.     function openAdminAddDialog() {
  70.         $("#dlg").dialog("open").dialog("setTitle", "Add new admin");
  71.         url = "${pageContext.request.contextPath}/admin/save";
  72.     }
  73.     /* 保存管理员，根据不同的 url 选择是添加还是修改 */
  74.     function saveAdmin() {
  75.         $("#fm").form("submit", {
  76.             url : url,
  77.             onSubmit : function() {
  78.                 return $(this).form("validate");
  79.             },
  80.             success : function(result) {
  81.                 $.messager.alert("system prompt", "Save successful!");
  82.                 resetValue();
  83.                 $("#dlg").dialog("close");
  84.                 $("#dg").datagrid("reload");
  85.             }
  86.         });
  87.     }
  89.     function openAdminModifyDialog() {
  90.         var selectedRows = $("#dg").datagrid('getSelections');
  91.         if (selectedRows.length != 1) {
  92.             $.messager.alert("system prompt", "Please choose a data to edit!");
  93.             return;
  94.         }
  95.         var row = selectedRows[0];
  96.         if (row.id == 1) {
  97.             $.messager.alert("system prompt",
  98.                     "Can't modity superadmin' information!");
  99.             return;
  100.         }
  101.         $("#dlg").dialog("open").dialog("setTitle", "Edit admin information");
  102.         $('#fm').form('load', row);
  103.         $("#password").val("******");
  104.         url = "${pageContext.request.contextPath}/admin/save?id=" + row.id;
  105.     }
  107.     function resetValue() {
  108.         $("#username").val("");
  109.         $("#password").val("");
  110.     }
  112.     function closeAdminDialog() {
  113.         $("#dlg").dialog("close");
  114.         resetValue();
  115.     }
  116. </script>
  117. </head>
  118. <body style="margin: 1px;">
  119.     <table id="dg" title="Admin Manage" class="easyui-datagrid"
  120.         fitColumns="true" pagination="true" rownumbers="true"
  121.         url="${pageContext.request.contextPath}/admin/list" fit="true"
  122.         toolbar="#tb">
  123.         <thead>
  124.             <tr>
  125.                 <th field="cb" checkbox="true" align="center"></th>
  126.                 <th field="id" width="50" align="center">id</th>
  127.                 <th field="username" width="80" align="center">username</th>
  128.                 <th field="role_name" width="80" align="center">role_name</th>
  129.             </tr>
  130.         </thead>
  131.     </table>
  132.     <div id="tb">
  133.         <div>
  134.             <a href="javascript:openAdminAddDialog()" class="easyui-linkbutton"
  135.                 iconCls="icon-add" plain="true">Add</a> <a
  136.                 href="javascript:openAdminModifyDialog()" class="easyui-linkbutton"
  137.                 iconCls="icon-edit" plain="true">Modify</a> <a
  138.                 href="javascript:deleteAdmin()" class="easyui-linkbutton"
  139.                 iconCls="icon-remove" plain="true">Delete</a>
  140.         </div>
  141.         <div>
  142.             &nbsp;Username:&nbsp;<input type="text" id="s_username" size="20"
  143.                 onkeydown="if(event.keyCode==13) searchAdmin()" /> <a
  144.                 href="javascript:searchAdmin()" class="easyui-linkbutton"
  145.                 iconCls="icon-search" plain="true">Search</a>
  146.         </div>
  147.     </div>
  149.     <div id="dlg" class="easyui-dialog"
  150.         style="width: 620px; height: 250px; padding: 10px 20px" closed="true"
  151.         buttons="#dlg-buttons">
  152.         <form id="fm" method="post">
  153.             <table cellspacing="8px">
  154.                 <tr>
  155.                     <td>Username:</td>
  156.                     <td><input type="text" id="username" name="username"
  157.                         class="easyui-validatebox" required="true" />&nbsp;<font
  158.                         color="red">*</font></td>
  159.                 </tr>
  160.                 <tr>
  161.                     <td>Password:</td>
  162.                     <td><input type="text" id="password" name="password"
  163.                         class="easyui-validatebox" required="true" />&nbsp;<font
  164.                         color="red">*</font></td>
  165.                 </tr>
  166.             </table>
  167.         </form>
  168.     </div>
  170.     <div id="dlg-buttons">
  171.         <a href="javascript:saveAdmin()" class="easyui-linkbutton"
  172.             iconCls="icon-ok">Save</a> <a href="javascript:closeAdminDialog()"
  173.             class="easyui-linkbutton" iconCls="icon-cancel">Close</a>
  174.     </div>
  175. </body>
  176. </html>

2.5.2 postManage.jsp

在项目 hrms 的 src->main->webapp->views 下新建 JSP 页面 postManage.jsp 作为公告管理页面，并添加如下代码：

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.     pageEncoding="UTF-8"%>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7. <title>postManage</title>
  8. <link rel="stylesheet" type="text/css"
  9.     href="${pageContext.request.contextPath}/jquery-easyui-1.3.3/themes/default/easyui.css">
  10. <link rel="stylesheet" type="text/css"
  11.     href="${pageContext.request.contextPath}/jquery-easyui-1.3.3/themes/icon.css">
  12. <script type="text/javascript"
  13.     src="${pageContext.request.contextPath}/jquery-easyui-1.3.3/jquery.min.js"></script>
  14. <script type="text/javascript"
  15.     src="${pageContext.request.contextPath}/jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
  16. <script type="text/javascript"
  17.     src="${pageContext.request.contextPath}/ueditor/ueditor.config.js">
  19. </script>
  20. <script type="text/javascript"
  21.     src="${pageContext.request.contextPath}/ueditor/ueditor.all.min.js">
  23. </script>
  24. <script type="text/javascript"
  25.     src="${pageContext.request.contextPath}/js/common.js"></script>
  26. <script type="text/javascript">
  27.     var url;
  28.     function ResetEditor() {
  29.         UE.getEditor('myEditor', {
  30.             initialFrameHeight : 480,
  31.             initialFrameWidth : 660,
  32.             enableAutoSave : false,
  33.             elementPathEnabled : false,
  34.             wordCount : false,
  36.         });
  37.     }
  38.     /* 根据条件查询公告 */
  39.     function searchPost() {
  40.         $("#dg").datagrid('load', {
  41.             "title" : $("#postTitle").val(),
  42.         });
  43.     }
  44.     /* 删除公告，可以是多个 */
  45.     function deletePost() {
  46.         var selectedRows = $("#dg").datagrid('getSelections');
  47.         if (selectedRows.length == 0) {
  48.             $.messager.alert("system prompt", "Please choose a data to edit!");
  49.             return;
  50.         }
  51.         var strIds = [];
  52.         for ( var i = 0; i < selectedRows.length; i++) {
  53.             strIds.push(selectedRows[i].id);
  54.         }
  55.         var ids = strIds.join(",");
  56.         $.messager
  57.                 .confirm(
  58.                         "Please choose a data to edit!",
  59.                         "Do you want to delete the <font color=red>"
  60.                                 + selectedRows.length + "</font> data?",
  61.                         function(r) {
  62.                             if (r) {
  63.                                 $
  64.                                         .post(
  65.                                                 "${pageContext.request.contextPath}/post/delete",
  66.                                                 {
  67.                                                     ids : ids
  68.                                                 },
  69.                                                 function(result) {
  70.                                                     if (result.success) {
  71.                                                         $.messager
  72.                                                                 .alert(
  73.                                                                         "system prompt",
  74.                                                                         "Delete successful!");
  75.                                                         $("#dg").datagrid(
  76.                                                                 "reload");
  77.                                                     } else {
  78.                                                         $.messager
  79.                                                                 .alert(
  80.                                                                         "system prompt",
  81.                                                                         "Delete error!");
  82.                                                     }
  83.                                                 }, "json");
  84.                             }
  85.                         });
  87.     }
  89.     function openPostAddDialog() {
  90.         var html = '<div id="myEditor" name="content"></div>';
  91.         $('#editor').append(html);
  92.         ResetEditor(editor);
  93.         var ue = UE.getEditor('myEditor');
  94.         ue.ready(function() {
  95.             ue.setContent("");
  96.         });
  98.         $("#dlg").dialog("open").dialog("setTitle", "Add post");
  99.         url = "${pageContext.request.contextPath}/post/save";
  101.     }
  102.     /* 保存公告，根据不同的 url 选择是添加还是修改 */
  103.     function savePost() {
  104.         $("#fm").form("submit", {
  105.             url : url,
  106.             onSubmit : function() {
  107.                 return $(this).form("validate");
  108.             },
  109.             success : function(result) {
  110.                 $.messager.alert("system prompt", "Save successful!");
  111.                 $("#dlg").dialog("close");
  112.                 $("#dg").datagrid("reload");
  113.                 resetValue();
  114.             }
  115.         });
  116.     }
  118.     function openPostModifyDialog() {
  119.         var selectedRows = $("#dg").datagrid('getSelections');
  120.         if (selectedRows.length != 1) {
  121.             $.messager.alert("system prompt", "Please choose a data to edit!");
  122.             return;
  123.         }
  124.         var row = selectedRows[0];
  125.         $("#dlg").dialog("open").dialog("setTitle", "Edit post");
  126.         $('#fm').form('load', row);
  127.         var html = '<div id="myEditor" name="content"></div>';
  128.         $('#editor').append(html);
  129.         ResetEditor(editor);
  130.         var ue = UE.getEditor('myEditor');
  131.         ue.ready(function() {
  132.             ue.setContent(row.content);
  133.         });
  135.         url = "${pageContext.request.contextPath}/post/save?id=" + row.id;
  136.     }
  138.     function formatHref(val, row) {
  139.         return "<a href='${pageContext.request.contextPath}/post/getById?id="
  140.                 + row.id + "' target='_blank'>Show Content</a>";
  141.     }
  143.     function resetValue() {
  144.         $("#title").val("");
  145.         $("#container").val("");
  146.         ResetEditor();
  147.     }
  149.     function closePostDialog() {
  150.         $("#dlg").dialog("close");
  151.         resetValue();
  152.     }
  153. </script>
  154. </head>
  155. <body style="margin: 1px;" id="ff">
  156.     <table id="dg" title="Post Manage" class="easyui-datagrid"
  157.         pagination="true" rownumbers="true" fit="true"
  158.         data-options="pageSize:10"
  159.         url="${pageContext.request.contextPath}/post/list" toolbar="#tb">
  160.         <thead data-options="frozen:true">
  161.             <tr>
  162.                 <th field="cb" checkbox="true" align="center"></th>
  163.                 <th field="id" width="10%" align="center" hidden="true">id</th>
  164.                 <th field="title" width="300" align="center">title</th>
  165.                 <th field="date" width="150" align="center">create_date</th>
  166.                 <th field="admin.username" width="150" align="center">announcer</th>
  167.                 <th field="content" width="150" align="center"
  168.                     formatter="formatHref">operation</th>
  169.             </tr>
  170.         </thead>
  171.     </table>
  172.     <div id="tb">
  173.         <div>
  174.             <a href="javascript:openPostAddDialog()" class="easyui-linkbutton"
  175.                 iconCls="icon-add" plain="true">Add</a> <a
  176.                 href="javascript:openPostModifyDialog()" class="easyui-linkbutton"
  177.                 iconCls="icon-edit" plain="true">Modify</a> <a
  178.                 href="javascript:deletePost()" class="easyui-linkbutton"
  179.                 iconCls="icon-remove" plain="true">Delete</a>
  180.         </div>
  181.         <div>
  182.             &nbsp;Title:&nbsp;<input type="text" id="postTitle" size="20"
  183.                 onkeydown="if(event.keyCode==13) searchPost()" />&nbsp; <a
  184.                 href="javascript:searchPost()" class="easyui-linkbutton"
  185.                 iconCls="icon-search" plain="true">Search</a>
  186.         </div>
  187.     </div>
  189.     <div id="dlg" class="easyui-dialog"
  190.         style="width: 850px; height: 555px; padding: 10px 20px; position: relative; z-index: 1000;"
  191.         closed="true" buttons="#dlg-buttons">
  192.         <form id="fm" method="post">
  193.             <table cellspacing="8px">
  194.                 <tr>
  195.                     <td>TiTle:</td>
  196.                     <td><input type="text" id="title" name="title"
  197.                         class="easyui-validatebox" required="true" />&nbsp;<font
  198.                         color="red">*</font></td>
  199.                 </tr>
  200.                 <tr>
  201.                     <td>Content:</td>
  202.                     <td id="editor"></td>
  203.                 </tr>
  204.             </table>
  205.         </form>
  206.     </div>
  208.     <div id="dlg-buttons">
  209.         <a href="javascript:savePost()" class="easyui-linkbutton"
  210.             iconCls="icon-ok">Save</a> <a href="javascript:closePostDialog()"
  211.             class="easyui-linkbutton" iconCls="icon-cancel">Close</a>
  212.     </div>
  213. </body>
  214. </html>

2.5.3 deptManage.jsp

在项目 hrms 的 src->main->webapp->views 下新建 JSP 页面 deptManage.jsp 作为部门管理页面，并添加如下代码：

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.     pageEncoding="UTF-8"%>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7. <title>Insert title here</title>
  8. <link rel="stylesheet" type="text/css"
  9.     href="${pageContext.request.contextPath}/jquery-easyui-1.3.3/themes/default/easyui.css">
  10. <link rel="stylesheet" type="text/css"
  11.     href="${pageContext.request.contextPath}/jquery-easyui-1.3.3/themes/icon.css">
  12. <script type="text/javascript"
  13.     src="${pageContext.request.contextPath}/jquery-easyui-1.3.3/jquery.min.js"></script>
  14. <script type="text/javascript"
  15.     src="${pageContext.request.contextPath}/jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
  16. <script type="text/javascript">
  17.     var url;
  18.     /* 根据条件查询部门 */
  19.     function searchDept() {
  20.         $("#dg").datagrid('load', {
  21.             "name" : $("#s_name").val()
  22.         });
  23.     }
  24.     /* 删除部门，可以是多个 */
  25.     function deleteDept() {
  26.         var selectedRows = $("#dg").datagrid('getSelections');
  27.         if (selectedRows.length == 0) {
  28.             $.messager.alert("system prompt",
  29.                     "Please choose the data to delete!");
  30.             return;
  31.         }
  32.         var strIds = [];
  33.         for ( var i = 0; i < selectedRows.length; i++) {
  34.             strIds.push(selectedRows[i].id);
  35.         }
  36.         var ids = strIds.join(",");
  37.         $.messager
  38.                 .confirm(
  39.                         "system prompt",
  40.                         "Do you want to delete the <font color=red>"
  41.                                 + selectedRows.length + "</font> data?",
  42.                         function(r) {
  43.                             if (r) {
  44.                                 $
  45.                                         .post(
  46.                                                 "${pageContext.request.contextPath}/dept/delete",
  47.                                                 {
  48.                                                     ids : ids
  49.                                                 },
  50.                                                 function(result) {
  51.                                                     if (result.success) {
  52.                                                         $.messager
  53.                                                                 .alert(
  54.                                                                         "system prompt",
  55.                                                                         "Delete successful!");
  56.                                                         $("#dg").datagrid(
  57.                                                                 "reload");
  58.                                                     } else {
  59.                                                         $.messager
  60.                                                                 .alert(
  61.                                                                         "system prompt",
  62.                                                                         "Delete error! The department has employees!");
  63.                                                     }
  64.                                                 }, "json");
  65.                             }
  66.                         });
  67.     }
  69.     function openDeptAddDialog() {
  70.         $("#dlg").dialog("open").dialog("setTitle", "Add new department");
  71.         url = "${pageContext.request.contextPath}/dept/save";
  72.     }
  73.     /* 保存部门，根据不同的 url 选择是添加还是修改 */
  74.     function saveDept() {
  75.         $("#fm").form("submit", {
  76.             url : url,
  77.             onSubmit : function() {
  78.                 return $(this).form("validate");
  79.             },
  80.             success : function(result) {
  81.                 $.messager.alert("system prompt", "Save successful!");
  82.                 resetValue();
  83.                 $("#dlg").dialog("close");
  84.                 $("#dg").datagrid("reload");
  85.             }
  86.         });
  87.     }
  89.     function openDeptModifyDialog() {
  90.         var selectedRows = $("#dg").datagrid('getSelections');
  91.         if (selectedRows.length != 1) {
  92.             $.messager.alert("system prompt", "Please choose a data to edit!");
  93.             return;
  94.         }
  95.         var row = selectedRows[0];
  96.         $("#dlg").dialog("open").dialog("setTitle",
  97.                 "Edit department information");
  98.         $('#fm').form('load', row);
  99.         url = "${pageContext.request.contextPath}/dept/save?id=" + row.id;
  100.     }
  102.     function resetValue() {
  103.         $("#name").val("");
  104.         $("#description").val("");
  105.     }
  107.     function closeDeptDialog() {
  108.         $("#dlg").dialog("close");
  109.         resetValue();
  110.     }
  111. </script>
  112. </head>
  113. <body style="margin: 1px;">
  114.     <table id="dg" title="Department Manage" class="easyui-datagrid"
  115.         fitColumns="true" pagination="true" rownumbers="true"
  116.         url="${pageContext.request.contextPath}/dept/list" fit="true"
  117.         toolbar="#tb">
  118.         <thead>
  119.             <tr>
  120.                 <th field="cb" checkbox="true" align="center"></th>
  121.                 <th field="id" width="50" align="center" hidden="true">id</th>
  122.                 <th field="name" width="80" align="center">name</th>
  123.                 <th field="description" width="200" align="center">description</th>
  124.             </tr>
  125.         </thead>
  126.     </table>
  127.     <div id="tb">
  128.         <div>
  129.             <a href="javascript:openDeptAddDialog()" class="easyui-linkbutton"
  130.                 iconCls="icon-add" plain="true">Add</a> <a
  131.                 href="javascript:openDeptModifyDialog()" class="easyui-linkbutton"
  132.                 iconCls="icon-edit" plain="true">Modify</a> <a
  133.                 href="javascript:deleteDept()" class="easyui-linkbutton"
  134.                 iconCls="icon-remove" plain="true">Delete</a>
  135.         </div>
  136.         <div>
  137.             &nbsp;Name:&nbsp;<input type="text" id="s_name" size="20"
  138.                 onkeydown="if(event.keyCode==13) searchDept()" /> <a
  139.                 href="javascript:searchDept()" class="easyui-linkbutton"
  140.                 iconCls="icon-search" plain="true">Search</a>
  141.         </div>
  142.     </div>
  144.     <div id="dlg" class="easyui-dialog"
  145.         style="width: 450px; height: 250px; padding: 10px 20px" closed="true"
  146.         buttons="#dlg-buttons">
  147.         <form id="fm" method="post">
  148.             <table cellspacing="8px">
  149.                 <tr>
  150.                     <td>Name:</td>
  151.                     <td><input type="text" id="name" name="name"
  152.                         style="width: 180px" class="easyui-validatebox" required="true" />&nbsp;<font
  153.                         color="red">*</font></td>
  154.                 </tr>
  155.                 <tr>
  156.                     <td>Description:</td>
  157.                     <td><textarea id="description" name="description"
  158.                             style="width: 180px; height: 80px;" class="easyui-validatebox"
  159.                             required="true"></textarea>&nbsp;<font color="red">*</font></td>
  160.                 </tr>
  161.             </table>
  162.         </form>
  163.     </div>
  165.     <div id="dlg-buttons">
  166.         <a href="javascript:saveDept()" class="easyui-linkbutton"
  167.             iconCls="icon-ok">Save</a> <a href="javascript:closeDeptDialog()"
  168.             class="easyui-linkbutton" iconCls="icon-cancel">Close</a>
  169.     </div>
  170. </body>
  171. </html>

2.5.4 positionManage.jsp

在项目 hrms 的 src->main->webapp->views 下新建 JSP 页面 positionManage.jsp 作为职位管理页面，并添加如下代码：

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.     pageEncoding="UTF-8"%>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7. <title>Insert title here</title>
  8. <link rel="stylesheet" type="text/css"
  9.     href="${pageContext.request.contextPath}/jquery-easyui-1.3.3/themes/default/easyui.css">
  10. <link rel="stylesheet" type="text/css"
  11.     href="${pageContext.request.contextPath}/jquery-easyui-1.3.3/themes/icon.css">
  12. <script type="text/javascript"
  13.     src="${pageContext.request.contextPath}/jquery-easyui-1.3.3/jquery.min.js"></script>
  14. <script type="text/javascript"
  15.     src="${pageContext.request.contextPath}/jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
  16. <script type="text/javascript">
  17.     var url;
  18.     /* 根据条件查询职位 */
  19.     function searchPosition() {
  20.         $("#dg").datagrid('load', {
  21.             "name" : $("#s_name").val()
  22.         });
  23.     }
  24.     /* 删除职位，可以是多个 */
  25.     function deletePosition() {
  26.         var selectedRows = $("#dg").datagrid('getSelections');
  27.         if (selectedRows.length == 0) {
  28.             $.messager.alert("system prompt",
  29.                     "Please choose the data to delete!");
  30.             return;
  31.         }
  32.         var strIds = [];
  33.         for ( var i = 0; i < selectedRows.length; i++) {
  34.             strIds.push(selectedRows[i].id);
  35.         }
  36.         var ids = strIds.join(",");
  37.         $.messager
  38.                 .confirm(
  39.                         "system prompt",
  40.                         "Do you want to delete the <font color=red>"
  41.                                 + selectedRows.length + "</font> data?",
  42.                         function(r) {
  43.                             if (r) {
  44.                                 $
  45.                                         .post(
  46.                                                 "${pageContext.request.contextPath}/position/delete",
  47.                                                 {
  48.                                                     ids : ids
  49.                                                 },
  50.                                                 function(result) {
  51.                                                     if (result.success) {
  52.                                                         $.messager
  53.                                                                 .alert(
  54.                                                                         "system prompt",
  55.                                                                         "Delete successful!");
  56.                                                         $("#dg").datagrid(
  57.                                                                 "reload");
  58.                                                     } else {
  59.                                                         $.messager
  60.                                                                 .alert(
  61.                                                                         "system prompt",
  62.                                                                         "Delete error! The position has employees!");
  63.                                                     }
  64.                                                 }, "json");
  65.                             }
  66.                         });
  67.     }
  69.     function openPositionAddDialog() {
  70.         $("#dlg").dialog("open").dialog("setTitle", "Add new position");
  71.         url = "${pageContext.request.contextPath}/position/save";
  72.     }
  73.     /* 保存职位，根据不同的 url 选择是添加还是修改 */
  74.     function savePosition() {
  75.         $("#fm").form("submit", {
  76.             url : url,
  77.             onSubmit : function() {
  78.                 return $(this).form("validate");
  79.             },
  80.             success : function(result) {
  81.                 $.messager.alert("system prompt", "Save successful!");
  82.                 resetValue();
  83.                 $("#dlg").dialog("close");
  84.                 $("#dg").datagrid("reload");
  85.             }
  86.         });
  87.     }
  89.     function openPositionModifyDialog() {
  90.         var selectedRows = $("#dg").datagrid('getSelections');
  91.         if (selectedRows.length != 1) {
  92.             $.messager.alert("system prompt", "Please choose a data to edit!");
  93.             return;
  94.         }
  95.         var row = selectedRows[0];
  96.         $("#dlg").dialog("open")
  97.                 .dialog("setTitle", "Edit position information");
  98.         $('#fm').form('load', row);
  99.         url = "${pageContext.request.contextPath}/position/save?id=" + row.id;
  100.     }
  102.     function resetValue() {
  103.         $("#name").val("");
  104.         $("#description").val("");
  105.     }
  107.     function closePositionDialog() {
  108.         $("#dlg").dialog("close");
  109.         resetValue();
  110.     }
  111. </script>
  112. </head>
  113. <body style="margin: 1px;">
  114.     <table id="dg" title="Position Manage" class="easyui-datagrid"
  115.         fitColumns="true" pagination="true" rownumbers="true"
  116.         url="${pageContext.request.contextPath}/position/list" fit="true"
  117.         toolbar="#tb">
  118.         <thead>
  119.             <tr>
  120.                 <th field="cb" checkbox="true" align="center"></th>
  121.                 <th field="id" width="50" align="center" hidden="true">id</th>
  122.                 <th field="name" width="80" align="center">name</th>
  123.                 <th field="description" width="200" align="center">description</th>
  124.             </tr>
  125.         </thead>
  126.     </table>
  127.     <div id="tb">
  128.         <div>
  129.             <a href="javascript:openPositionAddDialog()"
  130.                 class="easyui-linkbutton" iconCls="icon-add" plain="true">Add</a> <a
  131.                 href="javascript:openPositionModifyDialog()"
  132.                 class="easyui-linkbutton" iconCls="icon-edit" plain="true">Modify</a>
  133.             <a href="javascript:deletePosition()" class="easyui-linkbutton"
  134.                 iconCls="icon-remove" plain="true">Delete</a>
  135.         </div>
  136.         <div>
  137.             &nbsp;Name:&nbsp;<input type="text" id="s_name" size="20"
  138.                 onkeydown="if(event.keyCode==13) searchPosition()" /> <a
  139.                 href="javascript:searchPosition()" class="easyui-linkbutton"
  140.                 iconCls="icon-search" plain="true">Search</a>
  141.         </div>
  142.     </div>
  144.     <div id="dlg" class="easyui-dialog"
  145.         style="width: 450px; height: 250px; padding: 10px 20px" closed="true"
  146.         buttons="#dlg-buttons">
  147.         <form id="fm" method="post">
  148.             <table cellspacing="8px">
  149.                 <tr>
  150.                     <td>Name:</td>
  151.                     <td><input type="text" id="name" name="name"
  152.                         style="width: 180px" class="easyui-validatebox" required="true" />&nbsp;<font
  153.                         color="red">*</font></td>
  154.                 </tr>
  155.                 <tr>
  156.                     <td>Description:</td>
  157.                     <td><textarea id="description" name="description"
  158.                             style="width: 180px; height: 80px;" class="easyui-validatebox"
  159.                             required="true"></textarea>&nbsp;<font color="red">*</font></td>
  160.                 </tr>
  161.             </table>
  162.         </form>
  163.     </div>
  165.     <div id="dlg-buttons">
  166.         <a href="javascript:savePosition()" class="easyui-linkbutton"
  167.             iconCls="icon-ok">Save</a> <a href="javascript:closePositionDialog()"
  168.             class="easyui-linkbutton" iconCls="icon-cancel">Close</a>
  169.     </div>
  170. </body>
  171. </html>

2.5.5 employeeManage.jsp

在项目 hrms 的 src->main->webapp->views 下新建 JSP 页面 employeeManage.jsp 作为员工管理页面，并添加如下代码：

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.     pageEncoding="UTF-8"%>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7. <title>Insert title here</title>
  8. <link rel="stylesheet" type="text/css"
  9.     href="${pageContext.request.contextPath}/jquery-easyui-1.3.3/themes/default/easyui.css">
  10. <link rel="stylesheet" type="text/css"
  11.     href="${pageContext.request.contextPath}/jquery-easyui-1.3.3/themes/icon.css">
  12. <script type="text/javascript"
  13.     src="${pageContext.request.contextPath}/jquery-easyui-1.3.3/jquery.min.js"></script>
  14. <script type="text/javascript"
  15.     src="${pageContext.request.contextPath}/jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
  16. <script type="text/javascript"
  17.     src="${pageContext.request.contextPath}/jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
  18. <script type="text/javascript">
  19.     var url;
  20.     var firstDepartmentId;
  21.     var firstDepartmentName;
  22.     var firstPositionId;
  23.     var firstPositionName;
  24.     var submitDeptId;
  25.     var submitPosId;
  26.     var updateFlag;
  27.     /* 根据条件查询员工 */
  28.     function searchEmpl() {
  29.         $("#dg").datagrid('load', {
  30.             "id" : $("#e_id").val(),
  31.             "name" : $("#e_name").val(),
  32.             "department.name" : $("#e_dept").val(),
  33.             "position.name" : $("#e_position").val(),
  34.             "sex" : $("#e_sex").val()
  35.         });
  36.     }
  37.     /* 删除员工，可以是多个 */
  38.     function deleteEmpl() {
  39.         var selectedRows = $("#dg").datagrid('getSelections');
  40.         if (selectedRows.length == 0) {
  41.             $.messager.alert("system prompt",
  42.                     "Please choose the data to delete!");
  43.             return;
  44.         }
  45.         var strIds = [];
  46.         for ( var i = 0; i < selectedRows.length; i++) {
  47.             strIds.push(selectedRows[i].id);
  48.         }
  49.         var ids = strIds.join(",");
  50.         $.messager
  51.                 .confirm(
  52.                         "system prompt",
  53.                         "Do you want to delete the <font color=red>"
  54.                                 + selectedRows.length + "</font> data?",
  55.                         function(r) {
  56.                             if (r) {
  57.                                 $
  58.                                         .post(
  59.                                                 "${pageContext.request.contextPath}/empl/delete",
  60.                                                 {
  61.                                                     ids : ids
  62.                                                 },
  63.                                                 function(result) {
  64.                                                     if (result.success) {
  65.                                                         $.messager
  66.                                                                 .alert(
  67.                                                                         "system prompt",
  68.                                                                         "Delete successful!");
  69.                                                         $("#dg").datagrid(
  70.                                                                 "reload");
  71.                                                     } else {
  72.                                                         $.messager
  73.                                                                 .alert(
  74.                                                                         "system prompt",
  75.                                                                         "Delete error!");
  76.                                                     }
  77.                                                 }, "json");
  78.                             }
  79.                         });
  80.     }
  82.     function openEmplAddDialog() {
  83.         $("#dlg").dialog("open").dialog("setTitle", "Add new employee");
  84.         $("#id").attr("readOnly", false);
  85.         url = "${pageContext.request.contextPath}/empl/save";
  86.         updateFlag = "no";
  87.     }
  88.     /* 保存员工，根据不同的 url 选择是添加还是修改 */
  89.     function saveEmpl() {
  90.         submitDeptId = $("#dept").combobox('getValue');
  91.         submitPosId = $("#pos").combobox('getValue');
  92.         $("#fm")
  93.                 .form(
  94.                         "submit",
  95.                         {
  96.                             url : url + "?dept_id= " + submitDeptId
  97.                                     + "&pos_id= " + submitPosId
  98.                                     + "&updateFlag=" + updateFlag,
  99.                             onSubmit : function() {
  100.                                 var msg = "";
  101.                                 // 进行输入信息的校验，非空，id 和 phone 的格式
  102.                                 if (!$(this).form("validate")) {
  103.                                     msg = "all information can't be empty!";
  104.                                 } else if (!/^[0-9]+$/.test($("#id").val())) {
  105.                                     msg = "Please input number type for id!";
  106.                                 } else if (!/^1[3|5|7|8]\d{9}$/
  107.                                         .test($("#phone").val())) {
  108.                                     msg = "Please input right phone!";
  109.                                 }
  110.                                 if (msg != "") {
  111.                                     $.messager.alert("system prompt", msg);
  112.                                     return false;
  113.                                 } else {
  114.                                     return true;
  115.                                 }
  116.                             },
  117.                             success : function(data) {
  118.                                 var result = eval('(' + data + ')');
  119.                                 if (result.success) {
  120.                                     $.messager.alert("system prompt",
  121.                                             "Save successful!");
  122.                                     resetValue();
  123.                                     $("#dlg").dialog("close");
  124.                                     $("#dg").datagrid("reload");
  125.                                 } else {
  126.                                     $.messager
  127.                                             .alert("system prompt",
  128.                                                     "The id already exists,please input a new id!");
  129.                                 }
  130.                             }
  131.                         });
  132.     }
  134.     function openEmplModifyDialog() {
  135.         var selectedRows = $("#dg").datagrid('getSelections');
  136.         if (selectedRows.length != 1) {
  137.             $.messager.alert("system prompt", "Please choose a data to edit!");
  138.             return;
  139.         }
  140.         var row = selectedRows[0];
  141.         $("#dlg").dialog("open")
  142.                 .dialog("setTitle", "Edit employee information");
  143.         $("#id").attr("readOnly", true);
  144.         $('#fm').form('load', row);
  145.         $('#birthday').datebox('setValue', row.birthday);
  146.         $('#dept').combobox('setValue', row.department.id);
  147.         $('#dept').combobox('setText', row.department.name);
  148.         $('#pos').combobox('setValue', row.position.id);
  149.         $('#pos').combobox('setText', row.position.name);
  150.         url = "${pageContext.request.contextPath}/empl/save";
  151.         updateFlag = "yes";
  152.     }
  154.     function resetValue() {
  155.         $("#id").val("");
  156.         $("#id").attr("readOnly", false);
  157.         $("#name").val("");
  158.         $('#sex').combobox('setValue', "male");
  159.         $("#phone").val("");
  160.         $("#email").val("");
  161.         $("#address").val("");
  162.         $('#education').combobox('setValue', "Bachelor");
  163.         $('#birthday').datebox('setValue', formatterDate(new Date()));
  164.         $('#dept').combobox('setValue', firstDepartmentId);
  165.         $('#dept').combobox('setText', firstDepartmentName);
  166.         $('#pos').combobox('setValue', firstPositionId);
  167.         $('#pos').combobox('setText', firstPositionName);
  168.     }
  170.     function closeEmplDialog() {
  171.         $("#dlg").dialog("close");
  172.         resetValue();
  173.     }
  174.     /* 为部门的 combobox 设默认值 */
  175.     $(document).ready(function() {
  176.         $.ajax({
  177.             url : '${pageContext.request.contextPath}/dept/getcombobox',
  178.             type : 'post',
  179.             success : function(data) {
  180.                 if (data) {
  181.                     $('#dept').combobox('setValue', data[0].id);
  182.                     $('#dept').combobox('setText', data[0].name);
  183.                     firstDepartmentId = data[0].id;
  184.                     firstDepartmentName = data[0].name;
  185.                 }
  186.             }
  187.         });
  188.     });
  189.     /* 为职位的 combobox 设默认值 */
  190.     $(document).ready(function() {
  191.         $.ajax({
  192.             url : '${pageContext.request.contextPath}/position/getcombobox',
  193.             type : 'post',
  194.             success : function(data) {
  195.                 if (data) {
  196.                     $('#pos').combobox('setValue', data[0].id);
  197.                     $('#pos').combobox('setText', data[0].name);
  198.                     firstPositionId = data[0].id;
  199.                     firstPositionName = data[0].name;
  200.                 }
  201.             }
  202.         });
  203.     });
  205.     /* 设置 datebox 默认值为指定格式的当前日期 */
  206.     formatterDate = function(date) {
  207.         var day = date.getDate() > 9 ? date.getDate() : "0" + date.getDate();
  208.         var month = (date.getMonth() + 1) > 9 ? (date.getMonth() + 1) : "0"
  209.                 + (date.getMonth() + 1);
  210.         return date.getFullYear() + '-' + month + '-' + day;
  211.     };
  213.     window.onload = function() {
  214.         $('#birthday').datebox('setValue', formatterDate(new Date()));
  215.     };
  216. </script>
  217. </head>
  218. <body style="margin: 1px;">
  219.     <table id="dg" title="Employee Manage" class="easyui-datagrid"
  220.         fitColumns="true" pagination="true" rownumbers="true"
  221.         url="${pageContext.request.contextPath}/empl/list" fit="true"
  222.         toolbar="#tb">
  223.         <thead>
  224.             <tr>
  225.                 <th field="cb" checkbox="true" align="center"></th>
  226.                 <th field="id" width="50" align="center">id</th>
  227.                 <th field="name" width="80" align="center">name</th>
  228.                 <th field="sex" width="50" align="center">sex</th>
  229.                 <th field="phone" width="80" align="center">phone</th>
  230.                 <th field="email" width="100" align="center">email</th>
  231.                 <th field="address" width="80" align="center">address</th>
  232.                 <th field="education" width="60" align="center">education</th>
  233.                 <th field="birthday" width="80" align="center">birthday</th>
  234.                 <th field="department.id" width="50" align="center" hidden="true">dept_id</th>
  235.                 <th field="department.name" width="80" align="center">department</th>
  236.                 <th field="position.id" width="50" align="center" hidden="true">pos_id</th>
  237.                 <th field="position.name" width="80" align="center">position</th>
  238.             </tr>
  239.         </thead>
  240.     </table>
  241.     <div id="tb">
  242.         <div>
  243.             <a href="javascript:openEmplAddDialog()" class="easyui-linkbutton"
  244.                 iconCls="icon-add" plain="true">Add</a> <a
  245.                 href="javascript:openEmplModifyDialog()" class="easyui-linkbutton"
  246.                 iconCls="icon-edit" plain="true">Modify</a> <a
  247.                 href="javascript:deleteEmpl()" class="easyui-linkbutton"
  248.                 iconCls="icon-remove" plain="true">Delete</a>
  249.         </div>
  250.         <div>
  251.             <table>
  252.                 <tr>
  253.                     <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ID:&nbsp;
  254.                         <input type="text" id="e_id" size="20"
  255.                         onkeydown="if(event.keyCode==13) searchEmpl()" />
  256.                     </td>
  257.                     <td>&nbsp;Name:&nbsp; <input type="text" id="e_name" size="20"
  258.                         onkeydown="if(event.keyCode==13) searchEmpl()" />
  259.                     </td>
  260.                     <td>&nbsp;Department:&nbsp; <input type="text" id="e_dept"
  261.                         size="20" onkeydown="if(event.keyCode==13) searchEmpl()" />
  262.                     </td>
  263.                 </tr>
  264.                 <tr>
  265.                     <td>&nbsp;Position:&nbsp;<input type="text" id="e_position"
  266.                         size="20" onkeydown="if(event.keyCode==13) searchEmpl()" />
  267.                     </td>
  268.                     <td>&nbsp;&nbsp;&nbsp;&nbsp;Sex:&nbsp; <input type="text"
  269.                         id="e_sex" size="20"
  270.                         onkeydown="if(event.keyCode==13) searchEmpl()" />
  271.                     </td>
  272.                     <td>&nbsp;&nbsp;&nbsp;<a href="javascript:searchEmpl()"
  273.                         class="easyui-linkbutton" iconCls="icon-search" plain="true">Search</a>
  274.                     </td>
  275.                 </tr>
  276.             </table>
  277.         </div>
  278.     </div>
  280.     <div id="dlg" class="easyui-dialog"
  281.         style="width: 500px; height: 550px; padding: 10px 20px" closed="true"
  282.         buttons="#dlg-buttons">
  283.         <form id="fm" method="post">
  284.             <table cellspacing="8px">
  285.                 <tr>
  286.                     <td>ID:</td>
  287.                     <td><input type="text" id="id" name="id" style="width: 210px"
  288.                         class="easyui-validatebox"
  289.                         data-options="required:true,validType:'digits'" />&nbsp;<font
  290.                         color="red">*</font></td>
  291.                 </tr>
  292.                 <tr>
  293.                     <td>Name:</td>
  294.                     <td><input type="text" id="name" name="name"
  295.                         style="width: 210px" class="easyui-validatebox" required="true" />&nbsp;<font
  296.                         color="red">*</font></td>
  297.                 </tr>
  298.                 <tr>
  299.                     <td>Sex:</td>
  300.                     <td><select id="sex" class="easyui-combobox" name="sex"
  301.                         style="width: 220px; heigth: 60px"
  302.                         data-options="editable:false,panelHeight:'auto'">
  303.                             <option>male</option>
  304.                             <option>female</option>
  305.                     </select></td>
  306.                 </tr>
  307.                 <tr>
  308.                     <td>Phone:</td>
  309.                     <td><input type="text" id="phone" name="phone"
  310.                         style="width: 210px" class="easyui-validatebox" required="true" />&nbsp;<font
  311.                         color="red">*</font></td>
  312.                 </tr>
  313.                 <tr>
  314.                     <td>Email:</td>
  315.                     <td><input type="text" id="email" name="email"
  316.                         style="width: 210px" class="easyui-validatebox"
  317.                         data-options="required:true,validType:'email'" />&nbsp;<font
  318.                         color="red">*</font></td>
  319.                 </tr>
  320.                 <tr>
  321.                     <td>Address:</td>
  322.                     <td><textarea id="address" name="address"
  323.                             style="width: 210px; height: 50px" class="easyui-validatebox"
  324.                             required="true"></textarea>&nbsp;<font color="red">*</font></td>
  325.                 </tr>
  326.                 <tr>
  327.                     <td>Education:</td>
  328.                     <td><select id="education" class="easyui-combobox"
  329.                         name="education" style="width: 220px; heigth: 60px"
  330.                         data-options="editable:false,panelHeight:'auto'">
  331.                             <option>Bachelor</option>
  332.                             <option>Master</option>
  333.                             <option>Doctor</option>
  334.                     </select></td>
  335.                 </tr>
  336.                 <tr>
  337.                     <td>Birthday:</td>
  338.                     <td><input id="birthday" name="birthday" type="text"
  339.                         class="easyui-datebox" data-options="editable:false"
  340.                         required="required" style="width: 220px"></td>
  341.                 </tr>
  342.                 <tr>
  343.                     <td>Department:</td>
  344.                     <td><select class="easyui-combobox" id="dept" name="dept"
  345.                         data-options="url:'${pageContext.request.contextPath}/dept/getcombobox',
  346.                                            method:'post',
  347.                                            valueField:'id',
  348.                                            textField:'name',
  349.                                            editable:false,
  350.                                            panelHeight:'auto'"
  351.                         style="width: 220px"></select></td>
  352.                 </tr>
  353.                 <tr>
  354.                     <td>Position:</td>
  355.                     <td><select class="easyui-combobox" id="pos" name="pos"
  356.                         data-options="url:'${pageContext.request.contextPath}/position/getcombobox',
  357.                                            method:'post',
  358.                                            valueField:'id',
  359.                                            textField:'name',
  360.                                            editable:false,
  361.                                            panelHeight:'auto'"
  362.                         style="width: 220px"></select></td>
  363.                 </tr>
  365.             </table>
  366.         </form>
  367.     </div>
  369.     <div id="dlg-buttons">
  370.         <a href="javascript:saveEmpl()" class="easyui-linkbutton"
  371.             iconCls="icon-ok">Save</a> <a href="javascript:closeEmplDialog()"
  372.             class="easyui-linkbutton" iconCls="icon-cancel">Close</a>
  373.     </div>
  374. </body>
  375. </html>

三、实验总结

到这里我们就完成了表现层 JSP 代码的实现，下一节我们将完成拦截器和 Spring MVC 框架的整合。

表现层 JSP 页面实现的更多相关文章

  1. 表现层(jsp)、持久层(类似dao)、业务层（逻辑层、service层）、模型（javabean）、控制层（action）

    转自:http://www.blogjava.net/jiabao/archive/2007/04/08/109189.html 为了实现web层(struts)和持久层(Hibernate)之间的松 ...

  2. java 表现层：jsp、freemarker、velocity

    在java领域,表现层技术主要有三种:jsp.freemarker.velocity. jsp是大家最熟悉的技术 优点: 1.功能强大,可以写java代码 2.支持jsp标签(jsp tag) 3.支 ...

  3. CGI servlet Applet Scriptlet Scriptlet JSP data layer(数据层),business layer(业务层), presentation layer(表现层)

    https://en.wikipedia.org/wiki/Common_Gateway_Interface In computing, Common Gateway Interface (CGI) ...

  4. SpringMVC的controller层接收来自jsp页面通过<a href="/user/userUpdateInfo/>的中文乱码问题

    这种情况是,jsp页面的中文正常显示,数据的中文也是正常显示,但是在Controller层接收到的中文是乱码,如下图所示: 解决方法:在Controller层对前台传递的中文乱码进行处理,将它转换成u ...

  5. 系统管理模块_部门管理_改进_抽取添加与修改JSP页面中的公共代码_在显示层抽取BaseAction_合并Service层与Dao层

    系统管理模块_部门管理_改进1:抽取添加与修改JSP页面中的公共代码 commons.jspf <%@ page language="java" import="j ...

  6. 表现层（jsp）、持久层（dao）、业务层（逻辑层、service）

    转自:http://www.blogjava.net/jiabao/archive/2007/04/08/109189.html 为了实现web层(struts)和持久层(Hibernate)之间的松 ...

  7. Spring MVC控制层传递对象后在JSP页面中的取值方法

    List<Order> orders = new ArrayList<Order>(); for (int i = 0; i < 3; i++) { Order t = ...

  8. 关于ajax的controller层返回jsp页面多个list

    @RequestMapping(value ="findFansChangeRate") @ResponseBody public AjaxJson findFansChangeR ...

  9. 将图片至于jsp页面上(层)

    <div style="position: relative"> <span style="position: relative; top: 1px; ...

随机推荐

  1. Python之code对象与pyc文件（三）

    上一节:Python之code对象与pyc文件(二) 向pyc写入字符串 在了解Python如何将字符串写入到pyc文件的机制之前,我们先来了解一下结构体WFILE: marshal.c typede ...

  2. Makefile基础（一）

    在大型的C语言项目中,一般都是由多个源文件编译链接形成的可执行程序,而这些源文件的处理步骤,通常交给Makefile来管理,Makefile定义了一系列的规则来指定,哪些文件需要先编译,哪些文件需要后 ...

  3. Selenium WebDriver-操作键盘事件

    # 注意: !!!操作操作系统的按键,需要先装pywin32,然后通过交互模式import win32api和import win32con判断是否安装成功,需要重启下cmd进入交互模式# 下载链接: ...

  4. SDOJ 3696 Tree

    描述 给你一个无向带权连通图,每条边是黑色或白色.让你求一棵最小权的恰好有need条白色边的生成树. 题目保证有解. 输入 第一行V,E,need分别表示点数,边数和需要的白色边数. 接下来E行 每行 ...

  5. python随机数的产生

    导入 random模块  >>> import random 1.  random.random random.random()用于生成一个0到1的随机浮点数: 0 <= n ...

  6. NumPy数值计算（1）

    NumPy数值计算(1) 将列表转为NumPy中的array from __future__ import print_function from numpy import * import oper ...

  7. PHP变量的生命周期

    变量不仅有其特定的作用范围,还有其存活的周期--生命周期.变量的生命周期指的是变量可被使用的一个时间段,在这个时间段内变量是有效的,一旦超出这个时间段变量就会失效,我们就不能够再访问到该变量的值了. ...

  8. 集合篇 —— Collection(1)：JDK 中的重复实现问题

    1.      问题的提出 在 Java 的集合体系当中,无论是 List(列表)还是 Set(集),在设计的时候都存在一个很奇怪的现象:这两种集合的接口,Java 都为其设计了抽象类 Abstrac ...

  9. 二进制<4>

    位运算简介及实用技巧(四):实战篇 下面分享的是我自己写的三个代码,里面有些题目也是我自己出的.这些代码都是在我的Pascal时代写的,恕不提供C语言了.代码写得并不好,我只是想告诉大家位运算在实战中 ...

  10. java面试题之你了解守护线程吗？它和非守护线程有什么区别

    程序运行完毕,jvm会等待非守护线程完成后关闭,但是jvm不会等待守护线程. 守护线程最典型的的例子是:GC线程