layer:子父之间的数据传递

layer的iframe中获取子页面数据到父页面 先引入jquery.js再引入layer.js 如果报错去官网查看你的layer版本是否支持你的jquery版本 <script type="text/javascript" src="/jquery.js"></script> <script type="text/javascript" src="/layer/layer.js"></script&gt... 阅读详情

layer中有这样的情况,父页面与弹窗(子页面)之间的数据通信。

*表单中的表单元素必须有name属性。

这边我讲一下两种情况(都是以表单为例子):

1、父页面的数据在弹窗(子页面)中显示。
2、子页面(弹窗)反馈的信息,在父页面显示。

这里写图片描述

先解释一下逻辑:
一、子——>父
1、点击“标记”,弹出弹窗:

这里写图片描述

2、填写表单,并提交,点击提交按钮后,判断是否标记了“黑名单“,如果“是”,则在父页面显示layer.msg”你被拉黑名单了!”。

3、父页面js

/**
 * 点击标记 弹窗 标记
 */
$('#ljTable tbody').on('click','.signClick',function(){
    layer.open({
        type: 2,
        skin: 'CLYM-style',
        area: ['500px','300px'],
        title: '标记',
        content: 'sign.html'
    });
});

4、子页面js

var index = parent.layer.getFrameIndex(window.name);//获取子窗口索引
    layui.use('form', function(){
      var form = layui.form();

      //监听提交
      form.on('submit(signForm)', function(data){
        var dataString = JSON.stringify(data.field);
        var dataObj = data.field;
        console.log(dataObj);
        if (dataObj.sign === '是') {
            parent.layer.close(index);
            parent.layer.msg('你被拉黑名单了!',{shade: 0.3});//使用parent可以获得父页面DOM
        }else{
            parent.layer.close(index);
        }
        return false;
      });
    });

*子页面调用父页面函数:parent.func();

5、效果
这里写图片描述

二、父——>子
1、点击详情按钮,弹出弹窗:(例如我点击第一条信息的详情):
第一条信息是:
这里写图片描述

2、父页面的js:

/**
 * 点击详情 弹窗 账户信息
 */
$('#ljTable tbody').on('click','.detailsClick',function(){
    var _this = $(this),
        data =_this.parent().siblings(),
        arr = [];
    for(var i = 1; i< data.length; i++){
        // console.log($(data[i]).text());
        arr.push($(data[i]).text());//拿到点击按钮的当前那条信息的内容 放到一个数组里
    }
    // console.log(arr);
    layer.open({
        type: 2,
        skin: 'CLYM-style',
        area: ['950px','560px'],
        title: '账户信息',
        content: 'accountDetails.html',
        success: function(layero, index){
            var body = layer.getChildFrame('body',index);//建立父子联系
            var iframeWin = window[layero.find('iframe')[0]['name']];
            // console.log(arr); //得到iframe页的body内容
            // console.log(body.find('input'));
            var inputList = body.find('input');
            for(var j = 0; j< inputList.length; j++){
                $(inputList[j]).val(arr[j]);
            }
        }
    });
});

3、效果:
这里写图片描述

所以父传子的关键是将,通信写在success回调中。

文档链接:
http://layer.layui.com/api.html#success
http://layer.layui.com/

想要完整的小demo可以去我的github:clone/down
https://github.com/AllenChinese/workSpace/tree/master/tianjinlink

希望对您有帮助!

Layui实现父子页面之间值传递.zip 用途:把父页面的数据表格中的指定行数据传递到子页面,在子页面中把数据传递到父页面。内有项目一个,说明文本一个。 立即下载

相关推荐

layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例

下面小编就为大家带来一篇layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

vue路由传参的两种方式,实现返回上个页面不刷新

我的项目是当在新增页面(下面叫A页面)先提交一些数据,然后跳转到下一个页面(下面叫B页面)再填写数据,然后返回到新增的页面 之前我直接跳转回B页面goback(),这样的话跳转回来A页面就什么数据都没有了 解决方法有两种,一种是在地址栏里面拿参数 this.$router.push({ name:'xxxxxxxxx', // 跳转的页面名称 params:{ id:this.id || "xxxxxxxxxx" } }) 在

anny_mei的博客 1万+

webrtc获取IceCandidate流程

foundation:用于唯一标识候选者的基础信息,通常是基于候选者的类型、IP地址、协议和replay协议计算出的字符串。component:标识候选者所属的传输组件。对于RTP流,通常使用1;对于RTCP流,通常使用2。protocol:候选者使用的传输协议,通常是UDP,但也可以是TCP(尽管在WebRTC中UDP更为常见)。priority:候选者的优先级,用于在选择最佳候选对时进行比较。优先级的计算公式考虑了候选类型优先级、本地优先级和组件ID。address:候选者的IP地址。port。

qq_42805085的博客 1900

layer父子页面传值

父页面获取子页面并改变子页面的值 layer.open({ type: 2, title: '我是子iframe页面', shadeClose: true, shade: 0.8, area: ['380px', '90%'], content: './son.html', //iframe的url success:function(dom){ let $iframeDom...

风里有诗句哈的博客 1414

企业级 Agent 在 K8s 上的运行模型

Kubernetes├── Agent Orchestrator(控制面)├── Agent Runtime Pods(执行面)├── Graph DSL(流程层)├── Tool Services(能力层)K8s(调度)+ Graph(流程)+ Agent(决策)+ Tool(执行)+ Guard(治理)

一起修行,不孤单。这里有编程语言、开发工具、学习方法论和踩坑笔记。用简单的话说复杂的事,陪你从小白到进阶。周更干货,欢迎一起成长! 1172

从申请到落地:解锁OAI骨科数据集的实战指南与避坑经验

本文是一份详尽的OAI骨科数据集实战指南,重点解析了从NDA账号申请、权限审批到数据定位与高效下载的全流程。文章分享了使用login.gov注册、Chrome浏览器避坑、nda-tools命令行批量下载等核心技巧,并总结了常见问题排查方法,旨在帮助医学影像与骨关节炎研究者高效解锁这一宝贵数据资源。

weixin_29313547的博客 326

layer框架:子父之间的数据传递

layer是一个轻量级简单实用的弹出框插件,笔者在使用的过称中遇到一个小问题,最后通过网友的帮助终于解决了,记录一下,避免下次再忘了。 场景:点击父页面Table中td下的某一个&lt;a&gt;标签,弹出一个新的子页面,在子页面的input中显示出父页面的内容,其实涉及到一个子父之间的数据传递的问题,解决问题有两种方式,一:在子页面获取父页面的元素;二:在父页面传递元素给子页面,查入到子页面的...

待你归来的博客 2283

GD32 TIMER0 PWM输出死活没波形?别忘了这个关键配置(附完整代码)

本文详细解析了GD32 TIMER0 PWM输出无波形的常见问题,特别强调了高级定时器特有的主输出使能配置。通过完整的代码示例和调试技巧,帮助开发者快速解决PWM输出问题,适用于无刷电机控制等嵌入式应用场景。

weixin_30906185的博客 397

layer组件父子页面相互传递数据

layer组件父子页面相互传递数据 layer 是一款功能强大的web弹出层组件,很多时候我们需要使用它弹出各种各样的信息 很多情况它都能胜任,比如简单的msg文本,tips提示,loading加载等。 但是对于功能更强大的弹出页面和iframe,在需要在父子页面之间传递数据的时候, 学习和使用起来就不是那么简单了。 本文主要记录了在使用layer组件进行父子传值时的一下方法和个...

云间月 6904

数学建模--十大经典常用算法

数学建模十大算法:灰色预测,蒙特卡洛,遗传算法,模拟退火法,组合算法,神经网络,动态规划,聚类算法,类比法,概率算法,Floyd算法

qq_51533426的博客 5647

人像美肤 人体美型 CVPR 2022 ABPN

人像美肤 CVPR 2022 ABPN

jacke121的专栏 841

【Layui】子页面向父级页面传递参数

author:咔咔 wechat:fangkangfk 案例: 底层是父级页面,上边是子页面,子页面需要将选择的ID传递给父级页面 首先需要在父级页面写open打开子页面 content是子页面地址 var type_id; layui.use(['laypage', 'layer','form'], function() { var la...

咔咔博客 6647

【软件测试】- 公有云、私有云、混合云简介以及如何在公有云与私有云上分别搭建测试环境

公有云、私有云以及混合云是目前云计算领域的三种主要模式。它们之间的区别主要在于部署方式、数据访问和管理控制的不同。在阿里云或腾讯云上使用 Kubernetes 和 Docker 搭建测试环境可以提供高度的可伸缩性和灵活性。这样的环境非常适合于需要在多种配置和条件下进行测试的复杂应用。通过云服务提供的工具和服务,可以轻松管理和监控整个测试过程。在云服务上搭建测试环境涉及选择合适的云提供商、配置云资源、安装和设置所需软件等步骤。### 1. 选择云服务提供商。

weixin_46453070的博客 2338

layer.getChildFrame父页面传递到子页面

layer.getChildFrame父页面传递到子页面 一.父页面传值到子页面,两种方式 1.layer的弹出层打开之后,会回调一个success的方法,我们自定义这个方法,将我们要传递的数据渲染到子页面上.(实际上是在父页面上完成对子页面的数据渲染) function user_edit(id) { //layer_show("编辑用户", "/ibikeSeries/pages/user/edit.html", "800", "510"); layer.open({ type: 2, ar

weixin_43761767的博客 4946

YOLOv8-COCO指标转换

本文介绍了将YOLO格式数据集转换为COCO格式并评估模型性能的完整流程。首先需将YOLO格式的标注数据转换为COCO格式,通过修改classes、image_path等参数适配不同数据集。然后使用YOLO模型对验证集进行预测并保存结果为JSON格式。最后通过比较预测结果和转换后的COCO标注文件,使用COCO官方评估指标和TIDE工具进行性能分析,生成包含AP、AR等指标的报告及错误分析图表。整个过程实现了从数据准备到模型评估的完整闭环,为计算机视觉任务提供标准化的性能评估方案。

FJN110的博客 402

IEM模型,地表粗糙度模拟

利用微波反演土壤水分时候,利用IEM模型可以实现对随机地表的模拟

layer框架,子框架改变父框架内容

父框架 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="layer/mobil...

qq_34297991的博客 419

汉书HE8,好用的汇编代码编写工具

汉书HE8,好用的汇编代码编写工具早期编写汇编代码所用功能强大

[ Layer ] layer.open弹出层中如何进行子父层数据交互

layer.open弹出层中如何进行子父层数据交互 相关技术要点 1、layer.open 2、jquery.data() 3、jquery.removeData() 4、js isNaN 一、首先了解下layer.open方法和本文实现的交互逻辑 Layer官网 1、页面弹出层 /*父层dom点击事件*/ $('#parentDom').click(functio

架构探险之道 2万+

lwip-2.0.3

lwip是瑞典计算机科学院(SICS)的Adam Dunkels 开发的一个小型开源的TCP/IP协议栈。实现的重点是在保持TCP协议主要功能的基础上减少对RAM 的占用。

华为的C语言编程规范.pdf

华为技术有限公司内部技术规范。本规范制定了编写C语言程序的基本原则、规则和建议。从代码的清晰、简洁、可测试、安全、程序效率、可移植各个方面对C语言编程作出了具体指导。

layer弹出窗体及子→父窗体,父→子窗体表单属性传值的问题

首先引入layer.js以及layer.css样式等文件: 下面我直接贴代码:(*****下述子窗体也就是弹出窗体) function parentSave(){ var $singleSelect=$(".singleSelect").val();//单选分值 var $mulSelect=$(".mulSelect").val();//多选分值 ...

3927的博客 2817

layer 子窗口关闭并把数据传送到父层页面

整理了一下网上的各种方法,自己实现基于layer的子窗口关闭并把数据传送到父层页面 0.首先说一下背景: 官方文档:https://www.layui.com/doc/modules/layer.html cancel - 右上角关闭按钮触发的回调 类型: Function , 默认:NULL 该回调函数携带两个参数,分别为当前层索引、当前层DOM对象. 实例: layer.open({ co...

Manlok的技术博客 5573

Layer Open子页面给父页面传值

首先是父页面上,打开一个弹出框 layer.open({ type: 2, title: false, maxmin: false, shade: [0.5, '#000'], //配置遮罩层颜色和透明度 shadeClose: false, //是否允许点击遮罩层关闭弹窗 true /false //closeBtn:2, ...

cailongbiaoyuli的博客 1万+

layer向子页面传递对象

百度了很久查询不到layer如何向子页面传递对象,都只能传递值,但是这样在项目中,当需要传递的数据量很大时会非常不方便,要实现的话,可以在父页面写获取对象的方法,在子页面调用父页面的方法来获取对象 父页面js代码: //-----获取查询条件的方法------ function getCondition(){ return slimitDet;//slimitDet是父页面定义的全局变量

yan_yzy的博客 3025

layer打开弹窗时传递参数(content:)【layer弹窗插件】

在使用layer打开弹窗时,我希望带一些参数过去,进行某些判断。 直接就可以用链接+参数的方式即可。 1、JS代码 var userGrade=Mrant layer.open({ title: '权限管理', area: ['800px', '500px'], shade: [0.3, '#393D49'], content: "test.html?grade="+userGrade, y...

云度 8104

layer.open(),子层父层参数传递,layer.open()关闭自身

参数传递 layer.open({ type: 2, title: '设置', shadeClose: true, shade: 0.8, area: ['440px', '400px'], content: "popUp", btn: ['确定'], yes:function (index,layero) { var body = layer.getChildFrame('...

曹先森的博客 2180

input layer name 赋值_layer子层给父层页面元素赋值实例讲解

本文主要为大家带来一篇layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。父层:jsp中://页面上添加一个隐藏的输入框待用于被子层设置value,从而将子层的数据传递到此页面js代码://设置function,当执行时,弹出子窗口并传递当前窗口名称//弹出子窗口(选择商家)functio...

weixin_34846784的博客 261

layer如何放入子html,layer弹出子iframe层父子页面传值的实现方法

本文介绍了layer弹出子iframe层父子页面传值的实现方法,分享给大家,具体如下:父页面获取子页面元素格式:$("#iframeID").contents().find("#eleID")示例代码:father.html父级页面.btn{display:inline-block;height:30px;line-height:30px;border-radius:5px;background:...

weixin_42683392的博客 437
上一篇: layer分页器使用
下一篇: jQuery中断ajax请求
JesusAllen30
博客等级 码龄11年 225粉丝 53原创
评论 9
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值