>

layui框架中layer父亲和儿子页面交互的秘籍剖析

- 编辑:乐百家599手机首页 -

layui框架中layer父亲和儿子页面交互的秘籍剖析

// 父页面

当layer以iframe层的艺术弹出新的窗口(子页面),如何在子页面中访问父页面包车型地铁因素和函数。

展开弹出层:

$(document).ready(function(){
//添加任务弹出层
addTask(); 
});
//弹出层
function addTask(){
$('[data-id="addList"]').on('click', function(){
layer.open({
type: 2,title: '添加任务',
closeBtn:1,
//maxmin: true,
shadeClose: false, //点击遮罩关闭层
area : ['15%' , '28%'],//弹层宽高
content: 'jsp/taskconf/roundConf-addList.jsp'
});
});
//关闭弹层
layerClose();
addTeam("addTeam");
addTeam("addRule");
}
//点击确定按钮,先传值到父页面,然后关闭弹层
function layerClose(){
('[data-id="saveBtn"]').click(function(){ //点击确定按钮,获取弹层输入值,传入父页面 var parentId=parent.('[data-id="saveBtn"]').click(function(){ //点击确定按钮,获取弹层输入值,传入父页面 var parentId=parent.("#leftTree_1_ul");//接收值的父页面ID
var txt = $('[data-id="team-txt"]').val();//弹出层内获取要传出的值
var str = "<li id="leftTree_9" class="level1" tabindex="0" hidefocus="true">"  
""  
"<a id="leftTree_9_a" class="level1" target="_blank" title='" txt "'>"  
""  
"" txt ""  
"";
parentId.append(str);//传值到父页面
 //先得到当前iframe层的索引
 var index = parent.layer.getFrameIndex(window.name);  
 parent.layer.close(index); //再执行关闭 
});
}

// 子页面

你或然感兴趣的稿子:

  • layer完成关闭弹出层刷新父分界面成效详解
  • 详解Layer弹出层样式
  • layer弹出层父亲和儿子页面事件相互调用方法

在点击form弹出层的“保存”按钮时,假使保留数据成功,则关闭弹出层,并且刷新list页面:

图片 1

您或许感兴趣的稿子:

  • layui框架中layer老爹和儿子页面交互的章程深入分析
  • layer达成关闭弹出层刷新父分界面成效详解
  • 详解Layer弹出层样式
function aa(){
    var index = parent.layer.getFrameIndex(window.name);
    var iframeName = 'layui-layer-iframe' index;
    openDialog1('选择XXX', '${ctx}/*****,'800px', '500px',iframeName);
}
function openDialog1(title,url,width,height,target){
    top.layer.open({
      type: 2,
      area: [width, height],
      title: title,
      maxmin: true, //开启最大化最小化按钮
      content: url ,
      btn: ['确定', '关闭'],
      yes: function(index, layero){
         var body = top.layer.getChildFrame('body', index);
         var iframeWin = layero.find('iframe')[0]; //得到iframe页的窗口对象,执行iframe页的方法:iframeWin.method();
         var inputForm = body.find('#inputForm');
         var top_iframe;
         if(target){
           top_iframe = target;//如果指定了iframe,则在改frame中跳转
         }else{
           top_iframe = top.getActiveTab().attr("name");//获取当前active的tab的iframe
         }
         inputForm.attr("target",top_iframe);//表单提交成功后,从服务器返回的url在当前tab中展示
         if(iframeWin.contentWindow.doSubmit(top_iframe) ){
           top.layer.close(index);//关闭对话框。
           top.window[iframeName].frames.location.reload();//刷新父亲
         }
     },
     cancel: function(index){
      }
  });
}
//子页面回调方法
function addRecord(name,chainName){
  alert(name);
}

在list页面点击时,弹出form弹出层,list.js:

在此粘贴下代码,未来境遇,方便纪念,如有疑问请留言,恐怕会为您解答

以上那篇layer弹出层老爹和儿子页面事件互相调用方法就是我分享给大家的全体内容了,希望能给大家贰个参考,也愿意大家多多协理脚本之家。

layer是一款近年来面对钟情的web弹层组件,官网地址是:

$(".add_category,.update").click(function(){  
    //弹出框  
    var doMain = $('.domain_name').val();  
    layer.open({  
      shade: [0.5, '#000', false],  
      type: 2,  
      area: ['900px', '530px'],  
      fix: false, //不固定  
      maxmin: true,  
      title: ['添加或修改用户类型', false],  
      content: doMain "/Stat/QueryUserCategoryForm.action?adminUserCategory.id=" $(this).val()  
    });  
  });  

当下做的门类中用到layer弹层传值,弹层输入框输入文本,点击分明开关,父页面包车型大巴树结构,会自动抬高分组。

<body>

<a data-url="bbbb.html" id="parentIframe">小小提示层</a>
<input id="shuzhi" />
<button class="but_par">父页面</button>
</body>
<script src="../jquery-1.9.1.min.js"></script>
<script src="layer/layer.js"></script>
<script>
$(function(){
$("#parentIframe").click(function(){
var a = $(this).attr("data-url");
layer.open({
  type: 2,
  content: a,
  success: function(layero, index){
    var body = layer.getChildFrame('body', index);//获取子页面内容
    var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象,执行iframe页的方法:iframeWin.method();
   body.find("#transmit").click();//执行子页面的方法
    body.find('input').val('Hi,我是从父页来的')
    $(".but_par").click(function(){
    alert(222);
    })
  }
}); 
})
})

叁、怎么着关闭弹出的子页面窗口

submitHandler: function (form){  
      $.post(  
        $('.domain_name').val() "/Stat/AddOrUpdateUserCategory.action",  
        $(form).serialize(),  
        function(data){  
          var result = eval("(" data ")");  
          if(!result.status){  
            alert(result.message);  
          }else{  
            //添加数据成功,关闭弹出窗之前,刷新列表页面的数据  
            parent.window.location.href=$('.domain_name').val() "/Stat/QueryUserCategoryListStat.action";  
             var index = parent.layer.getFrameIndex(window.name); //获取窗口索引  
            parent.layer.close(index);  
          }  
        }  
      );  
    }  

以上所述是作者给大家介绍的jQuery Layer弹出层传值到父页面,希望对我们有着帮助,尽管我们有其它疑问请给本身留言,作者会及时回复我们的。在此也特别感激我们对台本之家网址的帮助!

<body>
<input id="name" value="不满意" />
<button id="transmit">给父层传值</button>
</div>
</body>
<script>
$(function(){
$(document).on("click","#transmit").click(function(){
parent.$("#shuzhi").val($("#name").val());
parent.location.reload(); 刷新父页面
//关闭layer弹出层
var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
parent.layer.close(index);
})
window.parent.$(".but_par").click();//执行父页面的事件
})
</script>
function doSubmit(iframeName) {
    var sel=$("tbody tr td input.i-checks:checked");
    var size = sel.size();
    if(size==0){
      top.layer.alert('请至少选择一条数据!', {icon: 0, title:'警告'});
      return false;
    }else{
      for(var i=0;i<size;i  ){
        top.window[iframeName].addRecord(sel[i].name,sel[i].value);
      }
      return true;
    }
}

在list页面带入layer.js 

你或然感兴趣的篇章:

  • layer子层给父层页面成分赋值,以达到向父层页面传值的效益实例
  • Thinkphp5结合layer弹窗定制操作结果页面
  • layui中layer前端组件实现图片展现效果的法子深入分析
  • jQuery、layer达成弹出层的开荒、关闭功效
  • web 前端常用组件之Layer弹出层组件
  • jQuery使用Layer弹出层插件闪退难点
  • 能够关闭RealPlayer弹出窗口的遮蔽工具 深青莲软件
  • layer完毕关闭弹出层刷新父界面效用详解
  • layui框架中layer父子页面交互的章程深入分析

本文由乐百家前段发布,转载请注明来源:layui框架中layer父亲和儿子页面交互的秘籍剖析