ssm整合开发项目实践终结篇

本文为《ssm整合开发项目实践》项目的最终篇，本章节主要介绍项目的修改与删除功能，其中包括单条删除与批量删除，若要了解新增与查询所有用户信息可以查看往期文章，您可以也关注我的公众号pankangxiblog回复ssm获取全部项目文章。

编辑功能实现

1.实现编辑按钮弹出编辑模态框

由于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"
    });
});

2.实现当前用户的信息回显到模态框

由于编辑模态框与新增模态框区别不大，在此不再给出，具体可查看源代码。回显数据需要向服务器请求数据后再把数据添加到表单中
前端发送请求代码

/**
   * 根据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

<!--  配置支持直接put请求过滤器-->
<filter>
  <filter-name>httpPutFormContentFilter</filter-name>
  <filter-class>org.springframework.web.filter.HttpPutFormContentFilter</filter-class>
</filter>
<filter-mapping>
  <filter-name>httpPutFormContentFilter</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapping>

删除功能实现

1.删除单条信息

删除单条信息相对较简单，点击用户信息右侧的删除按钮，弹出提示，只要确定删除就会发送请求到服务器处理，处理完成就返回到当前分布页面
前端处理代码

//给删除按钮添加事件
$(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();
}

2.批量删除

批量删除需先给用户信息添加复选框，并实现全选，部分选择等相关逻辑
添加复选框

//添加复选框
var checkboxTD = $("<td></td>").append($("<input type='checkbox' class='check_user'/>").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获取
           

关注我的公众号回复ssm获取项目全部内容