| <%@ page contentType=”text/html;charset=UTF-8“ language=”java“ %>
<%@ taglib prefix=”c“ uri=”http://java.sun.com/jsp/jstl/core“ %>
<html>
<head>
<title>员工信息查询</title>
<%
pageContext.setAttribute(“path”,request.getContextPath());
%>
</head>
<body>
${path}**_<%— /SSM —%>
<%—新增页—%>
<div class=”modal fade” id=”addEmpMyModal” tabindex=”-1” role=”dialog” aria-labelledby=”myModalLabel”>
<div class=”modal-dialog” role=”document”>
<div class=”modal-content”>
<div class=”modal-header”>
<button type=”button” class=”close” data-dismiss=”modal” aria-label=”Close”><span aria-hidden=”true”>×</span></button>
<h4 class=”modal-title” id=”myModalLabel”>新增</h4>
</div>
<%—姓名输入框—%>
<div class=”modal-body”>
<form class=”form-horizontal”>
<div class=”form-group”>
<label for=”inputEmpName” class=”col-sm-2 control-label”>姓名</label>
<div class=”col-sm-10”>
<input type=”text” name=”empName” class=”form-control” id=”inputEmpName” placeholder=”请输入2-5中文或6-16位英文大小写和数字组合”>
<span class=”help-block”></span>
</div>
</div>
<%—email输入框—%>
<div class=”form-group”>
<label for=”inputEmail” class=”col-sm-2 control-label”>Email</label>
<div class=”col-sm-10”>
<input type=”email” name=”email” class=”form-control” id=”inputEmail” placeholder=”Email”>
<span class=”help-block”></span>
</div>
</div>
<%—性别单选—%>
<div class=”form-group”>
<label class=”col-sm-2 control-label”>性别</label>
<label for=”Emp_gender1” class=”radio-inline”>
<input type=”radio” name=”gender” id=”Emp_gender1” value=”男” checked=”checked”>男
</label>
<label for=”Emp_gender0” class=”radio-inline”>
<input type=”radio” name=”gender” id=”Emp_gender0” value=”男”>女
</label>
</div>
<%—部门名，下拉列表—%>
<div class=”form-group”>
<label for=”select_Deparements” class=”col-sm-2 control-label”>部门</label>
<div class=”col-sm-10”>
<%—name=”dId” 获取提交的部门—%>
_<select name=”dId” class=”form-control” id=”select_Deparements”>
</**select**><br /> </**div**><br /> </**div**></**form**><br /> </**div**><br /> <**div class="modal-footer"**><br /> <**button id="save_employee_button" type="button" class="btn btn-primary"**>保存</**button**><br /> <**button type="button" class="btn btn-default" data-dismiss="modal"**>取消</**button**><br /> </**div**><br /> </**div**><br /> </**div**><br /></**div**>
<%—搭建页面—%>
<div class=”container”>
<%—标题—%>
<div class=”row”>
<div class=”.col-lg-12”>
<h1>SSM-CRUD</h1>
</div>
</div>
<%—按钮—%>
<div class=”row”>
<div class=”col-md-4 col-md-offset-8”><%—列偏移—%>
<button type=”button” id=”addEmployeeBtn” class=”btn btn-success”>新增</button>
<button type=”button” id=”deleteEmployee” class=”btn btn-danger”>删除</button>
</div>
</div>
<%—显示表格数据—%>
<div class=”row “>
<div class=”col-md-12”>
<table class=”table table-hover” id=”employees_table”>
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>性别</th>
<th>邮箱</th>
<th>部门</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</**tbody**><br /> </**table**><br /> </**div**><br /> </**div**>_<%--分选，点选条--%><br /> _<**div id="navigation_pages" class="row" **></**div**>_<%--分页，信息条--%><br /> _<**div id="page_info" class="col-md-6"**></**div**>
</div>
_<%--引入jQuery--%><br /> _<**script type="text/javascript" src="${**path**}/static/script/jquery-3.6.0.js"**></**script**><br /> _<%--引入样式--%><br /> _<**link href="${**path**}/static/bootstrap-3.4.1-dist/css/bootstrap.min.css" rel="stylesheet"**><br /> <**script src="${**path**}/static/bootstrap-3.4.1-dist/js/bootstrap.min.js"**></**script**>
<script type=”text/javascript”>
//全局变量，用于 “保存” 后，来到最后一页。
var lastPages;
_//1、页面加载完成后，直接发送Ajax请求，获取分页数据。<br /> _**$**(**function**(){<br /> _//去首页<br /> to_page_(1);<br /> });
_//Ajax请求、与函数回调<br /> _**function **_to_page_(pageNumber) {<br /> **$**.**ajax**({<br /> **url**:**"${**path**}/list"**,_//请求地址<br /> _**data**:**"pageNumber="**+pageNumber,_//携带参数<br /> _**type**:**"GET"**,_//请求方式<br /> _success:**function **(result){_//回调函数<br /> //console.log(result);//输出结果到浏览器 响应 Response<br /> //1、调用函数,信息显示<br /> build_employee_table_(result);<br /> _//2、显示分页信息<br /> build_page_info_(result);<br /> _//3、显示分页条<br /> build_page_nav_(result);<br /> }<br /> });<br /> }<br /> _/*员工信息表格*/<br /> _**function **_build_employee_table_(result){<br /> _//清空table,员工信息，跳转页面后刷新数据，而不是复制。<br /> _**$**(**"#employees_table tbody"**).empty();<br /> **var **employees = result._extend_.pageInfo.**list**;<br /> _/**<br /> * employees:要遍历的数据<br /> * index：索引<br /> * item：遍历的，变量名<br /> * */<br /> _**$**.each(employees,**function **(index,item){<br /> _//alert(item.empName);<br /> _**var **empIdTd = **$**(**"<td></td>"**).append(item.empId);_/*创建 <td></td> 标签 并添加遍历的内容*/<br /> _**var **empNameTd = **$**(**"<td></td>"**).append(item.**empName**);<br /> **var **denderTd = **$**(**"<td></td>"**).append(item.**gender**);<br /> **var **emailTd = **$**(**"<td></td>"**).append(item.**email**);<br /> **var **deptNameTd = **$**(**"<td></td>"**).append(item.department.deptName);
_//编辑按钮<br /> _**var **editBtn = **$**(**"<button></button>"**).addClass(**"btn btn-primary"**).<br /> append(**$**(**"<span></span>"**).addClass(**"glyphicon glyphicon-pencil btn-xs"**)).<br /> append(**"编辑"**);<br /> _//删除按钮<br /> _**var **deleteBtn = **$**(**"<button></button>"**).addClass(**"btn btn-danger"**).<br /> append(**$**(**"<span></span>"**).addClass(**"glyphicon glyphicon-trash btn-xs"**)).<br /> append(**"删除"**);<br /> _//把编辑、删除两个按钮添加到 同一个单元格里<br /> _**var **button = **$**(**"<td></td>"**).append(editBtn).append(**" "**).append(deleteBtn);<br /> _/*创建<tr></tr>标签 把遍历到的员工信息，追加到内容追加到里面*/<br /> _**$**(**"<tr></tr>"**).append(empIdTd).<br /> append(empNameTd).<br /> append(denderTd).<br /> append(emailTd).<br /> append(deptNameTd).<br /> append(button).<br /> **appendTo**(**"#employees_table tbody"**);_//使用选择器，把<tr>插入到 id="#employees_table" 下的 tbody标签中<br /> _});<br /> }
_//分页信息<br /> _**function **_build_page_info_(result){<br /> _//点击跳转页面后，清空分页条信息，重新刷新。<br /> _**$**(**"#page_info"**).empty();<br /> **$**(**"#page_info"**).append(**"当前第" **+ result._extend_.pageInfo.pageNum +<br /> **"页，共" **+ result._extend_.pageInfo.pages +<br /> **"页，共" **+ result._extend_.pageInfo.**total **+ **"条记录"**);<br /> _/**<br /> * result.extend.pageInfo.pages + 1：总页码 +1，大于总页码，来到最后一页<br /> * 赋值给上面的，全局变量，用于 “保存” 后，来到最后一页。<br /> * */<br /> _**_lastPages _**= result._extend_.pageInfo.pages+1;<br /> }
_//解析，分页条<br /> _**function **_build_page_nav_(result){<br /> _//点击跳转页面后，清空分页条，重新刷新。<br /> _**$**(**"#navigation_pages"**).empty();
_//<ul></ul> 标签<br /> _**var **divUl = **$**(**"<ul></ul>"**).addClass(**"pagination"**);
_//首页<br /> _**var **firstPage = **$**(**"<li></li>"**).append(**$**(**"<a></a>"**).append(**"首页"**));
_//上一页,<br /> _**var **prePage = **$**(**"<li></li>"**).append(**$**(**"<a></a>"**).attr(**"href"**,**"#"**).attr(**"aria-label"**,**"Previous"**).<br /> append(**$**(**"<span></span>"**).attr(**"aria-hidden"**,**"true"**).append(**"«"**)));
_//判断没有"上一页"时，"首页"、上一页"禁用，有则不禁用。<br /> _**if **(result._extend_.pageInfo.hasPreviousPage == **false**){<br /> firstPage.addClass(**"disabled"**);<br /> prePage.addClass(**"disabled"**);_//disabled 是 BootStrap 的选中禁用状态<br /> _}**else **{<br /> _//为 "首页" 添加单击事件，使它可以点击跳转<br /> _firstPage.click(**function **() {<br /> _to_page_(1);<br /> });
_//为 "上一页" 添加单击事件，使他们可以点击跳转<br /> _prePage.click(**function **() {<br /> _to_page_(result._extend_.pageInfo.pageNum-1);<br /> });<br /> }
_//添加到 <ul></ul>中<br /> _divUl.append(firstPage).append(prePage);
_//遍历显示分页条，页面的连续页码1、2、3、、5、...<br /> _**$**.each(result._extend_.pageInfo.navigatepageNums,**function **(index,item){<br /> _//显示页面的连续页码1、2、3、、5、...<br /> _**var **navpage = **$**(**"<li></li>"**).append(**$**(**"<a></a>"**).attr(**"href"**,**"#"**).append(item));<br /> _//判断是当前页，就添加高亮<br /> _**if **(result._extend_.pageInfo.pageNum == item) {<br /> navpage.addClass(**"active"**);_//active 是 BootStrap 的选中高亮状态<br /> _}<br /> _//为显示页面的连续页码1、2、3、、5、...添加单击事件<br /> _navpage.click(**function **() {<br /> _//调用ajax请求，ajax请求会调用员工信息、分页信息、分页条<br /> //其中，员工信息、分页条，会添加.empty();清空数据后，再遍历，达到刷新信息的目的。<br /> to_page_(item);<br /> });<br /> divUl.append(navpage);_//添加到 <ul></ul>中<br /> _});<br /> _//下一页<br /> _**var **nextPage = **$**(**"<li></li>"**).append(**$**(**"<a></a>"**).attr(**"href"**,**"#"**).append(**"»"**));<br /> _//末页<br /> _**var **lastPage = **$**(**"<li></li>"**).append(**$**(**"<a></a>"**).append(**"末页"**));<br /> _//添加到 <ul></ul>中<br /> _divUl.append(nextPage).append(lastPage);<br /> _//判断没有"下一页"时，"末页"、下一页"禁用，有则不禁用。<br /> _**if **(result._extend_.pageInfo.hasNextPage == **false**){<br /> nextPage.addClass(**"disabled"**);<br /> lastPage.addClass(**"disabled"**);_//disabled 是 BootStrap 的选中禁用状态<br /> _} **else **{<br /> _//为 "下一页" 添加单击事件，使他们可以点击跳转<br /> _nextPage.click(**function **() {<br /> _to_page_(result._extend_.pageInfo.pageNum+1);<br /> });<br /> _//为 "末页" 添加单击事件，使它可以点击跳转<br /> _lastPage.click(**function **() {<br /> _to_page_(result._extend_.pageInfo.pages);<br /> });<br /> }
_//最后添加到，分页条的 div 中。<br /> _**$**(**"<nav></nav>"**).attr(**"aria-label"**,**"Page navigation"**).append(divUl).**appendTo**(**$**(**"#navigation_pages"**));
}
_//"新增按钮"，绑定 “新增”窗口的点击事件<br /> _**$**(**"#addEmployeeBtn"**).click(**function **() {<br /> _//发送Ajax请求，查出部门信息。显示在下拉列表中<br /> getDepartement_();<br /> _//弹出"新增 "窗口,backdrop:"static" 背景<br /> _**$**(**"#addEmpMyModal"**).**modal**({<br /> **backdrop**:**"static"<br /> **});<br /> });
**function **_getDepartement_(){<br /> **$**.**ajax**({<br /> **url**:**"${**path**}/departement"**,<br /> **type**:**"GET"**,<br /> success:**function **(result){<br /> _//console.log(result)<br /> /**<br /> * this 代表，正在遍历的对象，例如 list":[{"deptId":1,"deptName":"工程部"},{"deptId":2,"deptName":"生产部"},<br /> * {"deptId":3,"deptName":"外交部"},{"deptId":4,"deptName":"财务部"}]<br /> *<br /> * attr("value",this.deptId) :为 <open> 添加value 属性，值为 this.deptId<br /> * append(this.deptName) ：为 <open> 中插入文本，this.deptName 当前对象的部门名<br /> * appendTo($("#inputDeparements")：把<open></open> 插入到 id=“inputDeparements” 标签中<br /> */<br /> _**$**.each(result._extend_.pageInfo.**list**,**function **(){<br /> **$**(**"<option></option>"**).attr(**"value"**,**this**.deptId).append(**this**.deptName).**appendTo**(**$**(**"#select_Deparements"**));<br /> });
}<br /> });<br /> }
_//=========================保存功能的单击事件=====================================<br /> _**$**(**"#save_employee_button"**).click(**function **() {<br /> _//校验：validate_add_form() 不为true<br /> _**if **(!(**_testEmpName_**)|!(**_testEmpEmail_**)) {<br /> **return false**;<br /> }<br /> _//1、模态框中填写的表单数据集提交给服务器保存<br /> //alert($("#addEmpMyModal form").serialize());<br /> //2、发送 Ajax请求保存数据<br /> _**$**.**ajax**({<br /> **url**:**"${**path**}/save"**,<br /> **type**:**"POST"**,<br /> _//$("#addEmpMyModal form").serialize():获取模态框下 form 表单的数据，并序列化为字符串，以key=value形式<br /> _**data**:**$**(**"#addEmpMyModal form"**).serialize(),_//data:携带参数<br /> _success:**function **(result) {<br /> _alert_(result.msg);<br /> _//员工保存成功后<br /> //1、关闭模态框,BootStarp 模态框中的方法<br /> _**$**(**"#addEmpMyModal"**).**modal**(**"hide"**);<br /> _//2、来到最后一页，显示刚才保存的数据<br /> /**<br /> * 发送 Ajax 请求显示最后一页<br /> * 调用to_page(pageNumber)方法。传一个大于总页码的数，<br /> * 利用 分页条插件的 设置，当大于总页码时候，来到最后一页。<br /> */<br /> to_page_(**_lastPages_**);<br /> }<br /> });
});
**var _testEmpName _**= **$**(**"#inputEmpName"**).blur(**function **(){<br /> _//获取，新增 模态框输入的 员工名<br /> _**var **empName = **$**(**"#inputEmpName"**).val();
_/**<br /> * 小写a-z，大写A-Z，0-9、_、-<br /> * {6,16}：6-16位<br /> * 或<br /> * ^[\\u2E80-\\u9FFF]{2,5}):2-5个中文字符<br /> */<br /> _**var **testName = /(^[a**-**zA**-**Z0**-**9_-]{6,16}$)|(^[\\u2E80**-**\\u9FFF]{2,5})/;<br /> **if **(!testName.test(empName)) {<br /> _//校验失败<br /> show_validate_msg_(**"#inputEmpName"**,**"error"**,**"请输入2-5中文或6-16位英文大小写和数字组合"**);<br /> _//alert("请输入2-5中文或6-16位英文大小写和数字组合")<br /> _**return false**;_//不跳转<br /> _}**else **{<br /> _//校验成功<br /> show_validate_msg_(**"#inputEmpName"**,**"success"**,**""**);<br /> **return true**;_//继续执行，跳转<br /> _}
});
**var _testEmpEmail _**= **$**(**"#inputEmail"**).blur(**function **(){<br /> _//===========校验邮箱==============<br /> //获取，新增 模态框输入的 Email<br /> _**var **email = **$**(**"#inputEmail"**).val();<br /> **var **testEmail = /^([a**-**z0**-**9_\\.-]+)@([\\da**-**z\\.-]+)\\.([a**-**z\\.]{2,6})$/;<br /> **if **(!testEmail.test(email)) {<br /> _//alert("请输入正确的email！")<br /> //校验失败<br /> show_validate_msg_(**"#inputEmail"**,**"error"**,**"请输入正确的email！"**);<br /> **return false**;_//不执行，表示不跳转<br /> _}**else **{<br /> _//校验成功<br /> show_validate_msg_(**"#inputEmail"**,**"success"**,**""**);<br /> **return true**;_//跳转<br /> _}
});
_/**<br /> * _**_@param _**_element：接收选择的元素<br /> * _**_@param _**_status：状态<br /> * _**_@param _**_msg：提示信息<br /> */<br /> _**function **_show_validate_msg_(element,status,msg){<br /> **if **(**"success" **== status){_//校验成功<br /> //获取标签元素，的父元素，并添加绿色样式。表示输入框校验成功，显示绿色。<br /> _**$**(element).parent().addClass(**"has-success"**);<br /> _//校验成功，清空输入框下的 提示信息<br /> _**$**(element).next(**"span"**).text(msg);<br /> }**else if**(**"error" **== status){<br /> _//获取标签元素，的父元素，并添加绿色样式。表示输入框校验失败，显示红色。<br /> _**$**(element).parent().addClass(**"has-error"**);<br /> _//校验失败，输入框下的 提示信息<br /> _**$**(element).next(**"span"**).text(msg);<br /> }<br /> }
</script>
</body>
</html>
| | —- |
若有收获，就点个赞吧
0 人点赞
