摘要：
JS使用全局变量来标记状态。在该方法中，动态修改全局变量以标记状态是一个重要的思想。模态框的一些重要事件：下表列出了模态框中要使用的事件关于解决方案：1.定义全局变量variable_open=false，out_open=false；//用于记录两个模态框是否打开。2.模态箱关闭事件：$3。查询数据并打开模式框：打开模式框后修改全局变量值/**S查询内部部门员工*/varqueryInnerEmployee=function（）｛varddepartments=$.text（）；//获取部门名称//如果未选择部门，则提醒您选择部门，否则查询｛departments=departments.substring；$.val；ajaxQueryEmployeeIn；｝否则｛alert；return；｝VarajaxQueryEmployeeIn=函数｛$.ajax（｛url:contextPath+‘/exam_getEmployeeIns4Exam.action‘，数据：$（“#queryInnerForm”）.serialize（），类型：'POST'，数据类型：'json'，成功：showEmployee模式，错误：function（）｛alert（“查询内部员工时出错！！！
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 + '" /></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;
}
}