SSM项目------员工管理系统（三）
批量删除
前端
点击右上角删除，可以删除选中的列表项
list.js
因为添加了选中框，所以重写build_emps_table(result)方法
$(function(){
//完成全选/全不选功能
$("#check_all").click(function () {
$(".check_item").prop("checked", $(this).prop("checked"));
})
//为列表项中的单选框添加点击事件
$(document).on("click", ".check_item", function () {
//判断当前选中的元素是否是5个
var flag = $(".check_item:checked").length === $(".check_item").length;
$("#check_all").prop("checked", flag)
})
//点击右上角删除，会删除选中的列表项
$("#emp_delete_all_btn").click(function () {
var checked = false;
var empNames = "";
var delIdStr = "";
$.each($(".check_item:checked"), function () {
checked = true;
empNames += $(this).parents("tr").find("td:eq(2)").text() + "，";
delIdStr += $(this).parents("tr").find("td:eq(1)").text() + "-";
});
if (checked == false) {
alert("至少选中一项！")
return false;
}
//去除多余符号
empNames = empNames.substring(0, empNames.length - 1);
delIdStr = delIdStr.substring(0, empNames.length - 1);
if (confirm("确认删除【" + empNames + "】吗？")) {
//发送ajax请求删除
$.ajax({
url: httpPath + "/deleteEmp/" + delIdStr,
type: "DELETE",
success: function (result) {
to_page(pageNum);
}
})
}
})
})
/**
*
* 解析并显示员工数据
* @param result
*/
function build_emps_table(result) {
//清空table
$("#emps_table tbody").empty();
var emps = result.ext.pageInfo.list;
$.each(emps, function (index, item) {
//新加的选中框代码
var checkBoxTd = $("list.jsp
添加了一行选中框的代码
<body>
<div class="row">
<div class="col-md-12">
<table class="table table-striped" id="emps_table">
<thead>
<tr>
<th>
<input type="checkbox" id="check_all">
th>
<th>#th>
<th>员工名称th>
<th>性别th>
<th>邮箱th>
<th>部门th>
<th>操作th>
tr>
thead>
<tbody>
<tr>
tr>
tbody>
table>
div>
div>
body>
<div class="row">
<div class="col-md-12">
<table class="table table-striped" id="emps_table">
<thead>
<tr>
<th>
<input type="checkbox" id="check_all">
th>
<th>#th>
<th>员工名称th>
<th>性别th>
<th>邮箱th>
<th>部门th>
<th>操作th>
tr>
thead>
<tbody>
<tr>
tr>
tbody>
table>
div>
div>
后端
EmployeeService.java
package com.indi.service;
@Service
public class EmployeeService {
//之前的代码
/**
* 批量删除
* @param ids
*/
public void deleteBatch(List<Integer> ids){
//将list数据传到sql语句中存储
EmployeeExample example = new EmployeeExample();
Criteria criteria = example.createCriteria();
criteria.andEmpIdIn(ids);
employeeMapper.deleteByExample(example);
}
}
EmployeeController.java
将之前的单个删除与现在的批量删除整合为一个方法
package com.indi.controller;
@Controller
public class EmployeeController {
//之前的代码
/**
* 单个批量二合一
* @param ids 单个删除没有“-”/批量删除用“-”分割
* @return
*/
@ResponseBody
@RequestMapping(value = "/deleteEmp/{ids}", method = RequestMethod.DELETE)
public Msg deleteEmp(@PathVariable("ids")String ids) {
if (ids.contains("-")) {
List<Integer> delIds = new ArrayList<>();
String[] strIds = ids.split("-");
for (String strId : strIds) {
delIds.add(Integer.parseInt(strId));
}
employeeService.deleteBatch(delIds);
}else{
Integer id = Integer.parseInt(ids);
employeeService.deleteEmp(id);
}
return Msg.success();
}
}
根据员工姓名查询列表
前端
list.js
$(function() {
//查询按钮的点击事件
$("#emp_select_btn").click(function () {
to_page_by_name(1)
})
});
//跳转页面
function to_page_by_name(pn) {
var empName_example = $("#empName_example");
if (empName_example.val().trim() == '' || empName_example.val().trim() == undefined || empName_example.val().trim() == null) {
to_page(1);
return false;
}
$.ajax({
url: httpPath + "/getEmpsByEmpName",
data: "pn=" + pn + "&empName=" + empName_example.val().trim(),
type: "GET",
success: function (result) {
build_emps_table(result);
build_page_info(result);
build_page_nav_by_name(result);
$("#check_all").prop("checked", false)
$(".check_item").prop("checked", false);
}
})
}
/**
* 查询并解析显示分页条
* @param result
*/
function build_page_nav_by_name(result) {
$("#page_nav_area").empty();
var ul = $("
").addClass("pagination");
//如果有前一页
if (result.ext.pageInfo.hasPreviousPage) {
//添加首页和前一页的提示
var firstPageLi = $("").append($("").append("首页").attr("href", "#"));
var prePageLi = $("").append($("").append("«").attr("href", "#"));
ul.append(firstPageLi).append(prePageLi);
firstPageLi.click(function () {
to_page_by_name(1);
})
prePageLi.click(function () {
to_page_by_name(result.ext.pageInfo.pageNum - 1);
})
}
//如果有下一页
if (result.ext.pageInfo.hasNextPage) {
var nextPageLi = $("").append($("").append("»").attr("href", "#"));
var lastPageLi = $("").append($("").append("末页").attr("href", "#"));
//添加首页和前一页的提示
ul.append(nextPageLi).append(lastPageLi);
nextPageLi.click(function () {
to_page_by_name(result.ext.pageInfo.pageNum + 1);
})
lastPageLi.click(function () {
to_page_by_name(result.ext.pageInfo.pages);
})
}
//遍历添加页码
$.each(result.ext.pageInfo.navigatepageNums, function (index, item) {
var numLi = $("").append($("").append(item).attr("href", "#"));
//设置当前页码的选中状态
if (result.ext.pageInfo.pageNum == item) {
numLi.addClass("active");
} else {
numLi.click(function () {
to_page_by_name(item);
})
}
ul.append(numLi);
})
ul.append(nextPageLi).append(lastPageLi);
var navEle = $("").append(ul);
navEle.appendTo("#page_nav_area")
}
list.jsp
修改此段代码
<div class="col-md-4 column">
<div class="form-inline">
<input type="text" placeholder="请输入要查询的员工名称" class="form-control" name="empName_example" id="empName_example">
<button class="btn btn-primary" id="emp_select_btn">
<span class="glyphicon glyphicon-search" aria-hidden="true">span>
查询
button>
div>
div>
后端
EmployeeService.java
package com.indi.service;
@Service
public class EmployeeService {
/**
* 根据员工姓名查询列表
* @param empName
* @return
*/
public List<Employee> getEmpsByEmpName(String empName){
EmployeeExample example = new EmployeeExample();
Criteria criteria = example.createCriteria();
criteria.andEmpNameLike("%"+empName+"%");
return employeeMapper.selectByExampleWithDept(example);
}
}
EmployeeController.java
package com.indi.controller;
/**
* 处理员工CRUD请求
*/
@Controller
public class EmployeeController {
@ResponseBody
@RequestMapping(value = "/getEmpsByEmpName",method = RequestMethod.GET)
public Msg getEmpsByEmpName(@RequestParam(value = "pn", defaultValue = "1") Integer pn,@RequestParam("empName") String empName){
System.out.println("用户名"+empName);
PageHelper.startPage(pn, 5);
List<Employee> emps = employeeService.getEmpsByEmpName(empName);
PageInfo page = new PageInfo(emps, 5);
return Msg.success().add("pageInfo", page);
}
}
添加拦截器
未登录的情况无法访问网站，会引导用户登录
前端
list.js
主要是修改一下请求路径
var deptHttpPath;
$(function () {
//页面加载完成之后，直接发送ajax请求，要到分页数据
httpPath = $("contextPathData").attr("contextPathValue")+"/employee";
deptHttpPath = $("contextPathData").attr("contextPathValue")+"/department";
})
/**
* 查出所有部门信息系并显示在下拉列表中
*/
function getDepts(ele) {
$(ele).empty();
$.ajax({
url: deptHttpPath + "/depts",
type: "GET",
success: function (result) {
// console.log(result);
$.each(result.ext.depts, function () {
var optionEle = $("").append(this.deptName).attr("value", this.deptId);
optionEle.appendTo(ele);
})
}
})
}
后端
spring-mvc.xml
新增
<mvc:interceptors>
<mvc:interceptor>
<mvc:mapping path="/employee/**/"/>
<bean class="com.indi.config.LoginInterceptor"/>
mvc:interceptor>
<mvc:interceptor>
<mvc:mapping path="/department/**/"/>
<bean class="com.indi.config.LoginInterceptor"/>
mvc:interceptor>
mvc:interceptors>
LoginInterceptor.java
package com.indi.config;
public class LoginInterceptor implements HandlerInterceptor {
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
HttpSession session = request.getSession();
//已登录放行
if (session.getAttribute("user") != null) return true;
//没有登录的情况，拦截
request.getRequestDispatcher("/WEB-INF/jsp/login.jsp").forward(request,response);
return false;
}
}
EmployeeController.java
package com.indi.controller;
@Controller
@RequestMapping("/employee")
public class EmployeeController {
}
DepartmentController.java
package com.indi.controller;
@Controller
@RequestMapping("/department")
public class DepartmentController {
}