注意在目前了解到的所有的js操作中：
//只有下面的方法，查找有 点+类名 ，比如【.edit-btn】 这个算标签内的自定义属性
//其他地方，查找类名，都不需要添加 . 号 【原因就是 . 代表查找同类名的所有元素 】
$(document).on("click",".edit-btn",function(){ });
一、单个删除
1、前端代码
// delete-btn 这个是在一开始展示表格信息的时候，就已经添加了。
$(document).on("click",".delete-btn",function(){
//弹出是否确认删除对话框
//alert($(this).parents("tr").find("td:eq(1)").text());
var empName = $(this).parents("tr").find("td:eq(1)").text()
var empId = $(this).attr("delete-id");
if(confirm("确认删除【"+empName+"】")){
$.ajax({
url:"${APP_PATH}/emp/"+empId,
type:"delete",
success:function(result){
alert(result.msg);
to_page(g_currentPage);
}
});
}
});
2、后端代码
EmployeeController.java
@ResponseBody
@RequestMapping(value="/emp/{id}",method=RequestMethod.DELETE)
public Msg deleteByEmpId(@PathVariable("id") int id){
employeeService.deleteEmp(id);
return Msg.success();
}
EmployeeService.java
/**
* 根据id 删除用户
* @param id
*/
public void deleteEmp(int id) {
// TODO Auto-generated method stub
employeeMapper.deleteByPrimaryKey(id);
}
二、批量删除
1、前端代码
（1）添加checkbox 勾选功能
<!-- 显示表格数据 --> <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>deptName</th> <th>操作</th> </tr> </thead> <tbody> </tbody> </table> </div> </div>
function build_emps_table(result) {
//清空table表格,如果不请空，下一次请求时，数据会在原来的基础上，不断添加。
$("#emps_table tbody").empty();
var emps = result.extend.pageInfo.list;
$.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);
/**
<button class="btn btn-primary btn-sm">
<i class="icon-edit icon-large"></i> 编辑
</button>
<button class="btn btn-danger btn-sm">
<i class="icon-trash icon-large"></i> 删除
</button>
**/
var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit-btn")
.append($("<i></i>").addClass("icon-edit icon-large")).append(" 编辑");
//为编辑按钮添加一个自定义的属性，来表示当前员工id
editBtn.attr("edit-id",item.empId);
var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm delete-btn")
.append($("<i></i>").addClass("icon-trash icon-large")).append(" 删除");
//为删除按钮添加一个自定义的属性来表示当前删除的员工id
delBtn.attr("delete-id",item.empId);
var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);
//append方法执行完成以后还是返回原来的元素
$("<tr></tr>")
.append(checkBoxTd)
.append(empIdTd)
.append(empNameTd)
.append(genderTd)
.append(emailTd)
.append(deptNameTd)
//.append(editBtn)
//.append(delBtn)
.append(btnTd)
.appendTo("#emps_table tbody");
});
}
（2）添加勾选逻辑
//完成全选、全不选功能
$("#check_all").click(function(){
/***
//获取id为p的标签的属性值
$('#p').attr('class')
//如果存在就是修改，如果不存在就是添加
$('#p').attr('class','red')
// 删除某个属性
$('#p').removeAttr('name')
//添加class名称
$('#p').addClass('blue')
//删除class名称
$('#p').removeClass('yellow')
//有class就删除 没有就添加
$('#p').toggleClass('asdf')
//val()获取输入框内容
var s = $('input[name="user"]').val()
***/
// attr获取checked是undefined;
// alert($(this).attr("checked")); 弹出的是 undefined
// 用prop修改和读取dom原生属性的值；用attr获取自定义属性的值；这样就不容易出错
// alert($(this).prop("checked"));
// 可以正常弹出结果,也就是说：$(this).prop("checked") 返回是否选中的 true or false
// 设置 是否 checked $(this).prop("checked",true/false)
//设置全选和全不选
$(".check-item").prop("checked",$(this).prop("checked"));
});
//check_item 触发回调函数
$(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 empNames ="";
//组织员工id字符串
var delete_ids_str="";
$.each($(".check-item:checked"),function(){
empNames = empNames+$(this).parents("tr").find("td:eq(2)").text() +",";
delete_ids_str += $(this).parents("tr").find("td:eq(1)").text() +"-";
});
//去除empNames多余的，
empNames = empNames.substring(0,empNames.length-1);
//去除删除的id的多余的-
delete_ids_str = delete_ids_str.substring(0,delete_ids_str.length-1);
if(confirm("确认删除【"+empNames+"】?")){
//发送ajax请求
$.ajax({
url:"${APP_PATH}/emp/"+delete_ids_str,
type:"delete",
success:function(result){
alert(result.msg);
to_page(g_currentPage);
}
});
}
});
（3）后端处理逻辑
EmployeeController.java
/**
* 单个、批量 删除二合一，
* 批量删除 1-2-3
* 单个删除 1
*
* @param ids
* @return
*/
@ResponseBody
@RequestMapping(value="/emp/{ids}",method=RequestMethod.DELETE)
public Msg deleteByEmpId(@PathVariable("ids") String ids){
//批量删除
if(ids.contains("-")){
List<Integer> delete_id = new ArrayList<>() ;
String[] str_ids = ids.split("-");
for (String str :str_ids) {
delete_id.add(Integer.parseInt(str));
}
employeeService.deleteBatch(delete_id);
}else{
int id = Integer.parseInt(ids);
employeeService.deleteEmp(id);
}
return Msg.success();
}
EmployeeService.java
/**
*
* @param ids
*/
public void deleteBatch(List<Integer> ids) {
// TODO Auto-generated method stub
EmployeeExample example = new EmployeeExample();
Criteria criteria = example.createCriteria();
//delete from xxx where emp_id in (1,2,3)
criteria.andEmpIdIn(ids);
employeeMapper.deleteByExample(example);
}