CRUD jsp页面源码

最新推荐文章于 2024-08-08 13:59:38 发布

vincents_deng

最新推荐文章于 2024-08-08 13:59:38 发布

阅读量524

点赞数

分类专栏： CRUD与分页页面

本文链接：https://blog.csdn.net/application_context/article/details/81154368

版权

CRUD与分页页面专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文展示了如何使用JSP实现CRUD（创建、读取、更新、删除）操作的用户界面。内容包括一个用于修改员工信息的模态框和一个用于添加新员工的模态框，涉及表单、验证、AJAX请求等元素。

摘要由CSDN通过智能技术生成

<%@ 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>Latest catering system</title>

<%
   pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

<link
   href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
   rel="stylesheet">
<script
   src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="modal fade" id="empUpdateModal" 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">员工修改</h4>
               </div>
               <div class="modal-body">
                   <form class="form-horizontal">
                       <div class="form-group">
                           <label class="col-sm-2 control-label">empName</label>
                           <div class="col-sm-10">
                               <p class="form-control-static" id="empName_update_static"></p>
                                   <span class="help-block"></span>
                           </div>
                       </div>
                       <div class="form-group">
                           <label class="col-sm-2 control-label">email</label>
                           <div class="col-sm-10">
                               <input type="text" class="form-control" name="email"
                                   id="email_update_input" placeholder="email@aamail.com)">
                                   <span class="help-block"></span>
                           </div>
                       </div>
                       <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_update_input" value="M"
                                   checked="checked"> 男
                               </label> <label class="radio-inline"> <input type="radio"
                                   name="gender" id="gender2_update_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_update_btn">修改</button>
               </div>
           </div>
       </div>
   </div>

<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">×</span>
                   </button>
                   <h4 class="modal-title" id="myModalLabel">员工添加</h4>
               </div>
               <div class="modal-body">
                   <form class="form-horizontal">
                       <div class="form-group">
                           <label class="col-sm-2 control-label">empName</label>
                           <div class="col-sm-10">
                               <input type="text" class="form-control" name="empName"
                                   id="empName_add_input" placeholder="empName">
                                   <span class="help-block"></span>
                           </div>
                       </div>
                       <div class="form-group">
                           <label class="col-sm-2 control-label">email</label>
                           <div class="col-sm-10">
                               <input type="text" class="form-control" name="email"
                                   id="email_add_input" placeholder="email@aamail.com)">
                                   <span class="help-block"></span>
                           </div>
                       </div>
                       <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="checked"> 男
                               </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" id="depts_add_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" id="save_emp_btn">新增</button>
               </div>
           </div>
       </div>
   </div>

   
   <div class="container">
       
       <div class="row">
           <div class="col-md-100 col-md-offset-1200">
               <div class="bg-primary">
                   <h1>Latest system</h1>
               </div>
           </div>
       </div>
       
           <div class="col-md-4 col-md-offset-10">
               <button class="btn btn-success" id="emp_add_modal">新增</button>
               <button class="btn btn-danger" id="emp_delete_all_btn">批量删除</button>
           </div>
       </div>
       
       <div class="row">
           <div class="col-md-12">
               <table class="table table-hover" id="emps_table">
                   <thead>
                       <tr>
                       <th><input type="checkbox" id="check_all"/></th>
                           <th>empId</th>
                           <th>empName</th>
                           <th>gender</th>
                           <th>email</th>
                           <th>deptName</th>
                           <th>操作</th>
                       </tr>
                   </thead>
                   
                   <tbody>
                   

                   </tbody>
               </table>
           </div>
       </div>
       
       <div class="row">
           
           <div class="col-md-6" id="page_info_area"></div>
           
           <div class="col-md-6" id="page_nav_area"></div>
       </div>
   </div>
   <script type="text/javascript">
   var totalRecord,currentPage;
       //页面加载完成以后，用ajax请求跳到另一个页面
       $(function() {
           //第一页
           to_page(1);

       });
       function to_page(pn) {
           $.ajax({
               url : "${APP_PATH}/emps",
               data : "pn=" + pn,
               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.extend.pageInfo.list;
           //each方法传入第一个要遍历的元素emps;回调涵数就这个function第一个元素就索引，第二个参数为当前传入的对象
           $.each(emps, function(index, item) {
               //显示员工的数据 :alert(item.empName);
           var checkboxTd = $("<td><input type='checkbox' class='check_item'/></td>");
               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);

               var editBtn = $("<button></button>").addClass(
                       "btn btn-primary btn-sm edit_btn").append(
                       $("<span></span>").addClass(
                               "glyphicon glyphicon-pencil edit_btn")).append("编辑");
               //为编辑按钮添加一个自定义的员工属性id
               editBtn.attr("edit-id",item.empId);
               var delBtn = $("<button></button>").addClass(
                       "btn btn-danger btn-sm delete_btn").append(
                       $("<span></span>")
                               .addClass("glyphicon glyphicon-trash delete_btn")).append(
                       "删除");
               //为删除按钮添加一个自定义的员工属性id
               delBtn.attr("delete_btn",item.empId);
               var tdBtn = $("<td></td>").append(editBtn).append(" ").append(
                       delBtn);
               //append:方法执行完成以后还是返回原因来的素质
               $("<tr></tr>").append(checkboxTd).append(empIdTd).append(empNameTd).append(
                       genderTd).append(emailTd).append(deptNameTd).append(
                       tdBtn).appendTo("#emps_table tbody");

           })
       }
       //解析显示分页信息
       function build_page_info(result) {
           $("#page_info_area").empty();
           $("#page_info_area").append(
                   "当前" + result.extend.pageInfo.pageNum + "页,总"
                           + result.extend.pageInfo.pages + "页,总"
                           + result.extend.pageInfo.total + "条记录.");
           totalRecord = result.extend.pageInfo.total;
           currentPage = result.extend.pageInfo.pageNum;
       }
       //解析显示分页条
       function build_page_nav(result) {
           $("#page_nav_area").empty();
           var ul = $("<ul></ul>").addClass("pagination");
           //下一页面与首页
           var pagefirst = $("<li></li>").append(
                   $("<a></a>").append("首页").attr("href", "#"));
           var prepage = $("<li></li>").append($("<a></a>").append("«"));
           //第一页面禁用
           if (result.extend.pageInfo.hasPreviousPage == false) {
               pagefirst.addClass("disabled");
               prepage.addClass("disabled");
           } else {
               pagefirst.click(function() {
                   to_page(1);
               });
               prepage.click(function() {
                   to_page(result.extend.pageInfo.pageNum - 1);
               });
           }
           //下一页面与尾页
           var nextpage = $("<li></li>")
                   .append($("<a></a>").append("»"));
           var pagelast = $("<li></li>").append(
                   $("<a></a>").append("尾页").attr("href", "#"));
           //最后一页面禁用
           if (result.extend.pageInfo.hasNextPage == false) {
               nextpage.addClass("disabled");
               pagelast.addClass("disabled");
           } else {
               nextpage.click(function() {
                   to_page(result.extend.pageInfo.pageNum + 1);
               });
               pagelast.click(function() {
                   to_page(result.extend.pageInfo.pages);
               });
           }

           //添加首先和前一页提示
           ul.append(pagefirst).append(prepage);
           //1,2,3遍历ul中添加页码提示
           $.each(result.extend.pageInfo.navigatepageNums, function(index,
                   item) {
               var nums = $("<li></li>").append($("<a></a>").append(item));
               if (result.extend.pageInfo.pageNum == item) {
                   nums.addClass("active");
               }
               nums.click(function() {
                   to_page(item);
               });
               ul.append(nums);
           });
           //添加下一页和尾页的提示
           ul.append(nextpage).append(pagelast);
           //把ul加入到nav
           var nav = $("<nav></nav>").append(ul);
           nav.appendTo("#page_nav_area");

       }
       //清空表单样式内容
       function reset_form(ele){
           $(ele)[0].reset();
           $(ele).find("*").removeClass("has-success has-error");
           $(ele).find(".help-block").text("");
       }

       //点击按钮弹出模态框
       $("#emp_add_modal").click(function() {
           //清除表单中的数据，（表单完全重置）
           reset_form("#empAddModal form");
           //$("#empAddModal form")[0].reset();

           //发送ajax请求，查到部门信息在下拉框列表中
           getDepts("#empAddModal select");

           //弹出模态框
           $("#empAddModal").modal({
               backdrop : "static"
           });
       });
       //查到所有部门的信息显示下拉框中
       function getDepts(ele){
           $(ele).empty();
           $.ajax({
               url:"${APP_PATH}/depts",
               type:"Get",
               success:function(result){
                   //console.log(result);
                   $.each(result.extend.depts,function(){
                       var option =$("<option></option>")
                       .append(this.deptName).attr("value",this.deptId);
                       option.appendTo(ele);
                   });
               }
           });
       }
       //校验表单数据
       function validata_add_form(){
           //拿到校验数据，使用正则表达
           var empName=$("#empName_add_input").val();
           var regName= /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})/;
           if(!regName.test(empName)){
               //alert("中文为2-5位或者英文6-16字母的组合！");
               //$("#empName_add_input").parent().addClass("has-error");
               //$("#empName_add_input").next("span").text("中文为2-5位或者英文6-16字母的组合！");
               show_validata_msg("#empName_add_input","error","中文为2-5位或者英文6-16字母的组合！");
               return false;
           }else{
               //$("#empName_add_input").parent().addClass("has-success");
               //$("#empName_add_input").next("span").text(" ");
               show_validata_msg("#empName_add_input","success","");
           }
           var email=$("#email_add_input").val();
           var regEmail= /^([a-z0-9_\.-]+)@([\da-z\.]{2,6})$/;
           if(!regEmail.test(email)){
               //alert("邮箱格式错误！");
               //应该对之前的数据清空
               //$("#email_add_input").parent().addClass("has-error");
               //$("#email_add_input").next("span").text("邮箱格式错误！");
               show_validata_msg("#email_add_input","error","邮箱格式错误！");
               return false;
           }else{
               //$("#email_add_input").parent().addClass("has-success");
               //$("#email_add_input").next("span").text(" ");
               show_validata_msg("#email_add_input","success","");
           }
           return true;
       }
       //提取l输入框的校验逻辑
       function show_validata_msg(ele,status,msg){
           //清空校验数据
           $(ele).parent().removeClass("has-success has-error");
           $(ele).next("span").text("");
           if("success"==status){
               $(ele).parent().addClass("has-success");
               $(ele).next("span").text(msg);
           }else if("error"==status){
               $(ele).parent().addClass("has-error");
               $(ele).next("span").text(msg);

           }
       }
       //校验用户名是否可用
       $("#empName_add_input").change(function(){
           //发送ajax请求验证用户名是否相同
           var empName = this.value;
           $.ajax({
               url:"${APP_PATH}/checkuser",
               type:"POST",
               data:"empName="+empName,
               success: function(result){
                   if(result.code==1000){
           show_validata_msg("#empName_add_input","success","用户名可用！");
           $("#save_emp_btn").attr("ajax-va","success");
                   }else{
       show_validata_msg("#empName_add_input","error",result.extend.va_msg);
       $("#save_emp_btn").attr("ajax-va","error");
                   }
               }
           });
       });

       $("#save_emp_btn").click(function(){
           //1.模态框填写的表单提交给服务顺
           //1.2先对提交到服务器的数据进行校验
           if(!validata_add_form()){
               return false;
           }
           //判断之前ajax请求用户名校验是否成功！成功才往提交from表单
           if($(this).attr("ajax-va")=="error"){
               return false;
           }
           //2.发送ajax请求保存员工
           $.ajax({
               url:"${APP_PATH}/saveEmps",
               type:"POST",
               data:$("#empAddModal form").serialize(),
               success:function(result){
                   //attr(result.msg);
                   if(result.code==1000){
                       $("#empAddModal").modal('hide');
                       to_page(totalRecord);
                   }else{
                       //console.log(result);
                       if(undefined != result.extend.errorFields.email){
                           //显示邮箱的错误信息
                           show_validata_msg("#email_add_input","error",result.extend.errorFields.email);
                       }
                       if(undefined != result.extend.errorFields.empName){
                           //显示用户的错误信息
                           show_validata_msg("#empName_add_input","error",result.extend.errorFields.empName);
                       }
                   }

               }

           });

       });
       //1.我们在按钮创建之前就绑定了click,所以绑不上
       //1.1.可以在按钮创建之前去绑定，绑定点击live() jquery新版没有live(),可使用on()替代
       $(document).on("click",".edit_btn",function(){
           //alert("修改");确定绑定
           //1.查出(部门)信息，
           getDepts("#empUpdateModal select");
           //2.并显示列表
           $("#empUpdateModal").modal({
               backdrop:"static"

           });
           //3.查出(员工)信息
           getEmp($(this).attr("edit-id"));
           //4.模态框传入一个id给更新按钮
           $("#emp_update_btn").attr("edit-id",$(this).attr("edit-id"));

       });
       //3.查出(员工)信息
       function getEmp(id){
           $.ajax({
               url:"${APP_PATH}/emp/"+id,
               type:"GET",
               success:function(result){
                   //console.log(result);
                   //获取到结果集
                   var empData = result.extend.emp;
                   $("#empName_update_static").text(empData.empName);
                   $("#email_update_input").val(empData.email);
                   $("#empUpdateModal input[name=gender]").val([empData.gender]);
                   $("#empUpdateModal select").val([empData.dId]);
               }
           });
       }
       //点击更新，提交修改员工信息,邮箱校验
       $("#emp_update_btn").click(function(){
           var email=$("#email_update_input").val();
           var regEmail=/^([a-z0-9_\.-]+)@([\da-z\.]{2,6})$/;
           if(!regEmail.test(email)){
               show_validata_msg("#email_update_input","error","邮箱格式错误！");
               return false;
           }else{
               show_validata_msg("#email_update_input","success","");
           }
           //发送ajax请求保存修改后的数据
           $.ajax({
               url:"${APP_PATH}/emp/"+$(this).attr("edit-id"),
               type:"POST",
               data:$("#empUpdateModal form").serialize()+"&_method=PUT",
               success:function(result){
               //alert(result.msg);
               //1.关闭对话框
               $("#empUpdateModal").modal('hide');
               //2.回到本页面
               to_page(currentPage);
               }
           });
       });
       //单个删除
       $(document).on("click",".delete_btn",function(){
           //弹出删除框
           var empName = $(this).parents("tr").find("td:eq(2)").text();
           //拿到当前ID
           var empId = $(this).attr("delete_btn");
           //alert($(this).parents("tr").find("td:eq(1)").text());
           if(confirm("你确定要删除【"+empName+"】吗 ?")){
               //确定删除
               $.ajax({
                   url:"${APP_PATH}/emp/"+empId,
                   type:"DELETE",
                   success:function(result){
                       //alert(result.msg);
                       //回到本页面
                       to_page(currentPage);
                   }
               });

           }

       });
       $("#check_all").click(function(){
           //我们原生的dom原生的属性，attr获取自定义属性值
           //我们可以用prop修改和读取dom原生的值
           $(".check_item").prop("checked",$(this).prop("checked"));
       });

           $(document).on("click",".check_item",function(){
               //判断当前选择中的元素
               var flag = $(".check_item:checked").length== $(".check_item").length;
               $("#check_all").prop("checked",flag);
           });
           //1.多选删除事件,点击批量删除
       $("#emp_delete_all_btn").click(function(){
           //2.要遍历当前被选的元素
           var empNames ="";
           var del_idstr ="";
           $.each($(".check_item:checked"),function(){
               empNames +=$(this).parents("tr").find("td:eq(2)").text()+",";
               //组装员工id字符串
               del_idstr +=$(this).parents("tr").find("td:eq(1)").text()+"-";
           });

           //3.去除逗号
           empNames =empNames.substring(0, empNames.length-1);
           //去除“-”
           del_idstr =del_idstr.substring(0, del_idstr.length-1);
           if(confirm("确定要删除【"+empNames+"】吗？")){
               //确认后发送ajax请求
               $.ajax({
                   url:"${APP_PATH}/emp/"+del_idstr,
                   type:"DELETE",
                   success:function(result){
                       //alert(result.msg);
                       //回到本页面
                       to_page(currentPage);
                   }
               });
           }
       });

   </script>
</body>
</html>