首页 > 代码库 > SSM练手-增删改查-5-新增_Modal框搭建
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">×</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">×</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("«")); //首页禁止点击，并且不显示数据 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("»")); //末页禁止点击，并且不显示数据 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>
SSM练手-增删改查-5-新增_Modal框搭建
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。