Bootstrap开启模态框后对数据处理(标记模态框的开启与关闭状态)

  

  JS用全局变量标记状态,方法中动态修改全局变量以标记状态是一个重要思想。

  需求:组合条件查询数据,查询完之后填充到模态框中,开启模态框,模态框中有组合条件查询,此时查询只需要更新模态框表格数据不需要开启模态框,也就是让模态框开启方法执行一次。

(点查询的时候只更新数据不会再次开启模态框)

Bootstrap开启模态框后对数据处理(标记模态框的开启与关闭状态)

  思想: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;
} }
上一篇:项目重构之数据源配置与优化:log4j 配置数据库连接池Druid,并实现日志存储到数据库


下一篇:RabbitMQ三种Exchange模式(fanout,direct,topic)的特性 -摘自网络