接上一节。
具体流程:我们在index.jsp在中,点击新增按钮,弹出添加员工信息模态框,同时,我们发送ajax请求从数据库中获取部门信息,新增时可以选择部门。输入完毕信息后,在发送请求完成保存操作。
首先是添加了模态框和add.js之后的index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>员工列表</title>
<%
pageContext.setAttribute("APP_PATH",request.getContextPath());
%>
<script type="text/javascript" src="${APP_PATH}/static/js/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js" ></script>
</head>
<body>
<!-- 模态框 -->
<div class="modal fade" id="empAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">员工添加</h4>
</div>
<div class="modal-body">
<!-- 新增表单 -->
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">empName</label>
<div class="col-sm-10">
<input type="text" name="empName" class="form-control" id="empName_add_input" placeholder="empName"/>
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">email</label>
<div class="col-sm-10">
<input type="text" name="email" class="form-control" id="email_add_input" placeholder="123@qq.com">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">gender</label>
<div class="col-sm-10">
<label class="radio-inline">
<input type="radio" name="gender" id="gender1_add_input" value="M" checked="checked"> 男
</label>
<label class="radio-inline">
<input type="radio" name="gender" id="gender2_add_input" value="F"> 女
</label>
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">deptName</label>
<div class="col-sm-4">
<select name="dId" class="form-control" id="dept_add_select"></select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" id="emp_save">保存</button>
</div>
</div>
</div>
</div>
<div class="container">
<!-- 标题 -->
<div class="row">
<div class="col-md-12">
<h1>SSM-CURD</h1>
</div>
</div>
<!-- 按钮-->
<div class="row">
<div class="col-md-4 col-md-offset-10">
<button class="btn btn-primary" id="emp_add_modal_btn">新增</button>
<button class="btn btn-danger">删除</button>
</div>
</div>
<!-- 表格 -->
<div class="row">
<div class="col-md-12">
<table class="table table-hover" id="emps_tables">
<thead>
<tr>
<th>#</th>
<th>epmName</th>
<th>gender</th>
<th>email</th>
<th>deptName</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-md-6" id="page_info_area">
</div>
<div class="col-md-6" id="page_nav_area">
</div>
</div>
</div>
<script type="text/javascript" src="${APP_PATH}/static/myjs/list.js" ></script>
<script type="text/javascript" src="${APP_PATH}/static/myjs/add.js" ></script>
</body>
</html>
add.js用于发送ajax请求。
然后是add.js中:
//点击新增弹出模态框
$("#emp_add_modal_btn").click(function(){
//发送ajax请求,查出部门信息显示下拉列表
//reset_form("#empAddModal form");
getDepts("#empAddModal select");
$("#empAddModal").modal({
backdrop:"static"
});
});
//查询所有部门信息
function getDepts(ele){
$(ele).empty();
$.ajax({
url:"/curd_ssm/depts",
type:"GET",
success:function(result){
//console.log(result);
$.each(result.extend.depts,function(){
var optionEle = $("<option></option>").append(this.deptName).attr("value",this.deptId);
optionEle.appendTo(ele);
});
}
});
}
$("#emp_save").click(function(){
alert($("#empAddModal form").serialize());
$.ajax({
url:"/curd_ssm/emp",
type:"POST",
data:$("#empAddModal form").serialize(),
success:function(result){
//关闭模态框,转到最后一页
$("#empAddModal").modal('hide');
to_page(totalRecord);
//alert(result.msg);
}
});
});
还要新建DeparmentController.java、DepartmentService、DepartmentServiceImpl用于获取部门信息,相关文件如下:
DepartmentController.java
package com.gong.curd.controller;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.gong.curd.bean.Department;
import com.gong.curd.service.DepartmentService;
import com.gong.curd.utils.Msg;
@Controller
public class DepartmentController {
@Autowired
private DepartmentService departmentService;
@ResponseBody
@RequestMapping("/depts")
public Msg getDepts() {
List<Department> list = departmentService.getAllDepts();
return Msg.success().add("depts", list);
}
}
DepartmentService.java
package com.gong.curd.service;
import java.util.List;
import com.gong.curd.bean.Department;
public interface DepartmentService {
public List<Department> getAllDepts();
}
DepartmentServiceImpl.java
package com.gong.curd.serviceImpl;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.gong.curd.bean.Department;
import com.gong.curd.dao.DepartmentMapper;
import com.gong.curd.service.DepartmentService;
@Service
public class DepartmentServiceImpl implements DepartmentService{
@Autowired
private DepartmentMapper departmentMapper;
public List<Department> getAllDepts() {
return departmentMapper.selectByExample(null);
}
}
最后我们需要修改EmployeeController.java
@ResponseBody
@RequestMapping(value="/emp",method=RequestMethod.POST)
public Msg saveEmp(Employee employee) {
employeeService.save(employee);
return Msg.success();
}
EmployeeService.java
public void save(Employee employee);
EmployeeServiceImpl.java
@Override
public void save(Employee employee) {
employeeMapper.insertSelective(employee);
}
启动服务器:点击新增按钮
输入相关信息:
点击保存:
相关信息成功被添加。下一节进行添加信息的相关验证。
天天呆在家,好无聊啊。。。。