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>
时间： 2024-10-04 09:23:28

SSM练手-增删改查-5-新增_Modal框搭建的相关文章

SSM练手-增删改查-5-修改员工信息

http 的post 和 get 方法确实很难区分,大多数的解释都是,如果是新建一条记录的话就用post,如果是更新一条记录的话就用put. 具体原因不阐述,下面主要介绍修改员工信息的方法. 后台端: 1 web.xml配置  使其能够接受PUT请求,且能够从PUT请求中获取数据. 1)直接发送PUT请求,数据无法封装,原因: * Tomcat:    * 1.将请求体中的数据,封装一个map.    * 2.request.getParameter("empName")就会从这个ma

SSM练手-增删改查-5-新增_保存员工信息

保存员工信息 1 后台保存到数据库: @RequestMapping(value = {"/emp/save"}, method = {RequestMethod.POST}) @ResponseBody public Msg addEmp(Employee employee){ employeeService.saveEmp(employee); return Msg.success(); } 2 前台发送AJAX请求: //保存员工信息 $("#emp_save_btn&

SpringBoot快速上手——《二》：SpringBoot集成SSM，实现增删改查功能

SpringBoot集成SSM,实现增删改查功能 github源码:https://github.com/xivinChen/SpringBoot 一.先介绍创建模块的另一种方式 1.点击Maven -> 勾选Create from archetype -> 选择 maven-archetype-quickstart 有时会需要点击 自动导入 2.工程目录 可以看到,这样创建的模块是相对干净的,需要我们手动的编写程序启动入口类.需要配置时还得创建配置文件.下一步见证. 3.完善模块 添加依赖,

在ASP.NET MVC4中实现同页面增删改查,无弹出框02,增删改查界面设计

在上一篇"在ASP.NET MVC4中实现同页面增删改查,无弹出框01,Repository的搭建"中,已经搭建好了Repository层,本篇就剩下增删改查的界面了......今天的阳光真特么好,写完本篇,好出去在阳光下溜溜狗.散散步什么的,正所谓文武之道一张一弛,走神了,进入正题. 首先是一个View Model,在这里定义验证规则,提交和保存数据的时候还必须和领域模型映射. using System; using System.ComponentModel.DataAnnotat

在ASP.NET MVC4中实现同页面增删改查,无弹出框01,Repository的搭建

通常,在同一个页面上实现增删改查,会通过弹出框实现异步的添加和修改,这很好.但有些时候,是不希望在页面上弹出框的,我们可能会想到Knockoutjs,它能以MVVM模式实现同一个页面上的增删改查,再辅以knockout.validation.js,还可以对Model进行验证.但knockout.validation.js与ASP.NET MVC本身的验证没有做到无缝对接,不能形成一个从客户端到服务端连贯.统一的验证解决方案.关于在ASP.NET MVC中使用Knockoutjs和knockout

idea增删改查之 新增

新增 <div class="panel panel-default"> <input type="button" class="btn btn-primary" onclick="addUser()" value="添加"> </div> addDia = null;//新增 function addStu(){ addDia =BootstrapDialog.show

基于maven+ssm的增删改查之maven环境的搭建

1.Maven插件的设置: Window->Preferences->Maven (1)installations : 指定Maven核心程序的位置.默认是插件自带的Maven程序,可以改为我们自己解压的那个. 点击add: 选择自己解压的maven的位置,点击finish.选择自己刚刚加入的: 点击apply--Apply and Close. (2)user settings : 指定Maven核心程序中 conf/settings.xml 文件的位置,进而获取本地仓库的位置. 选择我们自

20150113--PDO增删改查+封装PDO类

回顾 方法重写:是因为对象的访问会先去子类的类空间找,从而形成了对父类的覆盖. 继承链:类只能单继承,但是可以通过继承链来实现多继承 特殊类:final类和抽象类 接口:interface PHP重载:当访问一个权限不够或者不存在的属性或者方法的时候,会自动触发的魔术方法. 属性重载和方法重载 对象的保存和还原:serialize和unserialize(对应的类已经在内存:如果有资源属性必须进行重新加载资源),魔术方法(__sleep和__wakeup) 对象遍历:默认只能遍历public属性

bootstrap+Ajax+SSM(maven搭建)实现增删改查

https://www.jianshu.com/p/d76316b48e3e 源码: https://github.com/Ching-Lee/crud 功能点: 分页 数据校验 ajax Rest风格的URI:使用HTTP协议请求方式的动词,来表示对资源的操作(GET(查询),POST(新增),PUT(修改),DELETE(删除)) 技术点 基础框架-ssm 数据库mysql 前端框架-bootstrap 项目依赖 -Maven 分页 -pagehelper 逆向工程-Mybatis Gene