ssm練手（CRUD） 9、實現刪除功能

阿新 • • 發佈：2019-02-19

//全員總記錄數當前頁面 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); build_page_nav(result); } }); } /*=============解析員工資料，並新增到列表下面，形成完整列表模式框架==========*/

function build_emps_table(result) { //在構建之前，先清空，不然資料會疊加 $("#emps_table tbody").empty(); //此處要對照JSON資料，獲取到員工的list var emps = result.extend.pageInfo.list; //jquery的遍歷，emps為要遍歷的引數，後面的為每次遍歷返回的內容；index為下標，item為當前的資料 $ .each( emps, function

(index, item) { //建立列表 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); //編輯按鈕，利用jquery新增bootstrap所依賴的class var editBtn = $("<button></button>") .addClass( "btn btn-primary btn-sm edit_btn") .append( $("<span></span>") .addClass( "glyphicon glyphicon-pencil")) .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")) .append("刪除"); //為刪除按鈕新增一個自定義的屬性，來表示當前刪除員工的id delBtn.attr("del-id", item.empId); //把兩個按鈕寫在一起，並且在其中新增一個空格 var btnTd = $("<td></td>").append(editBtn) .append(" ").append(delBtn); //append方法執行完成後，還是返回原來的元素，所以可以不停使用append方法新增內容 $("<tr></tr>").append(checkBoxTd).append( empIdTd).append(empNameTd).append( genderTd).append(emailTd).append( deptNameTd).append(btnTd).appendTo( "#emps_table tbody"); }); } /*======================解析頁面左下角的資訊=======================*/ function build_page_info(result) { $("#page_info_area").empty(); //找到id=page_info_area的div塊進行操作 $("#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(); //此處的建議對照之前的index.jsp的html部分的程式碼看，不如太作死 /*開始構建首頁末頁，第一頁...等元素，最後一次性加進去下面第一段程式碼就完成了 <li><a href="#">首頁</a></li> 這段程式碼 */ 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"); } else { //為元素新增點選翻頁的事件 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"); } else { nextPageLi.click(function() { to_page(result.extend.pageInfo.pageNum + 1); }); lastPageLi.click(function() { to_page(result.extend.pageInfo.pages); }) } //先把首頁和前一頁圖示加上去 ul.append(firstPageLi).append(prePageLi) //遍歷頁碼號第一頁第二頁。。。遍歷給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() { to_page(item); }) ul.append(numLi); }); //最後新增後一頁和末頁提示 ul.append(nextPageLi).append(lastPageLi); //把ul加入到nav元素 var navEle = $("<nav></nav>").append(ul); navEle.appendTo("#page_nav_area"); } /*============每次新增後，再點開新增原來的內容都沒消除，此方法就是消除上一條新增後框框中的資訊===*/ function reset_form(ele) { //重置內容 $(ele)[0].reset(); //清空樣式，找到該元素下的所有內容裡包含這兩個class的內容，清掉它們 $(ele).find("*").removeClass("has-error has-success"); //找到所有class為helt-block（提示框所在的一小塊區域），清空內容 $(ele).find(".help-block").text(""); } /*=============點選新增按鈕彈出懸浮框，（在“新增”鍵處）============*/ $("#emp_add_modal_btn").click(function() { //重置表單 reset_form("#empAddModal form"); //傳送ajax請求，查出部門資訊，顯示在下拉列表中 getDepats("#dept_add_select"); //彈出框框 $("#empAddModal").modal({ //令懸浮框不會刪除 backdrop : "static" }); }); /*==============封裝方法：查出總共有幾個部門，然後新增到下拉表中======================*/ function getDepats(ele) { //每次請求前先清空資料 $(ele).empty(); $.ajax({ url : "${APP_PATH}/depts", type : "GET", success : function(result) { //顯示部門資訊在下拉列表中 $.each(result.extend.depts, function() { var optionEle = $("<option></option>").append( this.deptName).attr("value", this.deptId); optionEle.appendTo(ele); }); } }); } /* ===========前端檢驗資料是否合理，但是這樣不保險，在下面還有後臺檢驗====================*/ function validate_add_form() { //1、拿到要校驗的資料，使用正則表示式進行校驗 var empName = $("#empName_add_input").val(); //bootstrap的內容，在input的父元素上新增如下class var regName = /(^[a-zA-Z0-9_-]{4,16}$)|(^[\u2E80-\u9FFF]{2,5})/; if (!regName.test(empName)) { show_validate_msg("#empName_add_input", "error", "使用者名稱格式錯誤（前端校驗）"); return false; } else { show_validate_msg("#empName_add_input", "success", ""); } //校驗郵箱 var email = $("#email_add_input").val(); var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/; if (!regEmail.test(email)) { //bootstrap的內容，在input的父元素上新增如下class show_validate_msg("#email_add_input", "error", "郵件格式錯誤（前端校驗）"); return false; } else { show_validate_msg("#email_add_input", "success", ""); } return true; } /*=======================封裝檢驗重複的方法，便於多處引用===============================*/ function show_validate_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(""); } else if ("error" == status) { $(ele).parent().addClass("has-error"); $(ele).next("span").text(msg); } } /*===========================檢驗員工是否重複，並進行提示========================*/ $("#empName_add_input").change( function() { var empName = this.value; //傳送ajax請求是否可用 $.ajax({ url : "${APP_PATH}/checkuser", data : "empName=" + empName, type : "POST", success : function(result) { //此處code是Msg.java中的屬性 if (result.code == 100) { show_validate_msg("#empName_add_input", "success", "使用者名稱可用"); //如果成功，給儲存按鈕的鍵添加個自定義的屬性，用於判斷能不能點下儲存 $("#emp_save_btn").attr("ajax-va", "success"); } else { //傳出的錯誤資訊，是在EmployeeController中自定義的va_msg show_validate_msg("#empName_add_input", "error", result.extend.va_msg); $("#emp_save_btn").attr("ajax-va", "error"); } } }); }); /*======================點選按鈕後，就會儲存資料，並且實現在這實現後臺檢驗=====================*/ $("#emp_save_btn") .click( function() { //對提交的資料進行校驗 if (!validate_add_form()) { return false; } //1、判斷之前的ajax使用者名稱是否成功，如果成功，才傳送ajax if ($(this).attr("ajax-va") == "error") { return false; } //2、ajax儲存員工 $ .ajax({ url : "${APP_PATH}/emp", type : "POST", data : $("#empAddModal form") .serialize(), success : function(result) { //員工儲存成功後，判斷返回後臺返回的結果狀態碼（JSR303） if (result.code == 100) { //1、關閉模態框；就用bootstrap的方法 $("#empAddModal").modal('hide'); //2、來到最後一頁，顯示儲存的資料 //傳送ajax請求顯示最後一頁資料即可 //此處利用pagehelper中，如果跳轉的頁面數大，則自動訪問最後一頁 to_page(totalRecord); } else { //有哪個欄位的錯誤資訊就顯示哪個欄位的，undefined是沒有錯誤下會自動帶上的資訊 if (undefined != result.extend.errorFields.email) { //顯示郵箱錯誤資訊 show_validate_msg( "#email_add_input", "error", result.extend.errorFields.email); } if (undefined != result.extend.errorFields.empName) { //顯示員工錯誤資訊 show_validate_msg( "#empName_add_input", "error", result.extend.errorFields.empName); } } } }); }); /* ============================以下是修改員工內容======================================== */ /*=====================查詢員工資訊（和查詢部門資訊一樣）========================*/ function getEmp(id) { $.ajax({ url : "${APP_PATH}/emp/" + id, type : "GET", success : function(result) { var empData = result.extend.emp; //獲取姓名和郵箱資訊，因為姓名和郵箱格式不一樣，因此實現方式一個text，一個val $("#empName_update_static").text(empData.empName); $("#email_update_input").val(empData.email); //單選框和下拉列表的選中方式可以搜搜jQuery文件的val方法 $("#empUpdateModal input[name=gender]").val( [ empData.gender ]); $("#empUpdateModal select").val([ empData.dId ]); } }); } /*========================點選“編輯”後，彈出懸浮框===========================*/ /* 下面這種繫結方法是不行的，因為編輯等內容，都是在<script>中用ajax傳送請求得到的。但是js先執行，因此可以說，我們這裡是先繫結，後出現那些按鈕。因此不行解決方法：1、建立按鈕時候繫結事件（太耦合）。2、使用jquery提供的on方法（自行搜尋on的用法） $(".edit_btn").click(function() { alert("2334"); }); */ $(document).on("click", ".edit_btn", function() { //1、查出員工資訊，並顯示員工資訊，此處用到了bootstrap的靜態控制元件 //2、同時我們建立按鈕時候添加了個屬性edit-id獲取當前按鈕的id（和員工id一樣），從而獲取員工id getEmp($(this).attr("edit-id")); //2、查出部門資訊，並顯示部門列表 getDepats("#empUpdateModal select"); //3、把員工id傳遞給模態框的更新按鈕。給更新按鈕新增edit-id屬性，並傳遞id值 $("#emp_update_btn").attr("edit-id", $(this).attr("edit-id")); //4、彈出模態框，並顯示查詢到的資訊 $("#empUpdateModal").modal({ //令懸浮框不會刪除 backdrop : "static" }); }); /*=======================點選“更新”後，更新員工===========================*/ $("#emp_update_btn") .click( function() { //1、驗證郵箱是否合法，這是上面前端校驗的內容，由於沒封裝方法，就直接複製拿來用了 var email = $("#email_update_input").val(); var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/; if (!regEmail.test(email)) { show_validate_msg("#email_update_input", "error", "郵件格式錯誤（前端校驗）"); return false; } else { show_validate_msg("#email_update_input", "success", ""); } //2、傳送ajax請求，儲存員工資料，根據我們之前的規定，用put方式來更新 $.ajax({ //在前面的方法中，我們給更新按鈕加上了edit-id屬性 url : "${APP_PATH}/emp/" + $(this).attr("edit-id"), type : "PUT", data : $("#empUpdateModal form").serialize(), success : function(result) { //1、關閉對話方塊， $("#empUpdateModal").modal("hide"); //2、回到本頁面 to_page(currentPage); } }); }); /*==========================單個刪除按鈕========================*/ $(document).on("click", ".delete_btn", function() { //1、彈出確認是否刪除對話方塊，找到列表中的第三個td（即姓名） var empName = $(this).parents("tr").find("td:eq(2)").text(); var empId = $(this).attr("del-id"); //制定彈出框的內容 if (confirm("確認刪除[" + empName + "]嗎?")) { //確認，傳送ajax請求進行刪除 $.ajax({ url : "${APP_PATH}/emp/" + empId, type : "DELETE", success : function(result) { to_page(currentPage); } }); } }); /*==============點選最上面的全選/全不選，則該頁所有內容都會勾選=====================*/ $("#check_all").click(function() { /*attr獲取checked是undefined，用prop修改和讀取dom原生屬性的值此處是判斷當前元素是否被選中$(this).prop("checked") 且該方法第二個引數應該是傳入當前狀態？這樣就完成了全選全不選的效果 */ $(this).prop("checked"); $(".check_item").prop("checked", $(this).prop("checked")); }); /*=========================當下面的五個小選擇框選滿時候，上面的全選也會勾選============================*/ $(document) .on( "click", ".check_item", function() { //判斷當前選中的元素是不是五個，是的話，則上面的全選也會勾上 //:checked是jquery的內容，用來封裝已經勾選的內容 var flag = $(".check_item:checked").length == $(".check_item").length $("#check_all").prop("checked", flag); }); /*==================批量刪除====================*/ $("#emp_delete_all_btn").click( function() { 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() + "-"; }); //去除empNames的逗號 empNames = empNames.substring(0, empNames.length - 1); //去除del_idstr多出來的橫槓 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); } }); } });

ssm練手（CRUD） 9、實現刪除功能

ssm練手（CRUD） 9、實現刪除功能

PHP學習練手（十）

PHP學習練手（十三）

PHP學習練手（九）

PHP學習練手（三）

PHP學習練手（七）

ssh練手（二） web.xml

ssh練手（五）BatchAction

ssh練手（九）BatchService.java

vue.js搭建使用者管理系統練手（二）----頁面框架搭建

Handler（原理） HandlerThread 輕鬆實現非同步功能

react-native練手（android版）

SSM整合系列之實現物件的增刪查改（CRUD）操作

#學習筆記Python#7、列表字典（12下）&8、列表與字典（第12章掃尾）&9、函式（13）

學生管理表單驗證練手（正則表示式方式）

PHP學習練手（十四）

PHP學習練手（十六）

PHP學習練手（十二）

PHP學習練手（十一）

PHP學習練手（十五）

ssm練手（CRUD） 9、實現刪除功能

相關推薦