关于layer.open弹出表单初始化和表单提交更新表格的问题

项目需求：点击表格修改按钮后传入当前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
希望对你有帮助~

关于layer.open弹出表单初始化和表单提交更新表格的问题相关推荐

html5 注册协议弹出层,js制作带有遮罩弹出层实现登录注册表单特效代码分享
本文实例讲述了js制作带有遮罩弹出层实现登录注册表单代码特效代码.分享给大家供大家参考.具体如下: 运行效果图: ----------------------查 ...
layer重复弹出(layui弹层同时存在多个)的解决方法
layer重复弹出(layui弹层同时存在多个)的解决方法参考文章: (1)layer重复弹出(layui弹层同时存在多个)的解决方法 (2)https://www.cnblogs.com/sird ...
jquery 左右移动以及使用layer.js弹出框呈现在页面上
今天写了一个左右移动但是发现自己写的css效果一直都加不上去,不管了,还是先上自己有问题的代码,毕竟在失败中发现问题也是一种成长么. 好吧,其实我们都知道在列表有边框里,它的值来源于左边框,那么如果 ...
layer弹窗弹出位置不在浏览器窗口居中的问题的解决方法
layer弹窗弹出位置不在浏览器窗口居中的问题的解决方法参考文章: (1)layer弹窗弹出位置不在浏览器窗口居中的问题的解决方法 (2)https://www.cnblogs.com/chaoyu ...
layui弹出层之layer.open弹出iframe窗口·
layui弹出层之layer.open弹出iframe窗口· layer.open弹出iframe窗口 [1]该功能为案例,弹出iframe窗口显示上传数据由于layui的弹出层每次执行layer. ...
jquery3和layui冲突导，致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
项目中使用的jquery版本是jquery-3.2.1,在使用layui弹出全屏iframe窗口时,iframe窗口顶部总是出现一个152px高的滚动窗口无法实现真正全屏,代码如下: <!DOC ...
利用Layer组件弹出多个对话框（非嵌套）与关闭及刷新
页面A中弹出页面B,在页面B中弹出页面C,在layer做嵌套ifframe弹出时会遇到C页面被嵌套在B页面中,如果C尺寸大于B,则C将不能显示完整.这个时候可以考虑B,C页面均由A页面弹出从而避免嵌套 ...
layer php弹出层,layer官方演示与讲解（jQuery弹出层插件）
特别说明:事件需自己绑定,以下只展现调用代码. //初体验 layer.alert('内容') //第三方扩展皮肤 layer.alert('内容', { icon: 1, skin: 'layer- ...
layui如何存在多个弹窗_web前端：layer重复弹出(layui弹层同时存在多个)的解决方法...
layer,一个可以让你想到即可做到的web弹窗(层)解决方案(js组件),作者贤心(前端开发工程师).layer侧重于用户灵活的自定义,为不同人的使用习惯提供动力.其意义在于,可以让您的页面拥有更丰 ...

关于layer.open弹出表单初始化和表单提交更新表格的问题

关于layer.open弹出表单初始化和表单提交更新表格的问题相关推荐

最新文章

热门文章