點擊刪除的時候，要刪除聯系人，這里同點擊編輯按鈕一樣給刪除按鈕添加點擊事件的時候不能使用
$(".delete_btn").click(function(){
});
這種方式，因為上面的代碼是放在JavaScript代碼中執行的，在頁面加載完成之前JavaScript就執行完畢了，但是上面的兩個按鈕是在頁面加載完成之后，使用ajax獲得后台的數據之后創建的
意思是在執行JavaScript代碼的時候按鈕對象還為null
//給編輯按鈕添加點擊事件
$(document).on("click",".delete_btn",function(){
//首先需要獲得要刪除的聯系人的姓名如何獲得了
});
所以只能采用下面的這種方式
第二：第二刪除按鈕的時候需要彈出一個對話框，在對話框中顯示要刪除的聯系人的姓名，如何獲得了
我們可以看出btn的父親節點是tr節點，然后我們查找tr父節點下的第二個td節點對應的就是我們的名字
32、尚硅谷_SSM高級整合_刪除_刪除單一員工.avi
我們來看下代碼
EmployeeController.java
package com.atguigu.crud.controller; import java.util.HashMap; import java.util.List; import java.util.Map; import javax.validation.Valid; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.validation.BindingResult; import org.springframework.validation.FieldError; import org.springframework.web.bind.annotation.PathVariable; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.ResponseBody; import com.atguigu.crud.bean.Employee; import com.atguigu.crud.bean.Msg; import com.atguigu.crud.dao.EmployeeMapper; import com.atguigu.crud.service.EmployeeService; import com.github.pagehelper.PageHelper; import com.github.pagehelper.PageInfo; /** * * 處理員工的增刪改查操作 * */ @Controller public class EmployeeController { private static final Msg MSG = new Msg(); @Autowired private EmployeeService employeeService; /** * 負責將PageInfo對象轉化成json對象 * */ @RequestMapping("/emps") @ResponseBody public Msg getEmpsWithJson(@RequestParam(value="pn",defaultValue ="1") Integer pn) { //使用mybatis分頁插件 pn表示當前查詢的頁數，5表示每頁顯示第幾條 System.out.println("EmployeeController is called pn"+pn); PageHelper.startPage(pn, 5); //在PageHelper.startPage(pn, 5);后面的查詢語句就可以實現分頁查詢 List<Employee> list = employeeService.getAll(); //我們將查詢的結果封裝到PageInfo對象之中,5表示右下角導航欄的數目是5 PageInfo info = new PageInfo(list,5); Msg msg = MSG; msg.setCode(100); msg.setMsg("業務操作成功"); msg.getExtend().put("pageInfo", info); return msg; } /** * 這里一定要注意采用的resetful風格，請求方式必須是post * */ @RequestMapping(value="/save",method=RequestMethod.POST) @ResponseBody public Msg save(@Valid Employee employee,BindingResult result){ System.out.println("save is calle:"+employee.toString()); //這里首先要判斷用戶輸入的參數是否合法 Map<String,Object> err_map = new HashMap<String, Object>(); Msg msg = MSG; if(result.hasErrors()){ List<FieldError> errors = result.getFieldErrors(); for( FieldError error: errors){ System.out.println("錯誤的字段是："+error.getField()); System.out.println("錯誤的消息是："+error.getDefaultMessage()); err_map.put(error.getField(), error.getDefaultMessage()); } msg.setCode(200); msg.setMsg("員工保存失敗"); msg.getExtend().put("err_map", err_map); }else{ employeeService.save(employee); msg.setCode(100); msg.setMsg("保存員工數據成功"); } return msg; } @RequestMapping("/isUserExist") @ResponseBody public Msg isUserExist(@RequestParam("empName") String empName){ System.out.println("isUserExist is called:"+empName); Msg msg = MSG; Boolean exits = employeeService.isUserExist(empName); if(exits){ //200表示聯系人已經存在 msg.setCode(200); }else{ //100表示聯系人可用 msg.setCode(100); } return msg; } //通過id查詢到員工的信息，采用resetful風格 @RequestMapping(value="/emp/{id}",method=RequestMethod.GET) @ResponseBody public Msg getEmpById(@PathVariable("id") String id){ System.out.println("getEmpById is called:"+id); Msg msg = MSG; Employee employee = employeeService.getEmpById(id); msg.setCode(100); msg.setMsg("查詢聯系人成功"); msg.getExtend().put("emp", employee); return msg; } //通過id修改聯系人,特別需要注意的是這里采用的是PUT的方式 @RequestMapping(value="/update/{empId}",method=RequestMethod.PUT) @ResponseBody public Msg updateEmpById(Employee employee){ System.out.println("updateEmpById is called:"+employee.toString()); Msg msg = MSG; employeeService.updateEmpById(employee); msg.setCode(100); msg.setMsg("更新數據成功"); return msg; } //發生ajax刪除聯系人 @RequestMapping(value="/delete/{id}",method=RequestMethod.DELETE) @ResponseBody public Msg delete(@PathVariable("id")Integer id){ employeeService.delete(id); System.out.println("delete is called:"+id); Msg msg = new Msg(); msg.setCode(100); msg.setMsg("刪除聯系人成功"); return msg; } }
EmployeeService.java
package com.atguigu.crud.service; import java.util.List; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import com.atguigu.crud.bean.Employee; import com.atguigu.crud.bean.EmployeeExample; import com.atguigu.crud.bean.EmployeeExample.Criteria; import com.atguigu.crud.dao.EmployeeMapper; @Service public class EmployeeService { @Autowired private EmployeeMapper employeeMapper; public List<Employee> getAll(){ List<Employee> list = employeeMapper.selectByExampleWithDept(null); return list; } public void save(Employee employee) { // TODO Auto-generated method stub //這里要注意insert和insertSelevite的區別，使用insert將會null字段插入到數據庫中。insertselct不會 //現在要實現員工的id自增長，employee中的id字段傳遞過來的值是null字段，所以不能使用insert，會將null字段插入 employeeMapper.insertSelective(employee); } public Boolean isUserExist(String empName) { // TODO Auto-generated method stub //采用mybatis的高級查找功能，判斷當前用戶是否存在 /*** * MyBatis的Mapper接口以及Example的實例函數及詳解 * mybatis的逆向工程中會生成實例及實例對應的example，example用於添加條件，相當where后面的部分 xxxExample example = new xxxExample(); Criteria criteria = new Example().createCriteria(); User user = XxxMapper.selectByPrimaryKey(100); //相當於select * from user where id = 100 * */ EmployeeExample example = new EmployeeExample(); Criteria createCriteria = example.createCriteria(); createCriteria.andEmpNameEqualTo(empName); long countByExample = employeeMapper.countByExample(example); if(countByExample > 0){ return true; }else{ return false; } } public Employee getEmpById(String id) { // TODO Auto-generated method stub Employee employee = employeeMapper.selectByPrimaryKey(Integer.parseInt(id)); return employee; } public void updateEmpById(Employee employee) { // TODO Auto-generated method stub //這里Employee字段中攜帶的那些字段的存在值就更新那些字段 // employeeMapper.updateByPrimaryKeySelective(employee); } public void delete(Integer id) { // TODO Auto-generated method stub employeeMapper.deleteByPrimaryKey(id); } }
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> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <% pageContext.setAttribute("APP_PATH", request.getContextPath()); %> <!-- web路徑： 不以/開始的相對路徑，找資源，以當前資源的路徑為基准，經常容易出問題。 以/開始的相對路徑，找資源，以服務器的路徑為標准(http://localhost:3306)；需要加上項目名 http://localhost:3306/crud --> <script type="text/javascript" src="${APP_PATH}/static/js/jquery-2.1.1.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> <!-- 修改員工信息的對話框 --> <div class="modal fade" id="updateEmpModal" 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"> <!-- 實體類的表單,表單項 的name需要給實體bean對象的一一對應起來，springmvc會幫我們自動封裝--> <form class="form-horizontal"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">姓名</label> <div class="col-sm-10"> <p class="form-control-static" id="empNameModalUpdate" name="empName"></p> <span id="name_span_update" class="help-block"></span> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">郵箱</label> <div class="col-sm-10"> <input type="text" name="email" class="form-control" id="emailModalUpdate" placeholder="eamil"> <span id="email_span_update" class="help-block"></span> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">性別</label> <div class="col-sm-10"> <label class="radio-inline"> <input type="radio" name="gender" id="genderModal" value="F"> 男 </label> <label class="radio-inline"> <input type="radio" name="gender" id="genderModal" value="M"> 女 </label> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">部門</label> <div class="col-sm-5"> <select name="dId" id="dIdModalUpdate"class="form-control"> </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 ="saveEmpUpdate">更新</button> </div> </div> </div> </div> <!-- 新增員工信息的對話框 --> <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"> <!-- 實體類的表單,表單項 的name需要給實體bean對象的一一對應起來，springmvc會幫我們自動封裝--> <form class="form-horizontal"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">姓名</label> <div class="col-sm-10"> <input type="text" name="empName" class="form-control" id="empNameModal" placeholder="name"> <span id="name_span" class="help-block"></span> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">郵箱</label> <div class="col-sm-10"> <input type="text" name="email" class="form-control" id="emailModal" placeholder="eamil"> <span id="email_span" class="help-block"></span> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">性別</label> <div class="col-sm-10"> <label class="radio-inline"> <input type="radio" name="gender" id="genderModal" value="F"> 男 </label> <label class="radio-inline"> <input type="radio" name="gender" id="genderModal" value="M"> 女 </label> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">部門</label> <div class="col-sm-5"> <select name="dId" id="dIdModal"class="form-control"> </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 ="saveEmp">保存</button> </div> </div> </div> </div> <!-- 搭建顯示頁面 --> <div class="container"> <!-- 標題 --> <div class="row"> <div class="col-md-12"> <h1>SSM-CRUD</h1> </div> </div> <!-- 按鈕 --> <div class="row"> <div class="col-md-4 col-md-offset-8"> <button class="btn btn-primary" id="addEmp">新增</button> <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>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> <!-- 當頁面加載完成之后發起ajax請求獲得數據 ，不清楚的看鋒利jquery教程相當的經典--> <script type="text/javascript"> //定義一個全局變量，獲得當前中的記錄數 var total; //定義一個全局變量，記錄當前修改的頁面 var currentPage; $(function(){ //頁面加載完畢，去首頁獲得對應的數據 to_page(1); }); //使用ajax到后台服務器查詢數據 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); } }); } //解析服務器返回的json數據，並在員工表中顯示出來 function build_emps_table(result){ //在構建之前先清空所有的數據 $("#emps_table tbody").empty(); //第一步：獲得所有的員工數據 var emps = result.extend.pageInfo.list; //第二步：對員工數據進行遍歷顯示出來 $.each(emps,function(index,item){ var empIdTd = $("<td></td>").append(item.empId); var empNameTd = $("<td></td>").append(item.empName); var gender = item.gender == 'M'?"女":"男"; var genderTd = $("<td></td>").append(gender); var emailTd = $("<td></td>").append(item.email); var departmentNameTd = $("<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")).append("編輯"); var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm delete_btn") .append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("刪除"); var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn); //這里我們點擊編輯按鈕的時候，在彈出編輯對話框之前我們要使用ajax到后台去查詢對應的員工的信息，這里需要點擊編輯按鈕的時候，需要得到被修改員工的id，這里設計的比較巧秒，我們在創建出編輯按鈕的時候，給編輯按鈕添加一個自定義的屬性。該屬性值就是員工的id // 在點擊編輯按鈕的時候我們就可以通過該屬性獲得的該員工的id editBtn.attr("edit_id",item.empId); //將上面的table表td數據添加到tr中，這里是一個鏈式操作 $("<tr></tr>").append(empIdTd) .append(empNameTd) .append(genderTd) .append(emailTd) .append(departmentNameTd) .append(btnTd) .appendTo("#emps_table tbody"); //"#emps_table tbody"表示選取id為emps_table下的所有的<tbody>的元素，不清楚的看鋒利的jquery書籍相當的經典 }); } //解析顯示分頁信息 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+"條記錄"); total = result.extend.pageInfo.total; currentPage = result.extend.pageInfo.pageNum; } //解析右下角的導航欄 function build_page_nav(result){ //page_nav_area $("#page_nav_area").empty(); var ul = $("<ul></ul>").addClass("pagination"); //構建元素 var firstPageLi = $("<li></li>").append($("<a></a>").append("首頁").attr("href","#")); var prePageLi = $("<li></li>").append($("<a></a>").append("«")); //判斷是否有前一頁，如果沒有前一頁就不能點擊 if(result.extend.pageInfo.hasPreviousPage == false){ firstPageLi.addClass("disabled"); prePageLi.addClass("disabled"); } //給前一頁和首頁添加按鈕點擊事件 firstPageLi.click(function(){ to_page(1); }); prePageLi.click(function(){ //跳轉到當前頁的前一頁 to_page(result.extend.pageInfo.pageNum-1); }); var nextPageLi = $("<li></li>").append($("<a></a>").append("»")); var lastPageLi = $("<li></li>").append($("<a></a>").append("末頁").attr("href","#")); //如果沒有下一頁不能被點擊 if(result.extend.pageInfo.hasNextPage == false){ nextPageLi.addClass("disabled"); lastPageLi.addClass("disabled"); } //給下一頁和尾頁添加點擊事件 nextPageLi.click(function(){ to_page(result.extend.pageInfo.pageNum+1); }); lastPageLi.click(function(){ to_page(result.extend.pageInfo.pages); }); //添加首頁和前一頁 的提示 ul.append(firstPageLi).append(prePageLi); //1,2，3遍歷給ul中添加頁碼提示 $.each(result.extend.pageInfo.navigatepageNums,function(index,item){ var numLi = $("<li></li>").append($("<a></a>").append(item)); //判斷當前遍歷的如果是當前正在顯示的頁面，應該高亮顯示 if(result.extend.pageInfo.pageNum == item){ numLi.addClass("active"); } //添加點擊事件 numLi.click(function(){ //點擊的時候重新使用ajax到服務器查詢數據 to_page(item); }); ul.append(numLi); }); //添加下一頁和末頁 的提示 ul.append(nextPageLi).append(lastPageLi); //把ul加入到nav var navEle = $("<nav></nav>").append(ul); navEle.appendTo("#page_nav_area"); } //點擊新增按鈕，彈出新增加員工的對話框 $("#addEmp").click(function(){ //首先清空頁面的所有數據 //將jquery對象轉化成docment對象，調用docment對象的reset方法 $("#addEmpModal form")[0].reset(); $("#name_span").text(""); $("#empNameModal").parent().removeClass("has-success has-error"); $("#dIdModal").empty(); var parent = $("#dIdModal"); //使用ajax請求部門的數據 $.ajax( { url:"${APP_PATH}/depts", type:"GET", success:function(result){ //對result數據進行解析添加到 var depts = result.extend.depts; $.each(depts,function(index,item){ //給option選項設置值應該是deptid var opt = $("<option></option>").append(item.deptName).attr("value",item.deptId); parent.append(opt); }); } } ); //彈出對話框 $('#addEmpModal').modal({ backdrop:'static' }) }); //點擊保存聯系人 $("#saveEmp").click(function(){ //判斷當前的聯系人是否可用 if( $(this).attr("isUserExist")=="yes"){ return false; } //首先判斷輸入的參數是否滿足規則 if(!validate_add_form()){ return false; } $.ajax({ url:"${APP_PATH}/save", data:$("#addEmpModal form").serialize(), type:"post", success:function(result){ //首先需要判斷后端返回的結果中，后端對用戶的校驗結果 //alert(result.extend.err_map.email); //alert(result.extend.err_map.empName); //這里需要注意的是如果郵箱格式錯誤，姓名正確，result.extend.err_map.email中就像攜帶錯誤的信息，result.extend.err_map.empName的信息是undefined if(result.code == 100){ //保存聯系人成功需要做下面的幾件事情 //第一件事情就是讓新建聯系人的對話框摸太框消失 $("#addEmpModal").modal('hide'); //第二個跳轉到最后一頁 //這里如何跳轉到最后一頁了，mybatis分頁插件這里提供了一個功能，例如現在員工總數是100人，每頁顯示5人，最大的分頁數目就是5，你如果輸入6 //也是按照最大的5來進行查詢。員工的總數肯定是大於最大的分頁數目的，現在要查詢最后一頁的數據，我以員工的總數進行查詢 //使用ajax重新再查詢下最后一頁員工的數目 // to_page(total); }else{ alert(result.extend.err_map.email); //說明郵箱格式錯誤 if(undefined != result.extend.err_map.email){ alert(result.extend.err_map.email); $("#emailModal").parent().removeClass("has-success has-error"); $("#email_span").text(""); $("#emailModal").parent().addClass("has-error"); //給span節點添加.help-block屬性 $("#email_span").addClass("help-block").text(result.extend.err_map.email); } //說明姓名格式有錯誤 if(undefined != result.extend.err_map.empName){ //添加元素狀態之前。先清空清除當前元素的校驗狀態 $("#empNameModal").parent().removeClass("has-success has-error"); $("#name_span").text(""); //給當前節點的父元素添加has-error屬性 $("#empNameModal").parent().addClass("has-error"); //給span節點添加.help-block屬性 $("#name_span").addClass("help-block").text(result.extend.err_map.empName); } } } }); }); //juqery前台校驗數據 //校驗表單數據 function validate_add_form(){ //1、拿到要校驗的數據，使用正則表達式 var empName = $("#empNameModal").val(); var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})/; if(!regName.test(empName)){ //添加元素狀態之前。先清空清除當前元素的校驗狀態 $("#empNameModal").parent().removeClass("has-success has-error"); $("#name_span").text(""); //給當前節點的父元素添加has-error屬性 $("#empNameModal").parent().addClass("has-error"); //給span節點添加.help-block屬性 $("#name_span").addClass("help-block").text("姓名格式不正確"); return false; }else{ $("#empNameModal").parent().removeClass("has-success has-error"); $("#name_span").text(""); //給當前節點的父元素添加has-error屬性 $("#empNameModal").parent().addClass("has-success"); //給span節點添加.help-block屬性 $("#name_span").addClass("help-block").text(""); }; //2、校驗郵箱信息 var email = $("#emailModal").val(); var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/; if(!regEmail.test(email)){ $("#emailModal").parent().removeClass("has-success has-error"); $("#email_span").text(""); $("#emailModal").parent().addClass("has-error"); //給span節點添加.help-block屬性 $("#email_span").addClass("help-block").text("郵箱格式不正確"); return false; }else{ $("#emailModal").parent().removeClass("has-success has-error"); $("#email_span").text(""); $("#emailModal").parent().addClass("has-success"); //給span節點添加.help-block屬性 $("#email_span").addClass("help-block").text(""); } return true; } //給輸入聯系人的input添加change事件，判斷當前聯系人是否可用 $("#empNameModal").change(function(){ //this表示當前操作的對象，是docment類型 //獲得當前輸入的name的值 var name=$(this).val(); $.ajax({ url:"${APP_PATH}/isUserExist", type:"post", data:"empName="+name, success:function(result){ if(result.code == 200){ //說明該聯系人已經在后台存在不可以 //添加元素狀態之前。先清空清除當前元素的校驗狀態 $("#empNameModal").parent().removeClass("has-success has-error"); $("#name_span").text(""); //給當前節點的父元素添加has-error屬性 $("#empNameModal").parent().addClass("has-error"); //給span節點添加.help-block屬性 $("#name_span").addClass("help-block").text("該聯系人已經存在"); //如果當前聯系人已經存在，點擊保存聯系人案例的時候，就會失敗，我們給保存聯系人的按鈕添加一個自定義屬性用來標識當前添加的聯系人是否存在 $("#saveEmp").attr("isUserExist","yes"); }else{ //說明該聯系人可用 $("#empNameModal").parent().removeClass("has-success has-error"); $("#name_span").text(""); //給當前節點的父元素添加has-error屬性 $("#empNameModal").parent().addClass("has-success"); //給span節點添加.help-block屬性 $("#name_span").addClass("help-block").text("該聯系人可用"); $("#saveEmp").attr("isUserExist","no"); } } }); }); //給編輯按鈕添加點擊事件 $(document).on("click",".edit_btn",function(){ //彈出模態對話框 //首先清空頁面的所有數據 //將jquery對象轉化成docment對象，調用docment對象的reset方法 $("#updateEmpModal form")[0].reset(); $("#name_span_update").text(""); $("#email_span_update").text(""); $("#empNameModalUpdate").parent().removeClass("has-success has-error"); $("#emailModalUpdate").parent().removeClass("has-success has-error"); $("#dIdModalUpdate").empty(); //發送ajax請求獲得對應的部門信息 var parent = $("#dIdModalUpdate"); //使用ajax請求部門的數據 $.ajax( { url:"${APP_PATH}/depts", type:"GET", success:function(result){ //對result數據進行解析添加到 var depts = result.extend.depts; $.each(depts,function(index,item){ //給option選項設置值應該是deptid var opt = $("<option></option>").append(item.deptName).attr("value",item.deptId); parent.append(opt); }); } } ); //使用ajax請求獲得對應的員工信息 var emp_id = $(this).attr("edit_id"); //給編輯聯系人的對話框中國的更新按鈕添加自定義屬性，這樣在編輯聯系人頁面中就可以獲得被編輯聯系人的id $("#saveEmpUpdate").attr("edit_id",emp_id); $.ajax( { url:"${APP_PATH}/emp/"+emp_id, type:"GET", success:function(result){ //在對話框中顯示顯示姓名 p標簽是一個文本使用text $("#empNameModalUpdate").text(result.extend.emp.empName); //給郵箱復制，input對話框使用val $("#emailModalUpdate").val(result.extend.emp.email); //接下來要讓該聯系人對應的性別被選中，如何實現了 //首先找到id為updateEmpModal對話框下的name等於gender的input元素。這個元素就是單選框。val中傳入的值就是男就是對應的 //男的單選框被選中 $("#updateEmpModal input[name=gender]").val([result.extend.emp.gender]); $("#updateEmpModal select").val([result.extend.emp.dId]); } } ); //彈出對話框 $('#updateEmpModal').modal({ backdrop:'static' }) }); //給編輯聯系人的保存按鈕增加點擊事件 $("#saveEmpUpdate").click(function(){ //使用ajax提交數據到后台更新數據這里需要 //強調的是我們采用的是put方式的提交 // data:$("#addEmpModal form").serialize()傳遞的請求參數中必須攜帶一個_method var emp_id = $(this).attr("edit_id"); $.ajax({ url:"${APP_PATH}/update/"+emp_id, type:"PUT", data:$("#updateEmpModal form").serialize(), success:function(result){ //修改聯系人成功之后，關閉修改聯系人的摸態對話框 if(result.code == 100){ $("#updateEmpModal").modal('hide'); //跳轉到當前的修改頁面 to_page(currentPage); } } }); }); //接下來實現刪除操作，給刪除按鈕添加點擊事件 //給編輯按鈕添加點擊事件 $(document).on("click",".delete_btn",function(){ //首先需要獲得要刪除的聯系人的姓名如何獲得了,主要這里不能寫成parent，暫時還沒有弄明白 //alert($(this).parents("tr").find("td:eq(1)").text()); //刪除聯系人的id var delete_id = $(this).parents("tr").find("td:eq(0)").text(); //彈出確認對話框 if(confirm("你確認刪除"+$(this).parents("tr").find("td:eq(1)").text()+"嗎?")){ //發生ajax刪除聯系人 $.ajax({ url:"${APP_PATH}/delete/"+ delete_id, type:"DELETE", success:function(result){ if(result.code == 100){ //說明刪除聯系人成功 //重新ajax請求到刪除聯系人的頁面 to_page(currentPage); } } }); } }); </script> </div> </body> </html>
通過上面的操作就達到了點擊刪除按鈕單一刪除聯系人的目的
33、尚硅谷_SSM高級整合_刪除_全選&全不選.avi
上面我們實現了單一刪除，我們要實現全選刪除如何實現了
要實現上面的全選操作，應該注意到頁面是如何實現了，第一在表頭應該添加一個checkbox，如果勾選中表頭的checkbox可以讓每個子選項下的checkbox從未選中狀態變到選中狀態，或者從選中狀態變成
未選中狀態
<tr> <!-- 在表頭添加checkbox --> <input type="checkbox" id="check_all"/> <th>#</th> <th>empName</th> <th>gender</th> <th>email</th> <th>deptName</th> <th>操作</th> </tr>
添加之后效果如下所示：
第二：每一行元素開頭都也應該有一個checkbox
$.each(emps,function(index,item){ //給每一行表記錄都添加一個checkbox var checkboxTd = $("<input type='checkbox' class='check_item'/>"); var empIdTd = $("<td></td>").append(item.empId); var empNameTd = $("<td></td>").append(item.empName); var gender = item.gender == 'M'?"女":"男"; var genderTd = $("<td></td>").append(gender); var emailTd = $("<td></td>").append(item.email); var departmentNameTd = $("<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")).append("編輯"); var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm delete_btn") .append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("刪除"); var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn); //這里我們點擊編輯按鈕的時候，在彈出編輯對話框之前我們要使用ajax到后台去查詢對應的員工的信息，這里需要點擊編輯按鈕的時候，需要得到被修改員工的id，這里設計的比較巧秒，我們在創建出編輯按鈕的時候，給編輯按鈕添加一個自定義的屬性。該屬性值就是員工的id // 在點擊編輯按鈕的時候我們就可以通過該屬性獲得的該員工的id editBtn.attr("edit_id",item.empId); //將上面的table表td數據添加到tr中，這里是一個鏈式操作 $("<tr></tr>").append(checkboxTd) .append(empIdTd) .append(empNameTd) .append(genderTd) .append(emailTd) .append(departmentNameTd) .append(btnTd) .appendTo("#emps_table tbody"); //"#emps_table tbody"表示選取id為emps_table下的所有的<tbody>的元素，不清楚的看鋒利的jquery書籍相當的經典 });
添加之后運行的效果如下所示：
我們接下來我們來實現全選和全不選的操作
當點擊表頭的checkbox的時候，我們應該首先獲得該checkbox的選中狀態，然后讓每一行的checkbox的狀態和表頭的checkbox的狀態一致，這樣就達到了全選和全不選的目的
獲取狀態的時候如果要注意如果使用下面的代碼
//實現表頭checkbox全選和全不選的操作
$("#check_all").click(function(){
//獲得該表頭checkbox的狀態
alert($(this).attr("checked"));
});
運行的結果始終是
這里要注意使用attr獲得屬性值主要是用來獲得自定義的屬性值，而要獲得固有的屬性值要使用prop
- 對於HTML元素本身就帶有的固有屬性，在處理時，使用prop方法。
- 對於HTML元素我們自己自定義的DOM屬性，在處理時，使用attr方法。
使用prop選中的值是true，為選中為false
//實現表頭checkbox全選和全不選的操作
$("#check_all").click(function(){
//獲得該表頭checkbox的狀態
var status = $(this).prop("checked");
//讓每一行的checkbox的狀態等於表頭checkbox的狀態
$(".check_item").prop("checked",status);
});
這樣我們就實現了全選和全不選的功能
接下來我們要實現下面的功能
如果表頭的checbox處於未選中的狀態，但是當每一行的checkbox都選中之后，我們要讓表頭的checkbox也處於選中狀態，當表頭的checkbox處於選中狀態之后，如果有一行checkbox處於未選中
狀態我們都要讓表頭處於未選中狀態
那么我們應該給每一行的checkbox設置監聽狀態，但點擊的時候判斷當前頁面被選中的checkbox的數目時候等於當前頁面每頁顯示的數目，如何是就讓表頭的checkbox處於選中狀態，否則就設置為未選中狀態
$(document).on("click",".check_item",function(){
//第一步獲得被選中的checkbox的長度
var checked_length = $(".check_item:checked").length;
//獲得當前頁面中全不的checkbox的長度
var total_length = $(".check_item").length;
//如果二二者長度相等說明當前的所有的checkbox都處於選中狀態，此時
//要讓表頭的checkbox處於選中狀態
if(checked_length == total_length){
$("#check_all").prop("checked",true);
}else{
$("#check_all").prop("checked",false);
}
});
我們來看總的頁面的代碼
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> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <% pageContext.setAttribute("APP_PATH", request.getContextPath()); %> <!-- web路徑： 不以/開始的相對路徑，找資源，以當前資源的路徑為基准，經常容易出問題。 以/開始的相對路徑，找資源，以服務器的路徑為標准(http://localhost:3306)；需要加上項目名 http://localhost:3306/crud --> <script type="text/javascript" src="${APP_PATH}/static/js/jquery-2.1.1.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> <!-- 修改員工信息的對話框 --> <div class="modal fade" id="updateEmpModal" 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"> <!-- 實體類的表單,表單項 的name需要給實體bean對象的一一對應起來，springmvc會幫我們自動封裝--> <form class="form-horizontal"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">姓名</label> <div class="col-sm-10"> <p class="form-control-static" id="empNameModalUpdate" name="empName"></p> <span id="name_span_update" class="help-block"></span> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">郵箱</label> <div class="col-sm-10"> <input type="text" name="email" class="form-control" id="emailModalUpdate" placeholder="eamil"> <span id="email_span_update" class="help-block"></span> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">性別</label> <div class="col-sm-10"> <label class="radio-inline"> <input type="radio" name="gender" id="genderModal" value="F"> 男 </label> <label class="radio-inline"> <input type="radio" name="gender" id="genderModal" value="M"> 女 </label> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">部門</label> <div class="col-sm-5"> <select name="dId" id="dIdModalUpdate"class="form-control"> </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 ="saveEmpUpdate">更新</button> </div> </div> </div> </div> <!-- 新增員工信息的對話框 --> <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"> <!-- 實體類的表單,表單項 的name需要給實體bean對象的一一對應起來，springmvc會幫我們自動封裝--> <form class="form-horizontal"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">姓名</label> <div class="col-sm-10"> <input type="text" name="empName" class="form-control" id="empNameModal" placeholder="name"> <span id="name_span" class="help-block"></span> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">郵箱</label> <div class="col-sm-10"> <input type="text" name="email" class="form-control" id="emailModal" placeholder="eamil"> <span id="email_span" class="help-block"></span> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">性別</label> <div class="col-sm-10"> <label class="radio-inline"> <input type="radio" name="gender" id="genderModal" value="F"> 男 </label> <label class="radio-inline"> <input type="radio" name="gender" id="genderModal" value="M"> 女 </label> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">部門</label> <div class="col-sm-5"> <select name="dId" id="dIdModal"class="form-control"> </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 ="saveEmp">保存</button> </div> </div> </div> </div> <!-- 搭建顯示頁面 --> <div class="container"> <!-- 標題 --> <div class="row"> <div class="col-md-12"> <h1>SSM-CRUD</h1> </div> </div> <!-- 按鈕 --> <div class="row"> <div class="col-md-4 col-md-offset-8"> <button class="btn btn-primary" id="addEmp">新增</button> <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> <!-- 在表頭添加checkbox --> <th> <input type="checkbox" id="check_all"/></th> <th>#</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> <!-- 當頁面加載完成之后發起ajax請求獲得數據 ，不清楚的看鋒利jquery教程相當的經典--> <script type="text/javascript"> //定義一個全局變量，獲得當前中的記錄數 var total; //定義一個全局變量，記錄當前修改的頁面 var currentPage; $(function(){ //頁面加載完畢，去首頁獲得對應的數據 to_page(1); }); //使用ajax到后台服務器查詢數據 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); } }); } //解析服務器返回的json數據，並在員工表中顯示出來 function build_emps_table(result){ //在構建之前先清空所有的數據 $("#emps_table tbody").empty(); //第一步：獲得所有的員工數據 var emps = result.extend.pageInfo.list; //第二步：對員工數據進行遍歷顯示出來 $.each(emps,function(index,item){ //給每一行表記錄都添加一個checkbox 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 gender = item.gender == 'M'?"女":"男"; var genderTd = $("<td></td>").append(gender); var emailTd = $("<td></td>").append(item.email); var departmentNameTd = $("<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")).append("編輯"); var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm delete_btn") .append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("刪除"); var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn); //這里我們點擊編輯按鈕的時候，在彈出編輯對話框之前我們要使用ajax到后台去查詢對應的員工的信息，這里需要點擊編輯按鈕的時候，需要得到被修改員工的id，這里設計的比較巧秒，我們在創建出編輯按鈕的時候，給編輯按鈕添加一個自定義的屬性。該屬性值就是員工的id // 在點擊編輯按鈕的時候我們就可以通過該屬性獲得的該員工的id editBtn.attr("edit_id",item.empId); //將上面的table表td數據添加到tr中，這里是一個鏈式操作 $("<tr></tr>").append(checkboxTd) .append(empIdTd) .append(empNameTd) .append(genderTd) .append(emailTd) .append(departmentNameTd) .append(btnTd) .appendTo("#emps_table tbody"); //"#emps_table tbody"表示選取id為emps_table下的所有的<tbody>的元素，不清楚的看鋒利的jquery書籍相當的經典 }); } //解析顯示分頁信息 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+"條記錄"); total = result.extend.pageInfo.total; currentPage = result.extend.pageInfo.pageNum; } //解析右下角的導航欄 function build_page_nav(result){ //page_nav_area $("#page_nav_area").empty(); var ul = $("<ul></ul>").addClass("pagination"); //構建元素 var firstPageLi = $("<li></li>").append($("<a></a>").append("首頁").attr("href","#")); var prePageLi = $("<li></li>").append($("<a></a>").append("«")); //判斷是否有前一頁，如果沒有前一頁就不能點擊 if(result.extend.pageInfo.hasPreviousPage == false){ firstPageLi.addClass("disabled"); prePageLi.addClass("disabled"); } //給前一頁和首頁添加按鈕點擊事件 firstPageLi.click(function(){ to_page(1); }); prePageLi.click(function(){ //跳轉到當前頁的前一頁 to_page(result.extend.pageInfo.pageNum-1); }); var nextPageLi = $("<li></li>").append($("<a></a>").append("»")); var lastPageLi = $("<li></li>").append($("<a></a>").append("末頁").attr("href","#")); //如果沒有下一頁不能被點擊 if(result.extend.pageInfo.hasNextPage == false){ nextPageLi.addClass("disabled"); lastPageLi.addClass("disabled"); } //給下一頁和尾頁添加點擊事件 nextPageLi.click(function(){ to_page(result.extend.pageInfo.pageNum+1); }); lastPageLi.click(function(){ to_page(result.extend.pageInfo.pages); }); //添加首頁和前一頁 的提示 ul.append(firstPageLi).append(prePageLi); //1,2，3遍歷給ul中添加頁碼提示 $.each(result.extend.pageInfo.navigatepageNums,function(index,item){ var numLi = $("<li></li>").append($("<a></a>").append(item)); //判斷當前遍歷的如果是當前正在顯示的頁面，應該高亮顯示 if(result.extend.pageInfo.pageNum == item){ numLi.addClass("active"); } //添加點擊事件 numLi.click(function(){ //點擊的時候重新使用ajax到服務器查詢數據 to_page(item); }); ul.append(numLi); }); //添加下一頁和末頁 的提示 ul.append(nextPageLi).append(lastPageLi); //把ul加入到nav var navEle = $("<nav></nav>").append(ul); navEle.appendTo("#page_nav_area"); } //點擊新增按鈕，彈出新增加員工的對話框 $("#addEmp").click(function(){ //首先清空頁面的所有數據 //將jquery對象轉化成docment對象，調用docment對象的reset方法 $("#addEmpModal form")[0].reset(); $("#name_span").text(""); $("#empNameModal").parent().removeClass("has-success has-error"); $("#dIdModal").empty(); var parent = $("#dIdModal"); //使用ajax請求部門的數據 $.ajax( { url:"${APP_PATH}/depts", type:"GET", success:function(result){ //對result數據進行解析添加到 var depts = result.extend.depts; $.each(depts,function(index,item){ //給option選項設置值應該是deptid var opt = $("<option></option>").append(item.deptName).attr("value",item.deptId); parent.append(opt); }); } } ); //彈出對話框 $('#addEmpModal').modal({ backdrop:'static' }) }); //點擊保存聯系人 $("#saveEmp").click(function(){ //判斷當前的聯系人是否可用 if( $(this).attr("isUserExist")=="yes"){ return false; } //首先判斷輸入的參數是否滿足規則 if(!validate_add_form()){ return false; } $.ajax({ url:"${APP_PATH}/save", data:$("#addEmpModal form").serialize(), type:"post", success:function(result){ //首先需要判斷后端返回的結果中，后端對用戶的校驗結果 //alert(result.extend.err_map.email); //alert(result.extend.err_map.empName); //這里需要注意的是如果郵箱格式錯誤，姓名正確，result.extend.err_map.email中就像攜帶錯誤的信息，result.extend.err_map.empName的信息是undefined if(result.code == 100){ //保存聯系人成功需要做下面的幾件事情 //第一件事情就是讓新建聯系人的對話框摸太框消失 $("#addEmpModal").modal('hide'); //第二個跳轉到最后一頁 //這里如何跳轉到最后一頁了，mybatis分頁插件這里提供了一個功能，例如現在員工總數是100人，每頁顯示5人，最大的分頁數目就是5，你如果輸入6 //也是按照最大的5來進行查詢。員工的總數肯定是大於最大的分頁數目的，現在要查詢最后一頁的數據，我以員工的總數進行查詢 //使用ajax重新再查詢下最后一頁員工的數目 // to_page(total); }else{ alert(result.extend.err_map.email); //說明郵箱格式錯誤 if(undefined != result.extend.err_map.email){ alert(result.extend.err_map.email); $("#emailModal").parent().removeClass("has-success has-error"); $("#email_span").text(""); $("#emailModal").parent().addClass("has-error"); //給span節點添加.help-block屬性 $("#email_span").addClass("help-block").text(result.extend.err_map.email); } //說明姓名格式有錯誤 if(undefined != result.extend.err_map.empName){ //添加元素狀態之前。先清空清除當前元素的校驗狀態 $("#empNameModal").parent().removeClass("has-success has-error"); $("#name_span").text(""); //給當前節點的父元素添加has-error屬性 $("#empNameModal").parent().addClass("has-error"); //給span節點添加.help-block屬性 $("#name_span").addClass("help-block").text(result.extend.err_map.empName); } } } }); }); //juqery前台校驗數據 //校驗表單數據 function validate_add_form(){ //1、拿到要校驗的數據，使用正則表達式 var empName = $("#empNameModal").val(); var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})/; if(!regName.test(empName)){ //添加元素狀態之前。先清空清除當前元素的校驗狀態 $("#empNameModal").parent().removeClass("has-success has-error"); $("#name_span").text(""); //給當前節點的父元素添加has-error屬性 $("#empNameModal").parent().addClass("has-error"); //給span節點添加.help-block屬性 $("#name_span").addClass("help-block").text("姓名格式不正確"); return false; }else{ $("#empNameModal").parent().removeClass("has-success has-error"); $("#name_span").text(""); //給當前節點的父元素添加has-error屬性 $("#empNameModal").parent().addClass("has-success"); //給span節點添加.help-block屬性 $("#name_span").addClass("help-block").text(""); }; //2、校驗郵箱信息 var email = $("#emailModal").val(); var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/; if(!regEmail.test(email)){ $("#emailModal").parent().removeClass("has-success has-error"); $("#email_span").text(""); $("#emailModal").parent().addClass("has-error"); //給span節點添加.help-block屬性 $("#email_span").addClass("help-block").text("郵箱格式不正確"); return false; }else{ $("#emailModal").parent().removeClass("has-success has-error"); $("#email_span").text(""); $("#emailModal").parent().addClass("has-success"); //給span節點添加.help-block屬性 $("#email_span").addClass("help-block").text(""); } return true; } //給輸入聯系人的input添加change事件，判斷當前聯系人是否可用 $("#empNameModal").change(function(){ //this表示當前操作的對象，是docment類型 //獲得當前輸入的name的值 var name=$(this).val(); $.ajax({ url:"${APP_PATH}/isUserExist", type:"post", data:"empName="+name, success:function(result){ if(result.code == 200){ //說明該聯系人已經在后台存在不可以 //添加元素狀態之前。先清空清除當前元素的校驗狀態 $("#empNameModal").parent().removeClass("has-success has-error"); $("#name_span").text(""); //給當前節點的父元素添加has-error屬性 $("#empNameModal").parent().addClass("has-error"); //給span節點添加.help-block屬性 $("#name_span").addClass("help-block").text("該聯系人已經存在"); //如果當前聯系人已經存在，點擊保存聯系人案例的時候，就會失敗，我們給保存聯系人的按鈕添加一個自定義屬性用來標識當前添加的聯系人是否存在 $("#saveEmp").attr("isUserExist","yes"); }else{ //說明該聯系人可用 $("#empNameModal").parent().removeClass("has-success has-error"); $("#name_span").text(""); //給當前節點的父元素添加has-error屬性 $("#empNameModal").parent().addClass("has-success"); //給span節點添加.help-block屬性 $("#name_span").addClass("help-block").text("該聯系人可用"); $("#saveEmp").attr("isUserExist","no"); } } }); }); //給編輯按鈕添加點擊事件 $(document).on("click",".edit_btn",function(){ //彈出模態對話框 //首先清空頁面的所有數據 //將jquery對象轉化成docment對象，調用docment對象的reset方法 $("#updateEmpModal form")[0].reset(); $("#name_span_update").text(""); $("#email_span_update").text(""); $("#empNameModalUpdate").parent().removeClass("has-success has-error"); $("#emailModalUpdate").parent().removeClass("has-success has-error"); $("#dIdModalUpdate").empty(); //發送ajax請求獲得對應的部門信息 var parent = $("#dIdModalUpdate"); //使用ajax請求部門的數據 $.ajax( { url:"${APP_PATH}/depts", type:"GET", success:function(result){ //對result數據進行解析添加到 var depts = result.extend.depts; $.each(depts,function(index,item){ //給option選項設置值應該是deptid var opt = $("<option></option>").append(item.deptName).attr("value",item.deptId); parent.append(opt); }); } } ); //使用ajax請求獲得對應的員工信息 var emp_id = $(this).attr("edit_id"); //給編輯聯系人的對話框中國的更新按鈕添加自定義屬性，這樣在編輯聯系人頁面中就可以獲得被編輯聯系人的id $("#saveEmpUpdate").attr("edit_id",emp_id); $.ajax( { url:"${APP_PATH}/emp/"+emp_id, type:"GET", success:function(result){ //在對話框中顯示顯示姓名 p標簽是一個文本使用text $("#empNameModalUpdate").text(result.extend.emp.empName); //給郵箱復制，input對話框使用val $("#emailModalUpdate").val(result.extend.emp.email); //接下來要讓該聯系人對應的性別被選中，如何實現了 //首先找到id為updateEmpModal對話框下的name等於gender的input元素。這個元素就是單選框。val中傳入的值就是男就是對應的 //男的單選框被選中 $("#updateEmpModal input[name=gender]").val([result.extend.emp.gender]); $("#updateEmpModal select").val([result.extend.emp.dId]); } } ); //彈出對話框 $('#updateEmpModal').modal({ backdrop:'static' }) }); //給編輯聯系人的保存按鈕增加點擊事件 $("#saveEmpUpdate").click(function(){ //使用ajax提交數據到后台更新數據這里需要 //強調的是我們采用的是put方式的提交 // data:$("#addEmpModal form").serialize()傳遞的請求參數中必須攜帶一個_method var emp_id = $(this).attr("edit_id"); $.ajax({ url:"${APP_PATH}/update/"+emp_id, type:"PUT", data:$("#updateEmpModal form").serialize(), success:function(result){ //修改聯系人成功之后，關閉修改聯系人的摸態對話框 if(result.code == 100){ $("#updateEmpModal").modal('hide'); //跳轉到當前的修改頁面 to_page(currentPage); } } }); }); //接下來實現刪除操作，給刪除按鈕添加點擊事件 //給編輯按鈕添加點擊事件 $(document).on("click",".delete_btn",function(){ //首先需要獲得要刪除的聯系人的姓名如何獲得了,主要這里不能寫成parent，暫時還沒有弄明白 //alert($(this).parents("tr").find("td:eq(1)").text()); //刪除聯系人的id var delete_id = $(this).parents("tr").find("td:eq(0)").text(); //彈出確認對話框 if(confirm("你確認刪除"+$(this).parents("tr").find("td:eq(1)").text()+"嗎?")){ //發生ajax刪除聯系人 $.ajax({ url:"${APP_PATH}/delete/"+ delete_id, type:"DELETE", success:function(result){ if(result.code == 100){ //說明刪除聯系人成功 //重新ajax請求到刪除聯系人的頁面 to_page(currentPage); } } }); } }); //實現表頭checkbox全選和全不選的操作 $("#check_all").click(function(){ //獲得該表頭checkbox的狀態 var status = $(this).prop("checked"); //讓每一行的checkbox的狀態等於表頭checkbox的狀態 $(".check_item").prop("checked",status); }); //給每一行的checkbox設置監聽事件 //接下來我們要實現下面的功能 //如果表頭的checbox處於未選中的狀態， //但是當每一行的checkbox都選中之后，我們要讓表頭的checkbox也處於選中狀態，當表頭的checkbox處於選中狀態之后，如果有一行checkbox處於未選中 //狀態我們都要讓表頭處於未選中狀態 //那么我們應該給每一行的checkbox設置監聽狀態，但點擊的時候判斷當前頁面被選中的checkbox的數目時候等於當前頁面每頁顯示的數目，如何是就讓表頭的checkbox處於選中狀態，否則就設置為未選中狀態 $(document).on("click",".check_item",function(){ //第一步獲得被選中的checkbox的長度 var checked_length = $(".check_item:checked").length; //獲得當前頁面中全不的checkbox的長度 var total_length = $(".check_item").length; //如果二二者長度相等說明當前的所有的checkbox都處於選中狀態，此時 //要讓表頭的checkbox處於選中狀態 if(checked_length == total_length){ $("#check_all").prop("checked",true); }else{ $("#check_all").prop("checked",false); } }); </script> </div> </body> </html>