模态框--传值

模态框

模态框是覆盖在父页面的上的子窗体，通过mota模态框与后台交互，需要向模态框传值。

在个人博客用户管理中（https://blog.csdn.net/qq_36882355/article/details/86986351）通过bootstrap-table生成表格，在“操作”列设置修改/删除用户的功能，用模态框实现。

模态框触发按钮如下设置 

{
			field : 'userId',
			title : '操作',
			rowspan : 1,
			formatter: function(value, row, index) {
				var strArray = new Array();
				if('ADMIN' != row.roleName ){
					strArray.push('<span class="glyphicon glyphicon-edit" onclick="editInfo(this)" data-toggle="modal" data-target="#updateModal" ></span>    <span class="glyphicon glyphicon-trash" onclick="set('+row.userId+')" data-toggle="modal" data-target="#deleteModal"></span>&nbsp;');
				}
				return strArray.join("");
			}
		},

data-toggle：以什么事件触发，如modal,popover,tooltips等；

 data-target="#updateModal" 是想要在页面上加载的模态框的目标。

模态框主体html 

<div class="modal fade" id="updateModal" tabindex="-1" role="dialog"
			aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						<h3 class="modal-title" id="myModalLabel">修改信息</h3>
					</div>
					<div class="modal-body">
			<form id="itemForm" method="post" style="text-align: center;" class="form-horizontal form-adjust" >

			<div class="form-group">
				<label for="userId" class="col-xs-3" >用户ID：</label>
				<div class="col-xs-6">   				
    			<input id="userId" name="userId" type="text" disabled class="form-control" />			
				</div>
			</div>
			<div class="form-group">
				<label for="userName" class="col-xs-3" >用户名：</label>
				<div class="col-xs-6">   				
    			<input id="userName" name="userName" type="text" disabled class="form-control" />			
				</div>
			</div>			
			<div class="form-group">				
				<label for="nickName" class="col-xs-3">昵称：</label>	
				<div class="col-xs-6">												
    			<input id="nickName" name="nickName" type="text" class="form-control" />			
				</div>
				<div class="col-xs-3"></div>
			</div>
   			<div class="form-group">
				<label for="phoneNo" class="col-xs-3">手机：</label>
				<div class="col-xs-6">  				
   				<input id="phoneNo" name="phoneNo" type="text" class="form-control" />
   				</div>
				<div class="col-xs-3"></div>
			</div>
   			<div class="form-group">
				<label for="email" class="col-xs-3">邮箱：</label>
				<div class="col-xs-6">  				
   				<input id="email" name="email" type="email" autocomplete="off" class="form-control" />
   				</div>
				<div class="col-xs-3"></div>
			</div>
			</form>
					</div>
					<div class="modal-footer">
						<button type="button" name="submit" class="btn btn-primary" onclick="update()">提交更改</button>
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						
					</div>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal -->
		</div>
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="editModalLabel">提示</h4>
            </div>
            <div class="modal-body">
                确定要删除吗？
                <input type="hidden" id="hiddenuserid">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="del()">确定</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

 

在模态框中需要注意两点：

第一是 .modal，用来把 <div> 的内容识别为模态框。

第二是 .fade class。当模态框被切换时，它会引起内容淡入淡出。

aria-labelledby="myModalLabel"，该属性引用模态框的标题。

属性 aria-hidden="true" 用于保持模态窗口不可见，直到触发器被触发为止（比如点击在相关的按钮上）。

<div class="modal-header">，modal-header 是为模态窗口的头部定义样式的类。

class="close"，close 是一个 CSS class，用于为模态窗口的关闭按钮设置样式。

data-dismiss="modal"，是一个自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口。

class="modal-body"，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的主体设置样式。

class="modal-footer"，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的底部设置样式。

data-toggle="modal"，HTML5 自定义的 data 属性 data-toggle 用于打开模态窗口。

模态框传值

这里通过js获取表格内元素的value并传给对应id的input，代码如下

其中var id = event.srcElement.parentElement.parentElement.rowIndex得到table的指定行号

event首先这个是触发事件的源对象 .srcElement选中对象，.parentElement是对象的父元素

因此这里触发事件的event是TD的一个元素，.parentElement是TD，.parentElement.parentElement是TR，.rowIndex就是对应的行号了。

再通过document.getElementById("data-table").rows[id].cells[0].innerText;来获取指定位置的值。rows[]和cells[]都是从0开始索引

function set(id){
		$('#hiddenuserid').val(id);
	};
	function del(){
			$.ajax({
				type:'post',
				url:'/admin/delete',
				data:{'userId':$("#hiddenuserid").val()
					
					},
					success : function(jsonData) {
						if (jsonData.success) {
							location.reload();
							return;
						} else {
							$.message(jsonData.message, {
								time : 2
							}); 
						}
					}
			});		
	}
	
	function editInfo(obj) {
        var id = event.srcElement.parentElement.parentElement.rowIndex;
		var userId = document.getElementById("data-table").rows[id].cells[0].innerText;
		var userName = document.getElementById("data-table").rows[id].cells[3].innerText;
		var nickName = document.getElementById("data-table").rows[id].cells[4].innerText;
		var phoneNo = document.getElementById("data-table").rows[id].cells[5].innerText;
		var email = document.getElementById("data-table").rows[id].cells[6].innerText;
		
		$('#userId').val(userId);
		$('#userName').val(userName);
		$('#nickName').val(nickName);
		$('#phoneNo').val(phoneNo);
		$('#email').val(email);
	}
	
	
	function update() {
		var form = $("#itemForm");
		var validator = $(form).validate({
			meta : "validate"
		});
		if (validator.form()) {
			$(form).goAjax({
				semantic : false,
				url : 'admin/update',
				data : {'userId':$("#userId").val()},
				success : function(jsonData) {
					if (jsonData.success) {
						location.reload();
						return;
					} else {
						$.message(jsonData.message, {
							time : 2
						}); 
					}
				}
			});
		}
	}

效果图如下