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

}