项目需求:点击表格修改按钮后传入当前tr的值赋值给弹出层的表单(初始值),然后通过修改表单里面的值来提交到后台并更新页面表格数据
首先给按钮绑定弹出层事件,然后初始化表单值
layer.open({
title: '仓储信息修改',
type: 2,
skin: 'layui-layer-rim', //加上边框
area: ['40%', '50%'], //宽高
content: '/admin/changeStor.html', //弹出的页面
shadeClose: true, //点击遮罩关闭
success: function (layero, index) {
var body = layer.getChildFrame('body', index);
var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象,执行iframe页的方法:iframeWin.method();
//console.log(body.html()) //得到iframe页的body内容
//初始化表单数据的值
body.find(".classifyid").val(classifyid); //要修改的每个td的值存为变量传进去
body.find(".s_name").val(s_name);
body.find(".phone").val(phone);
body.find(".city").val(city);
body.find(".country").val(country);
body.find(".postcode").val(postcode);
body.find(".address").val(address);
body.find(".address2").val(address2);
}
});
效果如图:
然后通过确认修改按钮提交表单修改数据并异步请求后台;
//弹出层提交按钮:
form.on('submit(changStor_btn)', function(data){
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
$.ajax({
url: '../',
type: "",
dataType: "json",
data:{/**传入后台的修改后的值**/},
success:function(data){
if(data.code==0){
layer.msg('修改成功');
parent.layer.close(index); //再执行关闭
parent.$(".refresh").click();//通过触发页面局部刷新按钮来刷新父页面更新修改后的表格数据
}
if(data.code==-1){
layer.msg("登录超时",function(){
window.location.href="../login.html";
});
}
if(data.code==1){
layer.msg(data.msg);
}
}
});
return false;
});
特别要注意初始化弹出层表单的值(初始化赋值踩了半天的坑):
var body = layer.getChildFrame('body', index);
var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象,执行iframe页的方法:iframeWin.method();
//console.log(body.html()) //得到iframe页的body内容
body.find(".classifyid").val(classifyid);
layer弹出层详解文档参考:https://blog.csdn.net/daye5465/article/details/77430689
layer弹出层的关闭及父页面的刷新问题:https://blog.csdn.net/kule1208/article/details/78790228