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

希望对您有帮助!

layer子父传值(1)相关推荐

  1. vue 父子和子父传值

    vue 父子和子父传值 父向子传值子可以用 props 接受数据 子传父 时候 用 $emit() 发送数据

  2. wepy组件子父传值_【WePY小程序框架实战三】-组件传值

    父子组件传值 静态传值 静态传值为父组件向子组件传递常量数据,因此只能传递String字符串类型. 父组件 (parent.wpy) 子组件(child.wpy) {{name}} props={ n ...

  3. wepy组件子父传值_wepy组件间传值

    普通组件引用 当页面需要引入组件,或组件需要引入子组件时,必须在.wpy文件的 import wepy from 'wepy'; import Child from '../components/ch ...

  4. wepy组件子父传值_微信小程序wepy框架中父组件与子组件通信和交互

    官网上描述: $broadcast$broadcast事件是由父组件发起,所有子组件都会收到此广播事件,除非事件被手动取消.事件广播的顺序为广度优先搜索顺序.$emit$emit与$broadcast ...

  5. Vue 进阶组件实战应用 -- 父子组件传值的应用实例(子父组件传值的两种触发方式)

    基础的子组件和父组件通信已经搞定了,可以看此博客 父子组件传值基础应用 需求 现在需求是在一个父页面引用子组件,不只是要实现基本的父子组件传值.并且子组件给父组件传值的触发条件要在父页面触发. 目前小 ...

  6. layer用ajax往jsp页面传值,layer.open中父页面向子页面传值(示例代码)

    1.咱先看图说话 父list.jsp 子operate.jsp 实现的代码 1 在父页面上完成对子页面的数据渲染 function setData(data) { var lay=layer.open ...

  7. Vue父组件网络请求回数据后再给子组件传值demo示例

    QQ技术交流群 173683866 526474645 欢迎加入交流讨论,打广告的一律飞机票 这里demo使用延迟执行模拟网络请求:父组件给子组件需要使用自定义属性 Prop ,下面是示例代码: &l ...

  8. vue中父子组件先后渲染_VUE如何实现子父组件、父子组件、兄弟组件传值

    父子组件传值: 父组件定义: 代码示例 子父组件传值: 父组件方法定义: 子组件执行父组件方法定义: methods: { closeOrOpenLeftMenu() { if (this.isLef ...

  9. FineUI小技巧(5)向子窗口传值,向父窗口传值

    前言 FineUI中经常会用到启用IFrame的Window控件,这样有助于从物理上进行代码解耦和.IFrame的引入就会涉及传值问题,如何在父窗口和子窗口之间相互传值呢? 向子窗口传值 向子窗口传值 ...

  10. 组件间数据交互——父组件向子组件传值( props属性值类型) 子组件向父组件传值-携带参数 || 非父子组件间传值

    父组件向子组件传值 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...

最新文章

  1. openpyxl.utils.exceptions.IllegalCharacterError错误
  2. 中盐总公司:盐业公司24小时配送保供应
  3. 统一代码段与非一致代码段
  4. 中国水环境治理市场需求前景与十四五战略规划建议报告2022版
  5. 004-cpu的区分
  6. Linux中cut命令的使用
  7. Kubernetes 1.20 发布:妙啊
  8. java栈编程题_Java实现栈和队列面试题
  9. 2014职称计算机考试光盘,江苏省职称计算机考试光盘答案.doc
  10. 49 CO配置-控制-获利能力分析-把控制范围分配给经营范围
  11. 电脑字体在哪个文件夹_【安卓】造字(下):如何将生成的字体设置为手机系统显示字体...
  12. 甘特图看起来很生硬?教你使用智能颜色装饰你的甘特图!(一)
  13. Zipkin jar 下载地址
  14. 求职必看~10分钟读懂国企、事业单位和公务员的区别
  15. diy计算机组装注意事项,电脑DIY常见误区有哪些 电脑组装新手注意事项
  16. python字典生成器
  17. eclipse jdt
  18. web应用F12查看报错(前后端bug判断、2XX/3XX/4XX/5XX常见状态码解析)
  19. 苹果手机4位密码突然变6位密码了怎么回事怎么解锁?
  20. 【英语语法入门】 第29讲 情态动词的否定和疑问

热门文章

  1. ubuntu 安装idea,创建快捷方式
  2. Postgresql忘记密码,如何重置密码
  3. java栈和队列的区别是什么意思_java中栈和队列的区别是什么?
  4. 作为一名优秀的程序员,如何得体地辞职
  5. Yang不等式,Hölder不等式与闵可夫斯基(Minkowski)不等式
  6. 1.1各种编程语言的介绍
  7. linux中的sg工具,sg3_utils工具windows系统下的使用
  8. 使用VGG16.npy文件载入权重
  9. 如何解决电脑网络提示无Internet访问权限
  10. 批量图片压缩、生成PDF文件及PDF文件压缩