<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!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>Latest catering system</title>
<!-- Web 路径
不以/开始的相对路径,找资源,以当前资源的路径为基准,经常容易出问题。
以/开始的相对路径,找资源,以服务器的路径为标准(http://localhost:3306),需要加上项目名
http://localhost:8080/crud
-->
<%
pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- 引用bootstrap样式 -->
<link
href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
rel="stylesheet">
<script
src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!-- 修改的form表单 -->
<div class="modal fade" id="empUpdateModal" 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">员工修改</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">empName</label>
<div class="col-sm-10">
<p class="form-control-static" id="empName_update_static"></p>
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">email</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="email"
id="email_update_input" placeholder="[email protected])">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">gender</label>
<div class="col-sm-10">
<label class="radio-inline"> <input type="radio"
name="gender" id="gender1_update_input" value="M"
checked="checked"> 男
</label> <label class="radio-inline"> <input type="radio"
name="gender" id="gender2_update_input" value="F"> 女
</label>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">deptName</label>
<div class="col-sm-4">
<!-- 部门提交部门ID -->
<select class="form-control" name="dId">
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" id="emp_update_btn">修改</button>
</div>
</div>
</div>
</div>
<!-- 添加的form表单 -->
<div class="modal fade" id="empAddModal" 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 class="col-sm-2 control-label">empName</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="empName"
id="empName_add_input" placeholder="empName">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">email</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="email"
id="email_add_input" placeholder="[email protected])">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">gender</label>
<div class="col-sm-10">
<label class="radio-inline"> <input type="radio"
name="gender" id="gender1_add_input" value="M"
checked="checked"> 男
</label> <label class="radio-inline"> <input type="radio"
name="gender" id="gender2_add_input" value="F"> 女
</label>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">deptName</label>
<div class="col-sm-4">
<!-- 部门提交部门ID -->
<select class="form-control" name="dId" id="depts_add_select">
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" id="save_emp_btn">新增</button>
</div>
</div>
</div>
</div>
<!-- 搭建显示页面 -->
<div class="container">
<!--标题 -->
<div class="row">
<div class="col-md-100 col-md-offset-1200">
<div class="bg-primary">
<h1>Latest system</h1>
</div>
</div>
</div>
<!-- 按钮
<div class="row">
<div class="col-md-1 ">
<button class="btn btn-info">查询</button>
</div>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button"
id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="true">
请选择查询条件 <span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">empID</a></li>
<li><a href="#">empName</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">gender</a></li>
</ul>
</div>
-->
<div class="col-md-4 col-md-offset-10">
<button class="btn btn-success" id="emp_add_modal">新增</button>
<button class="btn btn-danger" id="emp_delete_all_btn">批量删除</button>
</div>
</div>
<!-- 显示表格数据 -->
<div class="row">
<div class="col-md-12">
<table class="table table-hover" id="emps_table">
<thead>
<tr>
<th><input type="checkbox" id="check_all"/></th>
<th>empId</th>
<th>empName</th>
<th>gender</th>
<th>email</th>
<th>deptName</th>
<th>操作</th>
</tr>
</thead>
<!-- 创建表格体 -->
<tbody>
<!-- 员工添加的模态框 -->
</tbody>
</table>
</div>
</div>
<!-- 显示分页信息 -->
<div class="row">
<!-- 分页信息pageNum:当前多少页,pages:总共多少页 -->
<div class="col-md-6" id="page_info_area"></div>
<!-- 分页条 -->
<div class="col-md-6" id="page_nav_area"></div>
</div>
</div>
<script type="text/javascript">
var totalRecord,currentPage;
//页面加载完成以后,用ajax请求跳到另一个页面
$(function() {
//第一页
to_page(1);
});
function to_page(pn) {
$.ajax({
url : "${APP_PATH}/emps",
data : "pn=" + pn,
type : "Get",
success : function(result) {
//console.log(result);已经获取得数据
//1.解析并显示员工数据
build_emps_table(result);
//2.解析并显示分页信息
build_page_info(result);
//3.解析显示分页条
build_page_nav(result);
}
});
}
//解析并显示员工数据
function build_emps_table(result) {
//数据创建是先清空,否则数据重复
$("#emps_table tbody").empty();
var emps = result.extend.pageInfo.list;
//each方法传入第一个要遍历的元素emps;回调涵数就这个function第一个元素就索引,第二个参数为当前传入的对象
$.each(emps, function(index, item) {
//显示员工的数据 :alert(item.empName);
var checkboxTd = $("<td><input type='checkbox' class='check_item'/></td>");
var empIdTd = $("<td></td>").append(item.empId);
var empNameTd = $("<td></td>").append(item.empName);
var genderTd = $("<td></td>").append(
item.gender == 'M' ? "男" : "女");
var emailTd = $("<td></td>").append(item.email);
var deptNameTd = $("<td></td>")
.append(item.department.deptName);
var editBtn = $("<button></button>").addClass(
"btn btn-primary btn-sm edit_btn").append(
$("<span></span>").addClass(
"glyphicon glyphicon-pencil edit_btn")).append("编辑");
//为编辑按钮添加一个自定义的员工属性id
editBtn.attr("edit-id",item.empId);
var delBtn = $("<button></button>").addClass(
"btn btn-danger btn-sm delete_btn").append(
$("<span></span>")
.addClass("glyphicon glyphicon-trash delete_btn")).append(
"删除");
//为删除按钮添加一个自定义的员工属性id
delBtn.attr("delete_btn",item.empId);
var tdBtn = $("<td></td>").append(editBtn).append(" ").append(
delBtn);
//append:方法执行完成以后还是返回原因来的素质
$("<tr></tr>").append(checkboxTd).append(empIdTd).append(empNameTd).append(
genderTd).append(emailTd).append(deptNameTd).append(
tdBtn).appendTo("#emps_table tbody");
})
}
//解析显示分页信息
function build_page_info(result) {
$("#page_info_area").empty();
$("#page_info_area").append(
"当前" + result.extend.pageInfo.pageNum + "页,总"
+ result.extend.pageInfo.pages + "页,总"
+ result.extend.pageInfo.total + "条记录.");
totalRecord = result.extend.pageInfo.total;
currentPage = result.extend.pageInfo.pageNum;
}
//解析显示分页条
function build_page_nav(result) {
$("#page_nav_area").empty();
var ul = $("<ul></ul>").addClass("pagination");
//下一页面与首页
var pagefirst = $("<li></li>").append(
$("<a></a>").append("首页").attr("href", "#"));
var prepage = $("<li></li>").append($("<a></a>").append("«"));
//第一页面禁用
if (result.extend.pageInfo.hasPreviousPage == false) {
pagefirst.addClass("disabled");
prepage.addClass("disabled");
} else {
pagefirst.click(function() {
to_page(1);
});
prepage.click(function() {
to_page(result.extend.pageInfo.pageNum - 1);
});
}
//下一页面与尾页
var nextpage = $("<li></li>")
.append($("<a></a>").append("»"));
var pagelast = $("<li></li>").append(
$("<a></a>").append("尾页").attr("href", "#"));
//最后一页面禁用
if (result.extend.pageInfo.hasNextPage == false) {
nextpage.addClass("disabled");
pagelast.addClass("disabled");
} else {
nextpage.click(function() {
to_page(result.extend.pageInfo.pageNum + 1);
});
pagelast.click(function() {
to_page(result.extend.pageInfo.pages);
});
}
//添加首先和前一页提示
ul.append(pagefirst).append(prepage);
//1,2,3遍历ul中添加页码提示
$.each(result.extend.pageInfo.navigatepageNums, function(index,
item) {
var nums = $("<li></li>").append($("<a></a>").append(item));
if (result.extend.pageInfo.pageNum == item) {
nums.addClass("active");
}
nums.click(function() {
to_page(item);
});
ul.append(nums);
});
//添加下一页和尾页的提示
ul.append(nextpage).append(pagelast);
//把ul加入到nav
var nav = $("<nav></nav>").append(ul);
nav.appendTo("#page_nav_area");
}
//清空表单样式内容
function reset_form(ele){
$(ele)[0].reset();
$(ele).find("*").removeClass("has-success has-error");
$(ele).find(".help-block").text("");
}
//点击按钮弹出模态框
$("#emp_add_modal").click(function() {
//清除表单中的数据,(表单完全重置)
reset_form("#empAddModal form");
//$("#empAddModal form")[0].reset();
//发送ajax请求,查到部门信息在下拉框列表中
getDepts("#empAddModal select");
//弹出模态框
$("#empAddModal").modal({
backdrop : "static"
});
});
//查到所有部门的信息显示下拉框中
function getDepts(ele){
$(ele).empty();
$.ajax({
url:"${APP_PATH}/depts",
type:"Get",
success:function(result){
//console.log(result);
$.each(result.extend.depts,function(){
var option =$("<option></option>")
.append(this.deptName).attr("value",this.deptId);
option.appendTo(ele);
});
}
});
}
//校验表单数据
function validata_add_form(){
//拿到校验数据,使用正则表达
var empName=$("#empName_add_input").val();
var regName= /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})/;
if(!regName.test(empName)){
//alert("中文为2-5位或者英文6-16字母的组合!");
//$("#empName_add_input").parent().addClass("has-error");
//$("#empName_add_input").next("span").text("中文为2-5位或者英文6-16字母的组合!");
show_validata_msg("#empName_add_input","error","中文为2-5位或者英文6-16字母的组合!");
return false;
}else{
//$("#empName_add_input").parent().addClass("has-success");
//$("#empName_add_input").next("span").text(" ");
show_validata_msg("#empName_add_input","success","");
}
var email=$("#email_add_input").val();
var regEmail= /^([a-z0-9_\.-]+)@([\da-z\.]{2,6})$/;
if(!regEmail.test(email)){
//alert("邮箱格式错误!");
//应该对之前的数据清空
//$("#email_add_input").parent().addClass("has-error");
//$("#email_add_input").next("span").text("邮箱格式错误!");
show_validata_msg("#email_add_input","error","邮箱格式错误!");
return false;
}else{
//$("#email_add_input").parent().addClass("has-success");
//$("#email_add_input").next("span").text(" ");
show_validata_msg("#email_add_input","success","");
}
return true;
}
//提取l输入框的校验逻辑
function show_validata_msg(ele,status,msg){
//清空校验数据
$(ele).parent().removeClass("has-success has-error");
$(ele).next("span").text("");
if("success"==status){
$(ele).parent().addClass("has-success");
$(ele).next("span").text(msg);
}else if("error"==status){
$(ele).parent().addClass("has-error");
$(ele).next("span").text(msg);
}
}
//校验用户名是否可用
$("#empName_add_input").change(function(){
//发送ajax请求验证用户名是否相同
var empName = this.value;
$.ajax({
url:"${APP_PATH}/checkuser",
type:"POST",
data:"empName="+empName,
success: function(result){
if(result.code==1000){
show_validata_msg("#empName_add_input","success","用户名可用!");
$("#save_emp_btn").attr("ajax-va","success");
}else{
show_validata_msg("#empName_add_input","error",result.extend.va_msg);
$("#save_emp_btn").attr("ajax-va","error");
}
}
});
});
$("#save_emp_btn").click(function(){
//1.模态框填写的表单提交给服务顺
//1.2先对提交到服务器的数据进行校验
if(!validata_add_form()){
return false;
}
//判断之前ajax请求用户名校验是否成功!成功才往提交from表单
if($(this).attr("ajax-va")=="error"){
return false;
}
//2.发送ajax请求保存员工
$.ajax({
url:"${APP_PATH}/saveEmps",
type:"POST",
data:$("#empAddModal form").serialize(),
success:function(result){
//attr(result.msg);
if(result.code==1000){
$("#empAddModal").modal('hide');
to_page(totalRecord);
}else{
//console.log(result);
if(undefined != result.extend.errorFields.email){
//显示邮箱的错误信息
show_validata_msg("#email_add_input","error",result.extend.errorFields.email);
}
if(undefined != result.extend.errorFields.empName){
//显示用户的错误信息
show_validata_msg("#empName_add_input","error",result.extend.errorFields.empName);
}
}
}
});
});
//1.我们在按钮创建之前就绑定了click,所以绑不上
//1.1.可以在按钮创建之前去绑定 ,绑定点击live() jquery新版没有live(),可使用on()替代
$(document).on("click",".edit_btn",function(){
//alert("修改");确定绑定
//1.查出(部门)信息,
getDepts("#empUpdateModal select");
//2.并显示列表
$("#empUpdateModal").modal({
backdrop:"static"
});
//3.查出(员工)信息
getEmp($(this).attr("edit-id"));
//4.模态框传入一个id给更新按钮
$("#emp_update_btn").attr("edit-id",$(this).attr("edit-id"));
});
//3.查出(员工)信息
function getEmp(id){
$.ajax({
url:"${APP_PATH}/emp/"+id,
type:"GET",
success:function(result){
//console.log(result);
//获取到结果集
var empData = result.extend.emp;
$("#empName_update_static").text(empData.empName);
$("#email_update_input").val(empData.email);
$("#empUpdateModal input[name=gender]").val([empData.gender]);
$("#empUpdateModal select").val([empData.dId]);
}
});
}
//点击更新,提交修改员工信息,邮箱校验
$("#emp_update_btn").click(function(){
var email=$("#email_update_input").val();
var regEmail=/^([a-z0-9_\.-]+)@([\da-z\.]{2,6})$/;
if(!regEmail.test(email)){
show_validata_msg("#email_update_input","error","邮箱格式错误!");
return false;
}else{
show_validata_msg("#email_update_input","success","");
}
//发送ajax请求 保存修改后的数据
$.ajax({
url:"${APP_PATH}/emp/"+$(this).attr("edit-id"),
type:"POST",
data:$("#empUpdateModal form").serialize()+"&_method=PUT",
success:function(result){
//alert(result.msg);
//1.关闭对话框
$("#empUpdateModal").modal('hide');
//2.回到本页面
to_page(currentPage);
}
});
});
//单个删除
$(document).on("click",".delete_btn",function(){
//弹出删除框
var empName = $(this).parents("tr").find("td:eq(2)").text();
//拿到当前ID
var empId = $(this).attr("delete_btn");
//alert($(this).parents("tr").find("td:eq(1)").text());
if(confirm("你确定要删除【"+empName+"】吗 ?")){
//确定删除
$.ajax({
url:"${APP_PATH}/emp/"+empId,
type:"DELETE",
success:function(result){
//alert(result.msg);
//回到本页面
to_page(currentPage);
}
});
}
});
$("#check_all").click(function(){
//我们原生的dom原生的属性,attr获取自定义属性值
//我们可以用prop修改和读取dom原生的值
$(".check_item").prop("checked",$(this).prop("checked"));
});
$(document).on("click",".check_item",function(){
//判断当前选择中的元素
var flag = $(".check_item:checked").length== $(".check_item").length;
$("#check_all").prop("checked",flag);
});
//1.多选删除事件,点击批量删除
$("#emp_delete_all_btn").click(function(){
//2.要遍历当前被选的元素
var empNames ="";
var del_idstr ="";
$.each($(".check_item:checked"),function(){
empNames +=$(this).parents("tr").find("td:eq(2)").text()+",";
//组装员工id字符串
del_idstr +=$(this).parents("tr").find("td:eq(1)").text()+"-";
});
//3.去除逗号
empNames =empNames.substring(0, empNames.length-1);
//去除“-”
del_idstr =del_idstr.substring(0, del_idstr.length-1);
if(confirm("确定要删除【"+empNames+"】吗?")){
//确认后发送ajax请求
$.ajax({
url:"${APP_PATH}/emp/"+del_idstr,
type:"DELETE",
success:function(result){
//alert(result.msg);
//回到本页面
to_page(currentPage);
}
});
}
});
</script>
</body>
</html>