新增
分析：
在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("path",request.getContextPath()); %> <!-- 推荐以 / 开始的相对路径（以服务器的根路径为相对路径） --> <link href="${path}/static/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <!-- 先引入jQuery，再引入js --> <script type="text/javascript" src="${path}/static/bootstrap/js/jquery.min.js"> </script> <script src="${path}/static/bootstrap/js/bootstrap.min.js"></script> </head> <body> <!-- 员工新增模态框 --> <div class="modal fade" id="addEmpModal" 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="input_empName" class="col-sm-2 control-label">empName</label> <div class="col-sm-10"> <input type="text" name="empName" class="form-control" id="input_empName" placeholder="empName"> </div> </div> <!-- 输入员工邮箱 --> <div class="form-group"> <label for="input_email" class="col-sm-2 control-label">email</label> <div class="col-sm-10"> <input type="text" name="email" class="form-control" id="input_email" placeholder="email"> </div> </div> <!-- 选择员工性别 --> <div class="form-group"> <label class="col-sm-2 control-label">gender</label> <div class="col-sm-2"> <div class="radio"> <label> <input type="radio" name="gender" id="input_gender" value="M" checked> 男 </label> </div> <div class="radio"> <label> <input type="radio" name="gender" id="input_gender" value="F"> 女 </label> </div> </div> </div> <!-- 部门名称 --> <div class="form-group"> <label class="col-sm-2 control-label">deptName</label> <div class="col-sm-2"> <!-- 部门名称是变动的，这里保存员工是只保存ID的形式 --> <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">保存</button> </div> </div> </div> </div> <div class="container"> <!-- 分为四大行 --> <!-- 标题 --> <div class="row"> <div class="col-md-12"> <font size="20">SSM-CRUD</font> </div> </div> <!-- 按钮 --> <div class="row"> <!-- 偏移4列 --> <div class="col-md-4 col-md-offset-8"> <button type="button" class="btn btn-primary" id="addBtn_modal">新增</button> <button type="button" class="btn btn-danger ">删除</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>empEmail</th> <th>gender</th> <th>deptName</th> <th>操作</th> </tr> </thead> <tbody> </tbody> </table> </div> </div> <!-- 分页信息 --> <div class="row"> <!-- 分页文字信息，其中分页信息都封装在pageInfo中 --> <div class="col-md-6" id="page_info"> </div> <!-- 分页条 --> <div class="col-md-6" id="page_nav"> </div> </div> </div> <script type="text/javascript"> //页面加载完成后直接发送ajax请求，取得分页数据 $(function(){ //加载完页面就通过这个函数发ajax请求 toPage(1); }); //跳转到某页的函数 function toPage(pn){ $.ajax({ //请求方式 type : "GET", //请求url url : "${path}/emps", //请求要带的数据 data :"pn="+pn, //请求成功的回调函数 success : function(result) { //1.解析JSON返回员工数据 build_emps_table(result); //2.解析生成分页信息(分页条与分页导航) build_pages_info(result); build_pages_nav(result); } }); } //解析员工数据 function build_emps_table(result){ //清空表格数据 $("#emps_table tbody").empty(); //员工数据 var emps = result.map.pageInfo.list; //使用jQuery遍历数组，遍历的是取出来的json数组，可以通过开发工具查看JSON结构 $.each(emps,function(idx,item){ //使用jQuery生成各列 var empIdTd = $("<td></td>").append(item.empId); var empNameTd = $("<td></td>").append(item.empName); //三目运算符处理性别 var genderTd = $("<td></td>").append(item.gender=="M"?"男":"女"); var emailTd = $("<td></td>").append(item.email); var deptNameTd = $("<td></td>").append(item.department.deptName); //添加操作按钮，通过jQuery的一些操作（例如CSS的追加CSS操作），完成按钮的构建 var editBtn = $("<button></button>").addClass("btn btn-info btn-sm") .append($("<span></span>").addClass("glyphicon glyphicon-pencil")) .append("编辑"); var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm") .append($("<span></span>").addClass("glyphicon glyphicon-trash")) .append("删除"); var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn); //链式操作完成列的添加（链式操作由于jQuery返回的是原元素） $("<tr></tr>").append(empIdTd) .append(empNameTd) .append(genderTd) .append(emailTd) .append(deptNameTd) .append(deptNameTd) .append(btnTd) .appendTo($("#emps_table tbody")); }); } //生成分页信息 function build_pages_info(result){ //清空分页数据 $("#page_info").empty(); //当前页 var currentPage = result.map.pageInfo.pageNum; //总页数 var totalPage = result.map.pageInfo.pages; //总记录数 var totalCount = result.map.pageInfo.total; $("#page_info").append("当前第："+currentPage+"页，"+"总共："+totalPage+"页，"+"总共："+totalCount+"条记录"); } //生成分页导航信息 function build_pages_nav(result){ //清空分页导航信息 $("#page_nav").empty(); //导航条外层的Ul var navUl = $("<ul></ul>").addClass("pagination"); //首页 var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href","#")); //前一页 var prePageLi = $("<li></li>").append($("<a></a>").append("«")); //判断是否有首页 if(result.map.pageInfo.hasPreviousPage == false){ firstPageLi.addClass("disabled"); prePageLi.addClass("disabled"); }else{ //添加首页和前一页翻页的单机事件 firstPageLi.click(function(){ toPage(1); }); prePageLi.click(function(){ toPage(result.map.pageInfo.pageNum-1); }); } //后一页 var nextPageLi = $("<li></li>").append($("<a></a>").append("»")); //末页 var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href","#")); //判断是否有末页 if(result.map.pageInfo.hasNextPage == false){ lastPageLi.addClass("disabled"); nextPageLi.addClass("disabled"); }else{ //添加末页和后一页翻页的单机事件 lastPageLi.click(function(){ toPage(result.map.pageInfo.pages); }); nextPageLi.click(function(){ toPage(result.map.pageInfo.pageNum+1); }); } //添加到ul navUl.append(firstPageLi).append(prePageLi); //遍历页码数 $.each(result.map.pageInfo.navigatepageNums,function(idx,item){ var numLi = $("<li></li>").append($("<a></a>").append(item)); //如果当前页为正在遍历的页，则高亮显示，采用增加类的方法完成 if(result.map.pageInfo.pageNum == item){ numLi.addClass("active"); } //给每个页码添加单击绑定事件 numLi.click(function(){ toPage(item); }); navUl.append(numLi); }); //li加入ul，ul加入nav navUl.append(nextPageLi).append(lastPageLi); var navEle = $("<nav></nav>").append(navUl); $("#page_nav").append(navEle); } //增加员工的事件 $("#addBtn_modal").click(function(){ $('#addEmpModal').modal({ backdrop:false }); }); </script> </body> </html>