脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → layer.js使用心得-向弹出框传值

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

 更新时间：2022年11月08日 10:23:09   作者：returningprodigal  
这篇文章主要介绍了关于layer.js使用心得-向弹出框传值问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

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;
          })          
      }
  })

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。 

您可能感兴趣的文章:

相关文章

  • TypeScript 中接口详解

    TypeScript 中接口详解

    TypeScript核心设计原则之一就是类型检查，通过使用接口(Interfaces)可以进行类型检查，满足传统面向对象思想，利于有效开发，有效避免类型转换问题。
    2015-06-06
  • 8 个有用的JS技巧(推荐)

    8 个有用的JS技巧(推荐)

    这篇文章主要介绍了8 个有用的JS技巧(推荐)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-07-07
  • js获取当前页面的url网址信息

    js获取当前页面的url网址信息

    这篇文章主要介绍了通过js如何获取当前页面的url网址信息,需要的朋友可以参考下
    2014-06-06
  • 详解js中let与var声明变量的区别

    详解js中let与var声明变量的区别

    这篇文章主要介绍了let与var声明变量区别，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • JavaScript去除数组里重复值的方法

    JavaScript去除数组里重复值的方法

    这篇文章主要介绍了JavaScript去除数组里重复值的方法,涉及javascript针对数组操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • ES6教程之for循环和Map,Set用法分析

    ES6教程之for循环和Map,Set用法分析

    这篇文章主要介绍了ES6教程之for循环和Map,Set用法,结合实例形式分析了ECMAScript6中for循环和Map,Set基本概念、功能、使用方法与相关注意事项,需要的朋友可以参考下
    2017-04-04
  • javasciprt下jquery函数$.post执行无响应的解决方法

    javasciprt下jquery函数$.post执行无响应的解决方法

    这篇文章主要介绍了javasciprt下jquery函数$.post执行无响应的解决方法,需要的朋友可以参考下
    2014-03-03
  • JavaScript简单下拉菜单实例代码

    JavaScript简单下拉菜单实例代码

    这篇文章主要介绍了JavaScript简单下拉菜单,采用JavaScript定时函数递归调用实现菜单渐显效果,非常简单实用,需要的朋友可以参考下
    2015-09-09
  • Bootstrap每天必学之导航条

    Bootstrap每天必学之导航条

    Bootstrap每天必学之导航条，本文向大家讲解了多种多样的导航条，以及导航条中元素的实现方法，感兴趣的小伙伴们可以参考一下
    2015-11-11
  • JavaScript实现钟表案例

    JavaScript实现钟表案例

    这篇文章主要为大家详细介绍了JavaScript实现钟表案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-01-01

最新评论