模态框--传值
模态框
模态框是覆盖在父页面的上的子窗体,通过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> ');
}
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">×</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">×</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
});
}
}
});
}
}
效果图如下