开发者社区> 桃子红了呐> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

layer iframe层的使用,传参

简介:
+关注继续查看

父层

<div class="col-xs-4 text-left" style="padding-left: 50px;"><button type="button" class="btn btn-success" onclick="addCategory();">添加</button></div>

点击添加,按钮,执行添加方法

复制代码
function addCategory() {
    layer.open({
        title:'<img src="{sh::RES}image/add.gif">&nbsp;添加分类',
        type: 2,
        area: ['700px', '530px'],
        fix: false, //不固定
        maxmin: true,
        content: '{sh::U("Mall/editcategory")}',
        success:function(layero,index){
        },
        end:function(){
            var handle_status = $("#handle_status").val();
            if ( handle_status == '1' ) {
                layer.msg('添加成功!',{
                    icon: 1,
                    time: 2000 //2秒关闭(如果不配置,默认是3秒)
                },function(){
                    history.go(0);
                });
            } else if ( handle_status == '2' ) {
                layer.msg('添加失败!',{
                    icon: 2,
                    time: 2000 //2秒关闭(如果不配置,默认是3秒)
                },function(){
                    history.go(0);
                });
            }
        }
    });
}
复制代码

这个方法,打开一个iframe页面,页面中可以执行一些操作,添加分类,执行完毕后调用一个end方法。这个方法,很有用!

不管执行结果如果,都会调用。

iframe可以传递参数到父页面。

end方法,根据传递的结果,执行一些后续操作。

 

 

iframe层

复制代码
<div class="content">
    <form action="" method="post" id="myform" enctype="multipart/form-data">
        <div class="form-group row">
            <div class="left col-xs-3 text-right">
            <label for="">名称:</label>
            </div>
            <div class="right col-xs-8 text-left">
            <input type="text" class="form-control" id="name" name="name" placeholder="">
            </div>
        </div>

        <div class="form-group row">
            <div class="left col-xs-3 text-right">
            <label for="">类别:</label>
            </div>
            <div class="right col-xs-8 text-left">
            <input type="text" class="form-control" id="name" name="name" placeholder="">
            </div>
        </div>

        <div class="form-group row">
            <div class="left col-xs-3 text-right">
            <label for="">图标:</label>
            </div>
            <div class="right col-xs-8 text-left">
            <input type="file" id="logo" name="logo">
            </div>
        </div>

        <div class="form-group row">
            <div class="left col-xs-3 text-right">
            <label for="">启用:</label>
            </div>
            <div class="right col-xs-8 text-left">
            <input name="status" type="checkbox" checked="checked"> 启用
            </div>
        </div>
        <div class="form-group text-center submit">
            <button type="submit" class="btn btn-primary ">提交</button>
        </div>
    </form>
    </div>
复制代码

表单提交,提交到后台(表单提交,刷新iframe层页面)

复制代码
<script type="text/javascript">
        var index = parent.layer.getFrameIndex(window.name);
        var success = '{sh:$success}';
        if ( success == '1' ) {
            parent.$("#handle_status").val('1');
              parent.layer.close(index);
        } else if( success == '2' ) {
            parent.$("#handle_status").val('2');
            parent.layer.close(index);
        }
    </script>
复制代码

收到执行的结果,success,成功是1,失败是2。执行相应的操作。也就是,

传值+关闭iframe层。

 

父层有一个隐藏的元素,专门用来接收传值的

<input id="handle_status" value="" hidden="hidden">

流程很清晰。

layer很牛逼!

 

 

提交后,提示成功与失败,并且刷新页面。一气呵成。


本文转自TBHacker博客园博客,原文链接:http://www.cnblogs.com/jiqing9006/p/5135697.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
在render函数中如何实现v-model
在render函数中如何实现v-model
0 0
layer 子页面调用父页面
layer 子页面调用父页面
0 0
前端最好用弹框组件-layer
layer是一款近年来备受青睐的web弹层组件,它甚至兼容了包括IE6在内的所有主流浏览器;而且layer采用MIT开源许可证,将会永久性提供无偿服务.现在你肯定对layer充满了兴趣,首先,了解layer肯定避不开layui,layui是一个集合多个组件,例如:layer/laypage/laydate等的前端框架,和Bootstrap是同类别的,而layer一直是layui的代表作.
4611 0
JS window对象的top、parent、opener含义介绍 以及防止网页被嵌入框架的代码
1.top该变更永远指分割窗口最高层次的浏览器窗口。如果计划从分割窗口的最高层次开始执行命令,就可以用top变量。 2.openeropener用于在window.open的页面引用执行该window.open方法的的页面的对象。
1129 0
<frameset>框架集中不同<frame>之间的调用【js代码中】
top:永远指分割窗口最高层次的浏览器窗口;parent:包含当前分割窗口的父窗口,本文将围绕js中top、parent、frame进行讲述及他们的应用案例 引用方法top: 该变量永远指分割窗口最高层次的浏览器窗口。
705 0
dojo传递中文字串时的问题
         今天在Fixing Bug的过程中,发现了一个使用dojo的问题。当输入CJK字符时提交到后台发现就变成了“策”的形式,虽然有时在显示的时候并不会出错的,但是在某些时候放到超链接里或者经过几次前后传递之后就不能正常显示中文了,会直接显示成“策”。
509 0
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载