SSM整合-创建员工新增的模态框

模态框使用bootstrap提供的:

<%--员工添加的模态框--%>
<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">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">员工添加</h4>
            </div>
            <div class="modal-body">
                <%--表单--%>
                <form class="form-horizontal">
                    <%--empName--%>
                    <div class="form-group">
                        <label for="empName_add_input" 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">
                        </div>
                    </div>
                    <%--email--%>
                    <div class="form-group">
                        <label for="email_add_input" 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="[email protected]">
                        </div>
                    </div>
                    <%--gender--%>
                    <div class="form-group">
                        <label 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="ture"> 男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="gender2_add_input" value="F"> 女
                            </label>
                        </div>
                    </div>
                    <%--部门信息从数据库中取出--%>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">deptName</label>
                        <div class="col-sm-4">
                            <select class="form-control" name="dId">


                            </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_btn">保存</button>
            </div>
        </div>
    </div>

在js中为新增员工按钮添加点击事件:

    //点击新增按钮弹出模态框
    $("#emp_add_model_btn").click(function () {
        //发送ajax请求查出部门信息,显示在下拉列表中
        getDept();
        //打开模态框,.modal()里面的参数是模态框的属性设置
        $("#empAddModal").modal({
            /*backdrop:点击模态框背景能不能点击,true:能 static:不能*/
            backdrop: "static"
        })
    });

模态框弹出后要从数据库中把部门信息查询出来放到下拉列表中显示出来:

//查出所有的部门信息并显示在下拉列表中
    function getDept() {
        $("#empAddModal select").empty();
        $.ajax({
            url: "${APP_PATH}/dept",
            type: "get",
            success: function (result) {
                $.each(result.extend.depts, function (index, item) {
                    var option = $("<option></option>").append(item.deptName).attr("value", item.deptId);
                    option.appendTo("#empAddModal select")
                });
            }
        });
    }

控制器接收请求:

package com.atguigu.crud.controller;

import com.atguigu.crud.bean.Department;
import com.atguigu.crud.bean.Msg;
import com.atguigu.crud.service.DepartmentService;
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 java.util.List;

/**
 * 处理和部门有关的请求
 * @author nyh
 * @create 2018-08-23  13:26
 **/
@Controller
public class DepartmentController {

    @Autowired
    DepartmentService departmentService;

    //返回所有的部门信息
    @RequestMapping("/dept")
    @ResponseBody
    public Msg getDepts (){
        List<Department> depts = departmentService.getDepts();
        return Msg.success().add("depts",depts);
    }
}

DepartmentService处理请求并返回结果:

package com.atguigu.crud.service;

import com.atguigu.crud.bean.Department;
import com.atguigu.crud.dao.DepartmentMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

/**
 * @author nyh
 * @create 2018-08-23  13:29
 **/
@Service
public class DepartmentService {
    @Autowired
    DepartmentMapper departmentMapper;

    //查询所有部门
    public List<Department> getDepts(){
        List<Department> departments = departmentMapper.selectByExample(null);
        return departments;
    }
}

数据填写完成后点击保存按钮保存员工信息:

//模态框中保存按钮的点击事件
    $("#emp_save_btn").click(function () {
        //利用jQuery提供的方法序列化表单中的员工信息,序列化后的数据如下:
        //empName=nyh&email=nyh%40qq.com&gender=M&dId=2
        var shuju = $("#empAddModel form").serialize();
        //发送ajax请求保存员工
        $.ajax({
            url: "${APP_PATH}/addemp",
            tpye: "POST",
            data: shuju,
            success: function (result) {
                //员工保存成功
                //1.关闭模态框
                $("#empAddModel").modal('hide');
                //2.来到最后一页,显示刚才保存的数据,发送ajax请求显示最后一页
                //total是总记录数,总记录数肯定比总页数大,所以肯定是最后一页
                to_page(total);

            }
        });
    });

Controller层:

/**
     *新增员工的方法
     *因为传过来的表单数据的key(就是你表单input中设置的name值)值和Employee中的属性一样,所以可以自动封装
     */
    @RequestMapping(value = "/addemp",method = RequestMethod.POST)
    @ResponseBody
    public Msg addemp(Employee employee){
        employeeService.addemp(employee);
        return Msg.success();
    }

Service层:

//保存员工的方法
    public void addemp(Employee employee) {
        employeeMapper.insertSelective(employee);
    }

到这里员工新增的模态框就基本完成了,下一篇进行数据校验