关于layer.js使用心得-向弹出框传值问题

目录
  • layer.js使用心得-向弹出框传值
    • 问题背景
    • 问题描述
    • 问题分析
  • layui传值的一些经验,也没怎么整理:表格渲染数据,弹出框
    • 1.layui向表格渲染数据的格式转换
    • 2. layui弹出框,并且在表格里选中

layer.js使用心得-向弹出框传值

问题背景

实现弹出对话框加载页面,所以我选择了独立组件layer.js。

基于layer.js组件弹出了一个新的iframe的窗口(假设name为LayerFrame,方便后面称呼),但需要从之前的页面传入参数

注:'#sayHello'元素是在主窗口下的 HomeFram(HomeFrame是主窗口下的子 iframe) 里

代码如下:

$('#sayHello').click(function () {
        top.layer.open({
            id: "layer_say_hello",
            type: 2,
            title: '打招呼',
            shadeClose: true,
            shade: 0.8,
            area: ['500px', '400px'],
            content: '/Findfriend/Part_SayHello', //iframe的url
            success: function (layero, index) {
                //传入参数,并赋值给iframe的元素
            }
        });
    })

问题描述

在success回调函数中使用jquery选取不到弹出的 ifram 的元素

问题分析

经过下午的头破 血流,终于被我给分析出来了,功夫不负有心人啊。废话少说,重点来了。

原因是:

success回调函数的上下文并不是 主窗口的上下文, 而是 HomeFrame 的上下文。所以在success回调函数中是可以直接找到 HomeFrame 中的元素。

如果要找到 LayerFrame 的元素,就必须先找到 LayerFrame 的Dom对象,然后方可找到 LayerFrame 的 document ,最后再去找 LayerFrame 的元素

正确代码如下:

$('#sayHello').click(function () {
        top.layer.open({
            id: "layer_say_hello",
            type: 2,
            title: '打招呼',
            shadeClose: true,
            shade: 0.8,
            area: ['500px', '400px'],
            content: '/Findfriend/Part_SayHello', //iframe的url
            success: function (layero, index) {
                var her_uli_id = $("#headico").attr("data-uli-id"); //headico 是 HomeFrame的元素
                var her_nickname = $("#nickname").text();   //nickname 是 HomeFrame的元素
                // layero.find("iframe")        找到iframe的jquery对象
                // layero.find("iframe")[0]     将jqeruy对象转化为Dom对象
                // contentWindow                获取当前 iframe 的 内容 window对象(Dom对象)
                //.send-hello 是 LayerFrame 的元素
                var jquerySendHelloButton = $(".send-hello", layero.find("iframe")[0].contentWindow.document);
                jquerySendHelloButton.attr("data-her-uli-id", her_uli_id);
                jquerySendHelloButton.attr("data-her-nick-name", her_nickname);
            }
        });
    })

layui传值的一些经验,也没怎么整理:表格渲染数据,弹出框

1.layui向表格渲染数据的格式转换

buffer.append("{\"code\":0,\"msg\":\"\",\"count\":" + countTotal + ",\"data\":[" + buffer2 + "]}");
        StringBuffer buffer = new StringBuffer();
        StringBuffer buffer2 = new StringBuffer();
        try {
            if (takenumberlist.size() != 0 && takenumberlist != null) {
                buffer2 = JsonUtils.listTojson(buffer2, takenumberlist);
            }
            buffer.append("{\"code\":0,\"msg\":\"\",\"count\":" + countTotal + ",\"data\":[" + buffer2 + "]}");
        } catch (IllegalArgumentException e) {
            e.printStackTrace();
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        }
        model.addAttribute("buffer", buffer.toString());
        System.out.println("layui传值执行成功!");
        
        return buffer.toString();

需要引入一个工具栏JsonUtils.java

界面接收:<table class="layui-hide" id="demo" lay-filter="test">

js:

  table.render({
    elem: '#demo'
    ,width : 430
    ,height: 535
    ,url: "http://localhost:8080/hospital/takenumber.do?ks_code=${dept_code}" //数据接口
    ,page: true //开启分页
    ,autoSort: true//自动排序
    , initSort: {field:'id', type:'asc'}
    /* ,totalRow: true  *///开启合计行
    ,cols: [[ //表头
      {type: 'checkbox', fixed: 'left'}
      ,{field: 'id', title: '编号', width:80, sort: true, totalRow: true} 
      ,{field: 'person_name', title: '姓名', width:85}
      ,{field: 'queue_code', title: '取号号码', width: 115, sort: true, totalRow: true}
      ,{field: 'specify_doctor_code', title: '医生工号', width: 96, sort: true, totalRow: true}  
      /* ,{field: 'doctor_name', title: '医生', width:80, sort: true}  */
      /* ,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}  */ 
    ]]
  });

2. layui弹出框,并且在表格里选中

弹出框:

<script type="text/html" id="move-dialog">
<form class="layui-form" action="" lay-filter="move-form">
    <div class="layui-form-item">
        <label class="layui-form-label" style="width:110px;text-align:center">姓名</label>
        <div class="layui-input-block">
            <input type="hidden" name="id" required lay-verify="required" placeholder="姓名" class="layui-hidden" disabled>
            <input type="text" name="person_name"  lay-verify="" placeholder="姓名" class="layui-input" disabled>
        </div>
    </div>
    
    <div class="layui-form-item">
        <label class="layui-form-label" style="width:110px;text-align:center">取号号码</label>
        <div class="layui-input-block">
            <input type="text" name="queue_code"  lay-verify="" placeholder="取号号码" class="layui-input" disabled>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width:110px;text-align:center">当前排序号</label>
        <div class="layui-input-block">
            <input type="number" name="order_by_num"  lay-verify="move" placeholder="排序号" class="layui-number" >
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="but-move-submit">保存</button>
            <!-- <button type="reset" class="layui-btn layui-btn-primary">重置</button> -->
        </div>
    </div>
</form>
</script>

触发弹出框:

$("#but-appoint").click(function(){
      var array = table.checkStatus('demo').data;
      if(array.length==0){
          layer.msg('请选择要操作的记录');
      }else if(array.length != 1){
          layer.msg('每次只能选择一行');
      }else{
          console.log(array);
           layer.open({//定义一个对话框
              type : 1,
              title : '医生指定',
              content : $("#appoint-dialog").html(),//加载表格元素给content
              area : ['600px','450px']
          })
          
                form.val('appoint-form',{//填充表单
                "id" : array[0].id,
              "person_name" : array[0].person_name,
              "queue_code" : array[0].queue_code,
              "doctor_name01" : array[0].doctor_name, 
              "specify_doctor_code" : array[0].specify_doctor_code
              
          })
          form.on('submit(but-appoint-submit)',function(data){//提交表单到后台
              
              console.log(data.field.id);
              console.log(data.field.doctor_name);
              console.log(data.field.doctor_code);
              console.log(data.field.specify_doctor_code);
              
              $.post('http://localhost:8080/hospital/appoint.do',data.field,function(flag){
                  if(flag){
                      layer.msg('操作成功',{icon: 6});
                      console.log(data.field.doctor_code);
                      layer.closeAll();//关闭弹出框
                      table.reload('demo',{});//重新加载
                  }else{
                      layer.msg('操作失败',{icon: 5});
                  }
              })
          
              return false;
          })          
      }
  })

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

时间: 2022-11-06

js弹出模式对话框,并接收回传值的方法

弹出对话框的页面A: 复制代码 代码如下: <script type="text/javascript">    function openDialog(){        paramers="dialogWidth:500px; dialogHeight:300px; status:no";        workerId = window.showModalDialog("userList.aspx","",p

使用layer模态框给新页面传值的方法

昨天用hui后台模板的时候用到模态框传值给另一个新页面 模板是这么写的 没办法给新页面传值,于是百度了一下,总结 function zhuyuan(title,url,id,w,h,type){ layer.open({ title:'添加分类', type: 2, area: ['700px', '530px'], fix: false, //不固定 maxmin: true, content: '{:url("yuyue/huayan")}?type=3', success:fun

layer弹出子iframe层父子页面传值的实现方法

本文介绍了layer弹出子iframe层父子页面传值的实现方法,分享给大家,具体如下: 父页面获取子页面元素 格式: $("#iframeID").contents().find("#eleID") 示例代码: father.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&

layer弹出的iframe层在执行完毕后关闭当前弹出层的方法

如下所示: 这种弹出层在ajax执行完添加房间的动作后在回调里写 var index = parent.layer.getFrameIndex(window.name); setTimeout(function(){parent.layer.close(index)}, 1000); 1秒后,当前窗口就会关闭了 以上这篇layer弹出的iframe层在执行完毕后关闭当前弹出层的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

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 能实现监听F5页面刷新子iframe 而父页面不刷新的方法

重点是阻止默认的刷新,这样外部页面就不刷新了,然后指定刷新iframe,我下面给出了思路 document.onkeypress = function(e){ if(e.keyCode == 116){ e.preventDefault(); //组织默认刷新 var iframeSrc = iframe.src; iframe.src = iframeSrc; } } iframe页面里再写如下: var iframeSrc = parent.iframe.src; document.onke

.net 弹出消息框后导致页面样式变乱解决方法

点击按钮,执行提交操作,弹出消息框后,页面的样式变乱,解决方法: 首先,确定使用的css样式正确,页面中的宽高值保持规范统一: 然后,弹出框避免使用Response.Write(),如下所示 复制代码 代码如下: Response.Write("<script language=javascript>"); Response.Write("window.alert('"); Response.Write("计划添加失败!"); Res

jQuery Layer弹出层传值到父页面的实现代码

目前做的项目中用到layer弹层传值,弹层输入框输入文本,点击确定按钮,父页面的树结构,会自动添加分组. 在此粘贴下代码,以后遇到,方便回忆,如有疑问请留言,或许会为您解答 $(document).ready(function(){ //添加任务弹出层 addTask(); }); //弹出层 function addTask(){ $('[data-id="addList"]').on('click', function(){ layer.open({ type: 2,title:

解决layer弹出层的内容页点击按钮跳转到新的页面问题

在参与的一个项目中,有一个这样的需求,导入基础数据成功后,默认弹出一个管理员登录页,点击登录按钮,需要跳到管理页面. 导入页按钮: <button type="button" id="start" class="layui-btn layui-btn-radius layui-btn-lg layui-bg-orange btn3"><i>导入</i></button> 导入按钮的点击事件,点击后会

解决layer弹出层自适应页面大小的问题

前两天在Vue中引入了Vue-layer插件,实现了弹出层效果.不过由于是在22寸屏下开发的,没多想,弹出层的area的长宽就设定的都是800px,效果还很好.结果那给用户看,他们是12寸的笔记本.弹出层直接撑爆了页面,无法关闭... 网上的解决方案大都是以下几种: 1.改成百分比形式.有bug,下面细说. 2.改成em,rem等.同上 3.采用area:auto.可能是因为采用了swiper的原因吧,这样设置会导致弹出层出现"顶天立地"的效果 4.采用iframeAuto.这个没太搞

layer弹出层 iframe层去掉滚动条的实例代码

如下所示: function newcont(url) { var index = layer.open({ title:false, type: 2, shadeClose: true, scrollbar: false, content: [url , 'no'] }); } 试了很多方法 最后发现layer的手册上就有,传入url的时候直接在后面加一个"no"就可以屏蔽掉滚动条... 以上这篇layer弹出层 iframe层去掉滚动条的实例代码就是小编分享给大家的全部内容了,希望

详解Layer弹出层样式

前言:学习layer弹出框,之前项目是用bootstrap模态框,后来改用layer弹出框,在文章的后面,我会分享项目的一些代码(我自己写的). layer至今仍作为layui的代表作,她的受众广泛并非偶然,而是这五年多的坚持,不断完善和维护.不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力.目前,layer已成为国内最多人使用的web弹层组件,GitHub自然Stars3000+,官网累计下载量达30w+,大概有20万Web平台正在使用layer. 具体请