本文为《ssm整合开发项目实践》项目的最终篇,本章节主要介绍项目的修改与删除功能,其中包括单条删除与批量删除,若要了解新增与查询所有用户信息可以查看往期文章,您可以也关注我的公众号pankangxiblog回复ssm获取全部项目文章。
由于JQuery的直接绑定单击事件不能绑定后创建的元素,由于用户列表的编辑按钮是页面加载完成后再创建的,所以直用$(元素选择符).click方式是给不了编辑按钮绑定事件的,可以使用JQuery的on方法解决此问题。
/**
* 给编辑按钮添加单击事件
*/
$(document).on("click","#edit_btn",function(){
$("#edit_user_form")[0].reset();
$(".form-control-static").empty();
//获取用户数据
get_edit_user($(this).attr("edit_id"))
//获取用户类型数据
get_usertype("#edit_utId_select");
$("#edit_user_model").modal({
backdrop:"static"
});
});
由于编辑模态框与新增模态框区别不大,在此不再给出,具体可查看源代码。回显数据需要向服务器请求数据后再把数据添加到表单中
前端发送请求代码
/**
* 根据id获取用户信息回显到编辑模态框
*/
function get_edit_user(id){
$.ajax({
url:"${APP_PATH}/getuser/"+id,
type:"GET",
success:function(data){
var user = data.reldata.user;
$("#edit_save_user").attr("edit_userId",user.userId);
$(".form-control-static").append(user.userName);
$("#edit_user_form input[name=gender]").val([user.gender]);
$("#edit_email").val(user.email);
$("#edit_utId_select").val([user.utId]);
}
});
}
回显数据的控制器实现
/**
* 根据id查询用户信息
* @param id
* @return
*/
@RequestMapping("/getuser/{id}")
@ResponseBody
public Msg getuserbyid(@PathVariable Integer id){
User user = userService.getuserbyid(id);
return Msg.success().add("user",user);
}
前端发送ajax请求把修改好的信息提交给服务器处理,关闭模态框,回到当前页
前端代码
/**
* 提交数据到服务器处理
*/
$("#edit_save_user").click(function(){
console.log("提交数据");
$.ajax({
url:"${APP_PATH}/user/" + $("#edit_save_user").attr("edit_userId"),
type:"PUT",
data:$("#edit_user_form").serialize(),
success: function(data){
//关闭模态框
$("#edit_user_model").modal("hide");
//返回当前页
get_emps($("#page_msg").attr("curr_page"));
}
});
});
ajax直接发送PUT请求需在web.xml配置文件中配置spring的过滤器HttpPutFormContentFilter
<filter>
<filter-name>httpPutFormContentFilterfilter-name>
<filter-class>org.springframework.web.filter.HttpPutFormContentFilterfilter-class>
filter>
<filter-mapping>
<filter-name>httpPutFormContentFilterfilter-name>
<url-pattern>/*url-pattern>
filter-mapping>
删除单条信息相对较简单,点击用户信息右侧的删除按钮,弹出提示,只要确定删除就会发送请求到服务器处理,处理完成就返回到当前分布页面
前端处理代码
//给删除按钮添加事件
$(document).on("click","#del_btn",function(){
//如果用户点击了确定就发送请求删除用户信息
if(confirm("确定要删除此用户吗")){
$.ajax({
url:"${APP_PATH}/user/" + $(this).attr("del_id"),
type: "DELETE",
success:function(data){
//如果删除成功返回当前页面
get_emps($("#page_msg").attr("curr_page"));
}
});
}
});
控制器处理代码
/**
* 根据id删除用户信息
* @param userId
* @return
*/
@RequestMapping(value = "/user/{userId}",method = DELETE)
@ResponseBody
public Msg deluser(@PathVariable Integer userId){
userService.deleteuserbyid(userId);
return Msg.success();
}
批量删除需先给用户信息添加复选框,并实现全选,部分选择等相关逻辑
添加复选框
//添加复选框
var checkboxTD = $(" ").append($("").attr("del_userId",item.userId).attr("del_username",item.userName));
在添加用户列表时添加复选框,同时给复选框设置自定义属性del_userId与del_username用于存取用户的id与用户名,以备后面删除时调用。
实现全选功能
//实现全选与全不选功能
$("#check_all").click(function(){
$(".check_user").prop("checked",$("#check_all").prop("checked"));
});
//当前分布所有用户信息被选中,全选按钮也要被选中
$(document).on("click",".check_user",function(){
$("#check_all").prop("checked",$(".check_user:checked").length == $(".check_user").length);
});
发送删除请求删除选中用户信息
前端发送请求实现
//点击右上角删除按钮删除选定的用户信息
$("#del_user_btn").click(function(){
var deluserId = "";
//遍历选中的复选框并存入变量deluserId
$.each($(".check_user:checked"),function(index,item){
deluserId += $(this).attr("del_userId")+"、";
});
//通过截取去掉最后多余的 - 号
deluserId = deluserId.substring(0,deluserId.length - 1);
console.log(deluserId);
if(deluserId.length > 0){
if(confirm("你确实要删除id为"+deluserId+"这些用户的信息吗?")){
//发送删除请求到服务器处理
$.ajax({
url:"${APP_PATH}/delselectuser/" + deluserId,
type:"DELETE",
success:function(date){
//返回当前页
get_emps($("#page_msg").attr("curr_page"));
//取消全选复选框选中
$("#check_all").prop("checked",false);
}
});
}
}
});
批量删除的业务逻辑代码实现
/**
* 根据id批量删除
* @param userIds
* @return
*/
public int delselecteuser(List<Integer> userIds){
UserExample userExample = new UserExample();
userExample.createCriteria().andUserIdIn(userIds);
return userMapper.deleteByExample(userExample);
}
批量删除的控制器代码实现
/**
* 根据id批量删除用户信息
* @param userIds
* @return
*/
@RequestMapping(value = "/delselectuser/{userIds}",method = DELETE)
@ResponseBody
public Msg delusers(@PathVariable String userIds){
List<Integer> list = new ArrayList<Integer>();
//截取用户id
String[] users = userIds.split("、");
//遍历截取后的用户id
for(String user:users){
//把截取后的id转换成Integer类型并添加到List中
list.add(Integer.parseInt(user));
}
//调用业务层的批量删除方法删除数据
userService.delselecteuser(list);
return Msg.success();
}
最终页面
至此项目要实现的功能基本完成项目源代码已开源到github仓库地址为UserManagement
如要查看项目全部内容请关注我的公众号pankangxiblog回复ssm获取