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

}