刪除：單個刪除，多個刪除，刪除時候會提示是否真的要刪除
邏輯：
單個刪除 URI:emp/{id} DELETE
1）EmployeeController.java
/*
* 單個刪除和批量刪除二合一
* 思路就是傳入個字符串，然後轉化爲Integer
* 如果是批量刪除，就1-2-3
* 單個刪除，就1
*/
@ResponseBody
@RequestMapping(value="/emp/{ids}",method=RequestMethod.DELETE)
public Msg deleteEmpById(@PathVariable("ids") String ids){
//傳進來一個字符串，如果包含-就是批量刪除，否則就是單個刪除
if(ids.contains("-")){
//分割，然後封裝到數組中
List<Integer> del_ids=new ArrayList<>();
String[] str_ids=ids.split("-");
//組裝id的集合
for(String string:str_ids){
del_ids.add(Integer.parseInt(string));
}
employeeService.deleteBatch(del_ids);
}else{
//單個刪除
Integer id=Integer.parseInt(ids);
employeeService.deleteEmp(id);
}
return Msg.success();
}2）EmployeeService.java
//員工刪除
public void deleteEmp(Integer id) {
employeeMapper.deleteByPrimaryKey(id);
}
//批量刪除
public void deleteBatch(List<Integer> ids) {
EmployeeExample example=new EmployeeExample();
Criteria criteria=example.createCriteria();
//就會變成 delete from xx where emp_id in ids
criteria.andEmpIdIn(ids);
employeeMapper.deleteByExample(example);
}
index.jsp
<%@ 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>員工列表</title>
<%
pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<script type="text/javascript"
src="${ APP_PATH }/static/js/jquery-1.11.1.min.js"></script>
<link rel="stylesheet"
href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script
src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!-- 員工添加的模態框，bootstrap的JavaScript插件，在<script>裏寫上事件 -->
<!-- Modal -->
<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">
<!-- 從bootstrap上添加的表單模塊 -->
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">empName</label>
<div class="col-sm-10">
<!-- name屬性可以讓spring自動配置，要求就是要對應bean的屬性 -->
<input type="text" class="form-control" id="empName_add_input"
placeholder="empName" name="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" id="email_add_input"
placeholder="[email protected]" name="email"> <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="dept_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="emp_save_btn">保存</button>
</div>
</div>
</div>
</div>
<!-- 員工修改的模態框 -->
<!-- Modal -->
<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">
<!-- 從bootstrap上添加的表單模塊 -->
<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" id="email_update_input"
placeholder="[email protected]" name="email"> <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" id="dept_update_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="emp_update_btn">更新</button>
</div>
</div>
</div>
</div>
<div class="container">
<!-- 標題 -->
<div class="row">
<div class="col-md-12">
<h1>SSM-CRUD</h1>
</div>
</div>
<!-- 兩個按鈕 -->
<div class="row">
<div class="col-md-4 col-md-offset-8">
<button class="btn btn-primary" id="emp_add_modal_btn">新增</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>#</th>
<th>empName</th>
<th>gender</th>
<th>email</th>
<th>department</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<!-- 顯示分頁信息 -->
<div class="row">
<!-- 分頁信息 -->
<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);
build_page_nav(result);
}
});
}
/*=============解析員工數據，並添加到列表下面，形成完整列表模式框架==========*/
function build_emps_table(result) {
//在構建之前，先清空，不然數據會疊加
$("#emps_table tbody").empty();
//此處要對照JSON數據，獲取到員工的list
var emps = result.extend.pageInfo.list;
//jquery的遍歷，emps爲要遍歷的參數，後面的爲每次遍歷返回的內容；index爲下標，item爲當前的數據
$
.each(
emps,
function(index, item) {
//創建列表
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);
//編輯按鈕，利用jquery添加bootstrap所依賴的class
var editBtn = $("<button></button>")
.addClass(
"btn btn-primary btn-sm edit_btn")
.append(
$("<span></span>")
.addClass(
"glyphicon glyphicon-pencil"))
.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"))
.append("刪除");
//爲刪除按鈕添加一個自定義的屬性，來表示當前刪除員工的id
delBtn.attr("del-id", item.empId);
//把兩個按鈕寫在一起，並且在其中添加一個空格
var btnTd = $("<td></td>").append(editBtn)
.append(" ").append(delBtn);
//append方法執行完成後，還是返回原來的元素，所以可以不停使用append方法添加內容
$("<tr></tr>").append(checkBoxTd).append(
empIdTd).append(empNameTd).append(
genderTd).append(emailTd).append(
deptNameTd).append(btnTd).appendTo(
"#emps_table tbody");
});
}
/*======================解析頁面左下角的信息=======================*/
function build_page_info(result) {
$("#page_info_area").empty();
//找到id=page_info_area的div塊 進行操作
$("#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();
//此處的建議對照之前的index.jsp的html部分的代碼看，不如太作死
/*開始構建 首頁 末頁，第一頁...等元素，最後一次性加進去下面 第一段代碼就完成了
<li><a href="#">首頁</a></li> 這段代碼
*/
var ul = $("<ul></ul>").addClass("pagination");
var firstPageLi = $("<li></li>").append(
$("<a></a>").append("首頁").attr("href", "#"));
var prePageLi = $("<li></li>").append(
$("<a></a>").append("«"));
//判斷能不能點擊前一頁或者首頁
if (result.extend.pageInfo.hasPreviousPage == false) {
firstPageLi.addClass("disabled");
prePageLi.addClass("disabled");
} else {
//爲元素添加點擊翻頁的事件
firstPageLi.click(function() {
to_page(1);
});
prePageLi.click(function() {
to_page(result.extend.pageInfo.pageNum - 1);
})
}
var nextPageLi = $("<li></li>").append(
$("<a></a>").append("»"));
var lastPageLi = $("<li></li>").append(
$("<a></a>").append("末頁").attr("href", "#"));
//判斷能不能點擊下一頁或者末頁
if (result.extend.pageInfo.hasNextPage == false) {
nextPageLi.addClass("disabled");
lastPageLi.addClass("disabled");
} else {
nextPageLi.click(function() {
to_page(result.extend.pageInfo.pageNum + 1);
});
lastPageLi.click(function() {
to_page(result.extend.pageInfo.pages);
})
}
//先把首頁和前一頁圖標加上去
ul.append(firstPageLi).append(prePageLi)
//遍歷頁碼號 第一頁第二頁。。。遍歷給ul中添加頁碼提示
$.each(result.extend.pageInfo.navigatepageNums, function(index,
item) {
var numLi = $("<li></li>").append($("<a></a>").append(item));
//讓當前頁面高亮
if (result.extend.pageInfo.pageNum == item) {
numLi.addClass("active");
}
//添加單擊事件
numLi.click(function() {
to_page(item);
})
ul.append(numLi);
});
//最後添加後一頁和末頁提示
ul.append(nextPageLi).append(lastPageLi);
//把ul加入到nav元素
var navEle = $("<nav></nav>").append(ul);
navEle.appendTo("#page_nav_area");
}
/*============每次新增後，再點開新增原來的內容都沒消除，此方法就是消除上一條新增後框框中的信息===*/
function reset_form(ele) {
//重置內容
$(ele)[0].reset();
//清空樣式，找到該元素下的所有內容裏包含這兩個class的內容，清掉它們
$(ele).find("*").removeClass("has-error has-success");
//找到所有class爲helt-block（提示框所在的一小塊區域），清空內容
$(ele).find(".help-block").text("");
}
/*=============點擊新增按鈕彈出懸浮框，（在“新增”鍵處）============*/
$("#emp_add_modal_btn").click(function() {
//重置表單
reset_form("#empAddModal form");
//發送ajax請求，查出部門信息，顯示在下拉列表中
getDepats("#dept_add_select");
//彈出框框
$("#empAddModal").modal({
//令懸浮框不會刪除
backdrop : "static"
});
});
/*==============封裝方法：查出總共有幾個部門，然後添加到下拉表中======================*/
function getDepats(ele) {
//每次請求前 先清空數據
$(ele).empty();
$.ajax({
url : "${APP_PATH}/depts",
type : "GET",
success : function(result) {
//顯示部門信息在下拉列表中
$.each(result.extend.depts, function() {
var optionEle = $("<option></option>").append(
this.deptName).attr("value", this.deptId);
optionEle.appendTo(ele);
});
}
});
}
/* ===========前端檢驗數據是否合理，但是這樣不保險，在下面還有後臺檢驗====================*/
function validate_add_form() {
//1、拿到要校驗的數據，使用正則表達式進行校驗
var empName = $("#empName_add_input").val();
//bootstrap的內容，在input的父元素上添加如下class
var regName = /(^[a-zA-Z0-9_-]{4,16}$)|(^[\u2E80-\u9FFF]{2,5})/;
if (!regName.test(empName)) {
show_validate_msg("#empName_add_input", "error",
"用戶名格式錯誤（前端校驗）");
return false;
} else {
show_validate_msg("#empName_add_input", "success", "");
}
//校驗郵箱
var email = $("#email_add_input").val();
var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
if (!regEmail.test(email)) {
//bootstrap的內容，在input的父元素上添加如下class
show_validate_msg("#email_add_input", "error", "郵件格式錯誤（前端校驗）");
return false;
} else {
show_validate_msg("#email_add_input", "success", "");
}
return true;
}
/*=======================封裝檢驗重複的方法，便於多處引用===============================*/
function show_validate_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("");
} else if ("error" == status) {
$(ele).parent().addClass("has-error");
$(ele).next("span").text(msg);
}
}
/*===========================檢驗員工是否重複，並進行提示========================*/
$("#empName_add_input").change(
function() {
var empName = this.value;
//發送ajax請求是否可用
$.ajax({
url : "${APP_PATH}/checkuser",
data : "empName=" + empName,
type : "POST",
success : function(result) {
//此處code是Msg.java中的屬性
if (result.code == 100) {
show_validate_msg("#empName_add_input",
"success", "用戶名可用");
//如果成功，給保存按鈕的鍵添加個自定義的屬性，用於判斷能不能點下保存
$("#emp_save_btn").attr("ajax-va", "success");
} else {
//傳出的錯誤信息，是在EmployeeController中自定義的va_msg
show_validate_msg("#empName_add_input",
"error", result.extend.va_msg);
$("#emp_save_btn").attr("ajax-va", "error");
}
}
});
});
/*======================點擊按鈕後，就會保存數據，並且實現在這實現後臺檢驗=====================*/
$("#emp_save_btn")
.click(
function() {
//對提交的數據進行校驗
if (!validate_add_form()) {
return false;
}
//1、判斷之前的ajax用戶名是否成功，如果成功，才發送ajax
if ($(this).attr("ajax-va") == "error") {
return false;
}
//2、ajax保存員工
$
.ajax({
url : "${APP_PATH}/emp",
type : "POST",
data : $("#empAddModal form")
.serialize(),
success : function(result) {
//員工保存成功後，判斷返回後臺返回的結果狀態碼（JSR303）
if (result.code == 100) {
//1、關閉模態框；就用bootstrap的方法
$("#empAddModal").modal('hide');
//2、來到最後一頁，顯示保存的數據
//發送ajax請求顯示最後一頁數據即可
//此處利用pagehelper中，如果跳轉的頁面數大，則自動訪問最後一頁
to_page(totalRecord);
} else {
//有哪個字段的錯誤信息就顯示哪個字段的，undefined是沒有錯誤下會自動帶上的信息
if (undefined != result.extend.errorFields.email) {
//顯示郵箱錯誤信息
show_validate_msg(
"#email_add_input",
"error",
result.extend.errorFields.email);
}
if (undefined != result.extend.errorFields.empName) {
//顯示員工錯誤信息
show_validate_msg(
"#empName_add_input",
"error",
result.extend.errorFields.empName);
}
}
}
});
});
/* ============================以下是修改員工內容======================================== */
/*=====================查詢員工信息（和查詢部門信息一樣）========================*/
function getEmp(id) {
$.ajax({
url : "${APP_PATH}/emp/" + id,
type : "GET",
success : function(result) {
var empData = result.extend.emp;
//獲取姓名和郵箱信息，因爲姓名和郵箱格式不一樣，因此實現方式一個text，一個val
$("#empName_update_static").text(empData.empName);
$("#email_update_input").val(empData.email);
//單選框和下拉列表的選中方式可以搜搜jQuery文檔的val方法
$("#empUpdateModal input[name=gender]").val(
[ empData.gender ]);
$("#empUpdateModal select").val([ empData.dId ]);
}
});
}
/*========================點擊“編輯”後，彈出懸浮框===========================*/
/* 下面這種綁定方法是不行的，因爲編輯等內容，都是在<script>中用ajax發送請求得到的。
但是js先執行，因此可以說，我們這裏是先綁定，後出現那些按鈕。因此不行
解決方法：1、創建按鈕時候綁定事件（太耦合）。2、使用jquery提供的on方法（自行搜索on的用法）
$(".edit_btn").click(function() {
alert("2334");
});
*/
$(document).on("click", ".edit_btn", function() {
//1、查出員工信息，並顯示員工信息，此處用到了bootstrap的靜態控件
//2、同時我們創建按鈕時候添加了個屬性edit-id獲取當前按鈕的id（和員工id一樣），從而獲取員工id
getEmp($(this).attr("edit-id"));
//2、查出部門信息，並顯示部門列表
getDepats("#empUpdateModal select");
//3、把員工id傳遞給模態框的更新按鈕。給更新按鈕添加edit-id屬性，並傳遞id值
$("#emp_update_btn").attr("edit-id", $(this).attr("edit-id"));
//4、彈出模態框，並顯示查詢到的信息
$("#empUpdateModal").modal({
//令懸浮框不會刪除
backdrop : "static"
});
});
/*=======================點擊“更新”後，更新員工===========================*/
$("#emp_update_btn")
.click(
function() {
//1、驗證郵箱是否合法，這是上面前端校驗的內容，由於沒封裝方法，就直接複製拿來用了
var email = $("#email_update_input").val();
var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
if (!regEmail.test(email)) {
show_validate_msg("#email_update_input",
"error", "郵件格式錯誤（前端校驗）");
return false;
} else {
show_validate_msg("#email_update_input",
"success", "");
}
//2、發送ajax請求，保存員工數據，根據我們之前的規定，用put方式來更新
$.ajax({
//在前面的方法中，我們給更新按鈕加上了edit-id屬性
url : "${APP_PATH}/emp/"
+ $(this).attr("edit-id"),
type : "PUT",
data : $("#empUpdateModal form").serialize(),
success : function(result) {
//1、關閉對話框，
$("#empUpdateModal").modal("hide");
//2、回到本頁面
to_page(currentPage);
}
});
});
/*==========================單個刪除按鈕========================*/
$(document).on("click", ".delete_btn", function() {
//1、彈出確認是否刪除對話框，找到列表中的第三個td（即姓名）
var empName = $(this).parents("tr").find("td:eq(2)").text();
var empId = $(this).attr("del-id");
//制定彈出框的內容
if (confirm("確認刪除[" + empName + "]嗎?")) {
//確認，發送ajax請求進行刪除
$.ajax({
url : "${APP_PATH}/emp/" + empId,
type : "DELETE",
success : function(result) {
to_page(currentPage);
}
});
}
});
/*==============點擊最上面的全選/全不選，則該頁所有內容都會勾選=====================*/
$("#check_all").click(function() {
/*attr獲取checked是undefined，用prop修改和讀取dom原生屬性的值
此處是判斷當前元素是否被選中$(this).prop("checked")
且該方法第二個參數應該是傳入當前狀態？ 這樣就完成了全選全不選的效果
*/
$(this).prop("checked");
$(".check_item").prop("checked", $(this).prop("checked"));
});
/*=========================當下面的五個小選擇框選滿時候，上面的全選也會勾選============================*/
$(document)
.on(
"click",
".check_item",
function() {
//判斷當前選中的元素是不是五個，是的話，則上面的全選也會勾上
//:checked是jquery的內容，用來封裝已經勾選的內容
var flag = $(".check_item:checked").length == $(".check_item").length
$("#check_all").prop("checked", flag);
});
/*==================批量刪除====================*/
$("#emp_delete_all_btn").click(
function() {
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()
+ "-";
});
//去除empNames的逗號
empNames = empNames.substring(0, empNames.length - 1);
//去除del_idstr多出來的橫槓
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>
