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;
} }
Bootstrap开启模态框后对数据处理(标记模态框的开启与关闭状态)的更多相关文章
- easyui弹框后销毁当前tab弹框不显示的解决方式
var id=$("#pageId").val(); var message = "{\"id\":" + id+ ",\&quo ...
- bootstrap折叠调用collapse()后data-parent不生效问题
今天做的项目,用到了bootstrap的折叠功能,这个功能需要只展开一个折叠框,点击一个就会自动隐藏另一个,初始按照API做了一下,发现一切运行正常,但是测试的同事提了一个bug,说切换到其他模块后再 ...
- 【代码笔记】iOS-点击搜索按钮,或放大镜后都会弹出搜索框
一, 效果图. 二,工程图. 三,代码. RootViewController.h #import <UIKit/UIKit.h> #import "CLHSearchBar.h ...
- jquery选中将select下拉框中一项后赋值给text文本框
jquery选中将select下拉框中一项后赋值给text文本框,出现无法将第一个下拉框的value赋值给文本框 因为select默认选中第一项..在选择第一项时,便导致无法激发onchange事件. ...
- 折腾iPhone的生活——iPhone 5s 开启 assistive touch 后卡顿的问题
刚刚入手我的国行iPhone5s土狗灰,感觉倍棒~ 但是一上手就发现了一个问题:卡顿. 卡顿不仅体现在日常使用中,游戏中更加严重,当我玩水果忍者的时候,会发现切水果的画面都变得不流畅起来,这是拥有64 ...
- .net 弹出消息框后,页面样式变乱
点击按钮,执行提交操作,弹出消息框后,页面的样式变乱,解决方法: 首先,确定使用的css样式正确,页面中的宽高值保持规范统一: 然后,弹出框避免使用Response.Write(),如下所示 Resp ...
- win10锁屏或睡眠一段时间后弹不出登录框
win10锁屏或睡眠一段时间后弹不出登录框 文:铁乐与猫 通常发生在win10更新到10周年版后发生,也就是会卡在登录状态,但不见输入登录框. 我出现这种情况的时候不是很严重,一般等久些也能出现,但问 ...
- 关于解决DevExpress用DevExpress patch工具破解后经常弹出试用框的问题
方法有效自己试过很棒!!!!!!!! 第一:破解工具:DevExpressComponents-14.1.4和破解工具 第二:解决DevExpress用DevExpress patch工具破解后经常弹 ...
- 鼠标点击input框后里面的内容就消失
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- Android计算器布局
Android(安桌)计算器布局实现 ——解决整个屏幕方案 引言: 学完了android布局的几种方式,做了一个android计算器. 我在网上搜索了这方面的资料,发现了布局都 ...
- iPhone Tutorials
http://www.raywenderlich.com/tutorials This site contains a ton of fun written tutorials – so many t ...
- ucosii(2.89)mutex 应用要点
mutex 的创建在于共享资源打交道是可以可以保证满足互斥条件:1,必须保证继承优先级要高于可能与相应共享资源打交道的任务中优先级最高的优先级.2,不要将占有Mutex的任务挂起,也不要让占有mute ...
- Python list 列表和tuple元组
1 list是一种Python的数据类型--列表 list是一种有序的集合,可以进行增删改查 >>>name=[aa,bb,cc] >>>name ['aa','b ...
- 数据库-SQL语法:GROUP BY与HAVING
注意:select 后的字段,必须要么包含在group by中,要么包含在having 后的聚合函数里. 1. GROUP BY 是分组查询, 一般 GROUP BY 是和聚合函数配合使用. grou ...
- windows10 下安装、配置、启动mysql
下载mysql 可以自行去百度 或者 https://dev.mysql.com/downloads/mysql/5.7.html#downloads 解压mysql-5.7.26-winx64.zi ...
- java运行环境jdk的安装和环境变量的配置教程
jdk的下载与安装 一.官网下载jdk 1.百度搜索jdk,进入官网,如下图所示: 官网下载jdk图1 2.在官网网站中找到合适的版本下载(以最新版本为例),如下图所示: 官网下载jdk图2 官网下载 ...
- Java形式参数和返回值的问题
形式参数和返回值的问题 (1).形式参数: A.类名:需要该类的对象. B.抽象类名:需要该类的子类对象. C.接口名:需要该接口的实现类对象. A.类名作为形式参数 class Student { ...
- iOS UI 设计
优设 http://www.uisdc.com Sketch http://www.sketchcn.com
- ios之UITabelViewCell的自定义(xib实现)
通过继承UITableViewCell来自定义cell 1.创建一个空的项目.命名: 2.创建一个UITableViewController 并且同时创建xib: 3.设置AppDelegate.m中 ...