此系列:IDEA 搭建 基于 SSM 框架 的 Maven 项目, 完成一个基本的Web应用,实现 crud 功能。
(1) 在IDEA中,新建一个Maven工程,并创建好完整的项目结构
(2) 引入项目依赖的 jar 包,引入bootstrap前端框架,编写SSM整合的配置文件
(3) 创建数据库,生成bean文件 和 mapper文件,最后测试该部分
(4) 页面发送请求查询所有员工数据,得到 json 字符串
(5) 设计分页显示页面,解析 json 字符串,展示查询结果
(6) 添加“新增”功能
(7) 对用户输入数据进行校验
(8) 添加“修改”功能
(9) 添加“删除”功能
本节:添加“删除”功能
1. 单条删除
(1) EmployeeService 中,添加员工删除方法
/**
* 员工删除
* @param id
*/
public void deleteEmp(Integer id) {
// TODO Auto-generated method stub
employeeMapper.deleteByPrimaryKey(id);
}
(2) EmployeeController中,添加处理删除员工请求的方法
@ResponseBody
@RequestMapping(value="/emp/{id}",method=RequestMethod.DELETE)
public Msg deleteEmp(@PathVariable("id")Integer id){
employeeService.deleteEmp(id);
return Msg.success();
}
(3) 为删除按钮,绑定删除事件
//单个删除
$(document).on("click",".delete_btn",function(){
//1、弹出是否确认删除对话框
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){
alert(result.msg);
//回到本页
to_page(currentPage);
}
});
}
});
2. 完成 “全选,全不选” 功能
(1) 为总选择框,添加点击事件
//完成全选/全不选功能
$("#check_all").click(function(){
//attr获取checked是undefined;
//我们这些dom原生的属性;attr获取自定义属性的值;
//prop修改和读取dom原生属性的值
$(".check_item").prop("checked",$(this).prop("checked"));
});
(2) 为单个选择框,添加点击事件
//check_item
$(document).on("click",".check_item",function(){
//判断当前选择中的元素是否5个
var flag = $(".check_item:checked").length==$(".check_item").length;
$("#check_all").prop("checked",flag);
});
3. 批量删除
(1) 为删除按钮,添加id
<button class="btn btn-danger" id="emp_delete_all_btn">删除</button>
(2) 为删除按钮,添加点击事件
//点击全部删除,就批量删除
$("#emp_delete_all_btn").click(function(){
//
var empNames = "";
var del_idstr = "";
$.each($(".check_item:checked"),function(){
//this
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);
//去除删除的id多余的-
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);
}
});
}
});
(3) 修改EmployeeController中,添加处理删除员工请求的方法,使得可以批量处理
@ResponseBody
@RequestMapping(value="/emp/{ids}",method=RequestMethod.DELETE)
public Msg deleteEmp(@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();
}
(4) EmployeeService 中,添加员工批量删除方法
public void deleteBatch(List<Integer> ids) {
// TODO Auto-generated method stub
EmployeeExample example = new EmployeeExample();
EmployeeExample.Criteria criteria = example.createCriteria();
//delete from xxx where emp_id in(1,2,3)
criteria.andEmpIdIn(ids);
employeeMapper.deleteByExample(example);
}
终