SSM练手-增删改查-5-新增_Modal框搭建

新增员工信息

实现图如下：

1 利用Bootstrap搭建大致页面

   <!--新增员工Model框-->
    <div class="modal fade" id="Emp_Add_Modal" tabindex="-1" role="dialog" aria-labelledby="Emp_Add_Modal_label">
        <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">
                        <div class="form-group">
                            <label for="empName" class="col-sm-2 control-label">empName:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="empName" id="empName" placeholder="empName">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="email" class="col-sm-2 control-label">email:</label>
                            <div class="col-sm-10">
                                <input type="email" class="form-control" name="emamil" id="email" placeholder="email">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">gender:</label>
                            <div class="col-sm-offset-2 col-sm-10">
                                <label class="radio-inline">
                                    <input type="radio" name="gender" id="gender1_input" checked="checked" value="M"> 男
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="gender" id="gender2_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" id="deptName_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">保存</button>
                </div>
            </div>
        </div>
    </div>

按钮：

<!-- 操作按钮 -->
        <div class="row">
            <div class="col-md-4 col-md-offset-8">
                <button class="btn btn-primary" id="emp_add_btn" data-toggle="modal" data-target="#Emp_Add_Modal">新增</button>
                <button class="btn btn-danger" id="emp_delete_btn">删除</button>
            </div>
        </div>

$("#emp_add_btn").click(function () {
            $('#Emp_Add_Modal').modal({
                backdrop:static,
                keyboard:true
            });
        });

2 查询出部门信息，并显示在Modal框中

后台返回部门信息的JSON串：DepartmentController.java:

package com.wgs.controller;

import com.wgs.domain.Department;
import com.wgs.domain.Msg;
import com.wgs.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.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.List;

/**
 * Created by GenshenWang.nomico on 2017/6/9.
 */
@Controller
public class DepartmentController {

    @Autowired
    DepartmentService departmentService;

    @RequestMapping(value = {"dept/deptList"}, method = {RequestMethod.GET})
    @ResponseBody
    public Msg getAllDepts(){
        List<Department> departmentList = departmentService.getAllDepartment();
        return Msg.success().add("depts", departmentList);
    }
}

发送AJAX请求获取JSON串，并且将部门信息显示在页面上：

$("#emp_add_btn").click(function () {
            getDeptName("#deptName_select");
            $('#Emp_Add_Modal').modal({
                backdrop:static,
                keyboard:true
            });
        });

        function getDeptName(ele) {

            $(ele).empty();
            $.ajax({
                url: "${APP_PATH}/dept/deptList",
                type: "GET",
                success: function (result) {
                    console.log(result);
                    //将信息显示到下拉列表中
                    $.each(result.extendInfo.depts,function () {
                        alert(1);
                        var optionEle = $("<option></option>").append(this.deptName).attr("value", this.deptId);
                        optionEle.appendTo(ele);
                    });
                }

            });

完整代码如下：

<%@ 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-1.12.4.min.js"></script>
    <link
            href="${APP_PATH }/static/bootstrap-3.3.7-dist/css/bootstrap.min.css"
            rel="stylesheet">
    <script
            src="${APP_PATH }/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>

    <!--新增员工Model框-->
    <div class="modal fade" id="Emp_Add_Modal" tabindex="-1" role="dialog" aria-labelledby="Emp_Add_Modal_label">
        <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">
                        <div class="form-group">
                            <label for="empName" class="col-sm-2 control-label">empName:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="empName" id="empName" placeholder="empName">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="email" class="col-sm-2 control-label">email:</label>
                            <div class="col-sm-10">
                                <input type="email" class="form-control" name="emamil" id="email" placeholder="email">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">gender:</label>
                            <div class="col-sm-offset-2 col-sm-10">
                                <label class="radio-inline">
                                    <input type="radio" name="gender" id="gender1_input" checked="checked" value="M"> 男
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="gender" id="gender2_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" id="deptName_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">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!--显示页面-->
    <div class="container">
        <!-- 标题 -->
        <div class="row">
            <div class="col-md-4">
                <h1>SSM练手项目-CRUD</h1>
            </div>
        </div>
        <!-- 操作按钮 -->
        <div class="row">
            <div class="col-md-4 col-md-offset-8">
                <button class="btn btn-primary" id="emp_add_btn" data-toggle="modal" data-target="#Emp_Add_Modal">新增</button>
                <button class="btn btn-danger" id="emp_delete_btn">删除</button>
            </div>
        </div>
        <!-- 表格 -->
        <div class="row">
            <div class="col-md-12">
                <table class="table table-hover" id="emps_table">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>empName</th>
                            <th>email</th>
                            <th>gender</th>
                            <th>deptName</th>
                            <th>Option</th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>

        <!-- 分页信息 -->
        <div class="row">
            <div class="col-md-6" id="page_info">

            </div>

            <div class="col-md-6" id="nav_pagination_info">

            </div>
        </div>

    </div>

    <script type="text/javascript">



        $(function(){
            //默认去首页
            to_page(1);
        })
        
        function to_page(pageNo) {
            $.ajax({
                url:"${APP_PATH}/emp/list2",
                data:"pageNo="+pageNo,
                type:"get",
                success:function (result) {
                    console.log(result);
                    //1、解析并显示员工数据
                    build_emps_table(result);
                    //2、解析并显示分页信息
                    build_page_info(result);
                    //3、解析显示分页条数据
                    build_page_nav(result);
                }
            });
        }
        
        function build_emps_table(result) {
            //清空表格
            $("#emps_table tbody").empty();
            var emps = result.extendInfo.pageInfo.list;
            $.each(emps, function (index, item) {
                var empIdTd = $("<td></td>").append(item.empId);
                var empNameTd = $("<td></td>").append(item.empName);
                var emailTd = $("<td></td>").append(item.eamil);
                var genderId = $("<td></td>").append(item.gender=="M"?"男":"女");
                var deptNameTd = $("<td></td>").append(item.department.deptName);
                var editBtn = $("<button></button>").addClass("btn btn-info btn-sm")
                                                    .append( $("<span></span>").addClass("glyphicon glyphicon-pencil")
                                                            .append("编辑"));
                var deleteBtn = $("<button></button>").addClass("btn btn-danger btn-sm")
                    .append( $("<span></span>").addClass("glyphicon glyphicon-trash")
                        .append("删除"));

                 $("<tr></tr>").append(empIdTd)
                     .append(empNameTd)
                     .append(emailTd)
                     .append(genderId)
                     .append(deptNameTd)
                     .append(editBtn)
                     .append(" ")
                     .append(deleteBtn)
                     .appendTo("#emps_table tbody");
            })
        }
        function build_page_info(result) {
            //清空
            $("#page_info").empty();
            var pageInfo = result.extendInfo.pageInfo;
            var curPage = pageInfo.pageNum;
            var pages = pageInfo.pages;
            var totalPages = pageInfo.total;
            $("#page_info").append(" 当前第"+curPage+"页,")
                            .append("共有"+ pages +"页,")
                            .append("总共"+ totalPages + "条记录数");
        }
        function build_page_nav(result) {
            //清空
            $("#nav_pagination_info").empty();
            var nav = $("<nav></nav>");
            var ul = $("<tr></tr>").addClass("pagination");
            //首页、上一页
            var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href", "#"));
            var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;"));
            //首页禁止点击，并且不显示数据
            if(result.extendInfo.pageInfo.hasPreviousPage == false){
                firstPageLi.addClass("disabled");
                prePageLi.addClass("disabled");
            }else {
                //首页，上一页添加事件，显示对应页码数据
                firstPageLi.click(function () {
                    to_page(1)
                });
                prePageLi.click(function () {
                    to_page(result.extendInfo.pageInfo.pageNum-1);
                });
            }
            //末页、下一页
            var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href", "#"));
            var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));
            //末页禁止点击，并且不显示数据
            if(result.extendInfo.pageInfo.hasNextPage == false){
                lastPageLi.addClass("disabled");
                nextPageLi.addClass("disabled");
            }else{
                //末页，下一页添加事件，显示对应页码数据
                lastPageLi.click(function () {
                    to_page(result.extendInfo.pageInfo.pages);
                });
                nextPageLi.click(function () {
                    to_page(result.extendInfo.pageInfo.pageNum + 1);
                });
            }

            ul.append(firstPageLi).append(prePageLi);

            //1,2,3,4,5页码显示
            $.each(result.extendInfo.pageInfo.navigatepageNums, function (index, item) {
                var numLi = $("<li></li>").append($("<a></a>").append(item));
                if(result.extendInfo.pageInfo.pageNum == item){
                    numLi.addClass("active");
                }
                //点击页码跳转到对应页码并显示对应数据
                numLi.click(function(){
                    to_page(item);
                });
                ul.append(numLi);
            })

            ul.append(nextPageLi).append(lastPageLi);
            nav.append(ul);
            $("#nav_pagination_info").append(nav);
        }

        $("#emp_add_btn").click(function () {
            getDeptName("#deptName_select");
            $('#Emp_Add_Modal').modal({
                backdrop:static,
                keyboard:true
            });
        });

        function getDeptName(ele) {

            $(ele).empty();
            $.ajax({
                url: "${APP_PATH}/dept/deptList",
                type: "GET",
                success: function (result) {
                    console.log(result);
                    //将信息显示到下拉列表中
                    $.each(result.extendInfo.depts,function () {
                        alert(1);
                        var optionEle = $("<option></option>").append(this.deptName).attr("value", this.deptId);
                        optionEle.appendTo(ele);
                    });
                }

            });
        }


    </script>

</body>
</html>