首页 » 技术分享 » 【依葫芦画瓢】SSM-CRUD --- 4

【依葫芦画瓢】SSM-CRUD --- 4

　
评论关闭　1,017次浏览

继续上一篇的讲解【依葫芦画瓢】SSM-CRUD --- 3


概要：

  1. 实现员工信息修改功能；

  2. 删除单个员工信息；

  3. 批量删除员工信息；


老规矩，index.jsp已上传，在文后有链接，先上效果图：

一、实现员工信息修改功能

点击“编辑”按钮，弹出修改用户的模态框（显示用户信息）；点击模态框中“更新”按钮，完成用户修改，显示当前页。

1、设置修改模态框

    1.1 将按钮绑定click事件，功能类似“新增”按钮；

2、 回显员工信息。

    2.1 获取员工信息前将员工id设置在编辑按钮的id属性上，

    2.2 设置部门列表，注意在请求数据前清空原有数据；

    2.3 将员工姓名栏设置为静态控件；

    2.4 ajax获取员工数据，显示到模态框中。

// 绑定修改事件
$(document).on("click",".update_btn",function(){
     // 1、设置部门下拉框
     dept_select("#empUpdateModal select");
     
     var editId = $(this).attr("edit_id");

     // 2、获取并设值员工数据
     getEmp(editId);
     
     // 3、将ID设值到更新按钮中，用于数据更新
     $("#emp_update_btn").attr("edit_id", editId);

     //弹出模态框
     $("#empUpdateModal").modal({
       backdrop:"static"
     });
})
   
// 获取员工数据
function getEmp(id){
 $.ajax({
     url : "${APP_PATH}/emp/" + id,
     type : "GET",
     success : function(result){
       empData = result.extend.employee;
         /* alert(empData.empName); */
         // 设值
         $("#empName_update_input").text(empData.empName);
         $("#email_update_input").val(empData.email);
         $("#empUpdateModal input[name=gender]").val([empData.gender]);
         $("#empUpdateModal select").val([empData.dId]);
       }
   });
};

3 、更新员工信息。

3.1 绑定“更新”事件

3.2 更新时jQuery校验邮箱

3.3 更新逻辑实现，发送ajax请求，更新数据，关闭模态框。

注意点：

bug：ajax发送PUT请求时，请求体中有数据，但对象封装中无数据

原因：Tomcat在接收PUT请求时，不会将请求体中的数据封装成map，只有通过POST形式的请求才能获取到数据

源码解析：apache-tomcat-8.5.24-src\java.org.apache.catalina.connector.Request--parseParameters()（3170行左右）：

if( !getConnector().isParseBodyMethod(getMethod()) ) {
   success = true;
   return;
}
Connector.java中默认定义请求方式
protected String parseBodyMethods = "POST";

解决方案：

①配置HttpPutFormContentFilter，将请求体中的数据解析包装成一个map，request被重新包装，request.getParameter()被重写，就会从自己封装的map中取数据

②在ajax请求时，发送POST请求，在data的数据后加"&_method=PUT"，不推荐

二、删除单个员工信息

1. 绑定“删除”按钮事件；

2. 获取员工姓名和ID，弹出提示框；

3. 执行删除逻辑，删除成功，回到本页。

三、批量删除员工信息

1. 首先在ID列前添加可选框列，注：获取原生dom属性的值用prop，attr用于获取自定义属性的值；

2. js实现可选框全选/全不选逻辑，实现可参考文后index.jsp页面；

3. 前台将要删除的id拼接，后台实现批量删除逻辑。

/**
  * 批量删除员工
  * 
  * @param empIdList
  */
 public void deleteBatch(List<Integer> empIdList) {
   EmployeeExample example = new EmployeeExample();
   Criteria criteria = example.createCriteria();
   criteria.andEmpIdIn(empIdList);
   employeeMapper.deleteByExample(example);
 }


写在最后

①index页面：https://gitee.com/tyronchen/ssm-crud/blob/master/index0113.jsp

②仔细看动图的人应该发现：动图开头是我本地搭建的hexo的博客，下一步就是将本地服务搭建到服务器上，然后再将tyronblog.com备案，敬请期待。

③元旦+南京happy将我的学习计划打乱，现在终于调整到位，fighting！

转载自原文链接, 如需删除请联系管理员。

原文链接：【依葫芦画瓢】SSM-CRUD --- 4，转载请注明来源！

赞 0