SSM小项目-(10)-删除雇员模块及本项目总结

注意在目前了解到的所有的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);
		
}

 

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments