Bootstrap開啟模態框後對資料處理(標記模態框的開啟與關閉狀態)
阿新 • • 發佈:2018-11-22
JS用全域性變數標記狀態,方法中動態修改全域性變數以標記狀態是一個重要思想。
需求:組合條件查詢資料,查詢完之後填充到模態框中,開啟模態框,模態框中有組合條件查詢,此時查詢只需要更新模態框表格資料不需要開啟模態框,也就是讓模態框開啟方法執行一次。
(點查詢的時候只更新資料不會再次開啟模態框)
思想:JS設定一全域性變數,在手動開啟模態框之後修改全域性變數的值,此時呼叫查詢方法不會執行開啟模態框方法;在手動關閉的時候將全域性變數置為初值,可以在查詢的時候再次開啟模態框。
模態框的一些重要事件:
下表列出了模態框中要用到事件。這些事件可在函式中當鉤子使用。
show.bs.modal | 在呼叫 show 方法後觸發。 | $('#identifier').on('show.bs.modal', function () { // 執行一些動作... }) |
shown.bs.modal | 當模態框對使用者可見時觸發(將等待 CSS 過渡效果完成)。 | $('#identifier').on('shown.bs.modal', function () { // 執行一些動作... }) |
hide.bs.modal | 當呼叫 hide 例項方法時觸發。 | $('#identifier').on('hide.bs.modal', function () { // 執行一些動作... }) |
hidden.bs.modal | 當模態框完全對使用者隱藏時觸發。 | $('#identifier').on('hidden.bs.modal', function () { // 執行一些動作... }) |
解決方法:
1.定義全域性變數
var inner_open = false, out_open = false;// 用於記錄兩個模態框是否開啟
2.模態框關閉事件:(全域性變數置為初值)
$(function() { // 內部模態框關閉的時候將標誌欄位設為false $('#innerEmployeeModal').on('hidden.bs.modal', function() { inner_open = false; }); // 外部模態框關閉的時候將標誌欄位設為false $('#outEmployeeModal').on('hidden.bs.modal', function() { out_open = false; }); })
3.查詢資料與開啟模態框:開啟模態框後修改全域性變數值
/** *S 查詢內部部門員工 */ var queryInnerEmployee = function() { var departments = $("#el_chooseDepart1").text();// 獲取部門名字 // 如果沒有選擇部門提醒選擇部門,否則查詢 if (departments.length > 0) { departments = departments.substring(0, departments.length - 1); $("input[name='queryInnerEmployeesCondition.departments']").val( departments); ajaxQueryEmployeeIn(departments); } else { alert("至少選擇一個部門"); return; } } var ajaxQueryEmployeeIn = function(departments) { $.ajax({ url : contextPath + '/exam_getEmployeeIns4Exam.action', data : $("#queryInnerForm").serialize(), type : 'POST', dataType : 'json', success : showEmployeeInModal, error : function() { alert("查詢內部員工出錯!!!") } }); } function showEmployeeInModal(response) { // alert(JSON.stringify(response));// 轉換為JSON串輸出 $("#innerEmployeeTable").html(""); var examEmployeeIns = response.examEmployeeIns; for (var i = 0, length = examEmployeeIns.length; i < length; i++) { var sex = examEmployeeIns[i].sex == '1' ? "男" : "女"; var trainInt = examEmployeeIns[i].trainStatus; var tarinStr; if (trainInt == 0) { tarinStr = "一級也未考"; } if (trainInt == 1) { tarinStr = "通過一級考試"; } if (trainInt == 2) { tarinStr = "通過二級考試"; } if (trainInt == 3) { tarinStr = "通過三級考試"; } var tr_inner = '<tr><td>' + '<input type="checkbox" name="employeeIn" value="' + examEmployeeIns[i].idCode + '" class="el_checks" /></td><td>' + examEmployeeIns[i].name + '</td><td>' + sex + '</td><td>' + examEmployeeIns[i].idCode + '</td>' + '<td>' + examEmployeeIns[i].departmentName + '</td><td>' + tarinStr + '</td></tr>'; $("#innerEmployeeTable").append(tr_inner); } // alert(JSON.stringify(data));//轉換為JSON串輸出 // 如果模態框未開啟就開啟模態框並設定標誌欄位為已開啟 if (!inner_open) { $("#innerEmployeeModal").modal({ backdrop : 'static', keyboard : false }); inner_open = true; } }