1. 程式人生 > >Bootstrap開啟模態框後對資料處理(標記模態框的開啟與關閉狀態)

Bootstrap開啟模態框後對資料處理(標記模態框的開啟與關閉狀態)

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;
    }

}
複製程式碼