layer子父传值(1)
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)相关推荐
- vue 父子和子父传值
vue 父子和子父传值 父向子传值子可以用 props 接受数据 子传父 时候 用 $emit() 发送数据
- wepy组件子父传值_【WePY小程序框架实战三】-组件传值
父子组件传值 静态传值 静态传值为父组件向子组件传递常量数据,因此只能传递String字符串类型. 父组件 (parent.wpy) 子组件(child.wpy) {{name}} props={ n ...
- wepy组件子父传值_wepy组件间传值
普通组件引用 当页面需要引入组件,或组件需要引入子组件时,必须在.wpy文件的 import wepy from 'wepy'; import Child from '../components/ch ...
- wepy组件子父传值_微信小程序wepy框架中父组件与子组件通信和交互
官网上描述: $broadcast$broadcast事件是由父组件发起,所有子组件都会收到此广播事件,除非事件被手动取消.事件广播的顺序为广度优先搜索顺序.$emit$emit与$broadcast ...
- Vue 进阶组件实战应用 -- 父子组件传值的应用实例(子父组件传值的两种触发方式)
基础的子组件和父组件通信已经搞定了,可以看此博客 父子组件传值基础应用 需求 现在需求是在一个父页面引用子组件,不只是要实现基本的父子组件传值.并且子组件给父组件传值的触发条件要在父页面触发. 目前小 ...
- layer用ajax往jsp页面传值,layer.open中父页面向子页面传值(示例代码)
1.咱先看图说话 父list.jsp 子operate.jsp 实现的代码 1 在父页面上完成对子页面的数据渲染 function setData(data) { var lay=layer.open ...
- Vue父组件网络请求回数据后再给子组件传值demo示例
QQ技术交流群 173683866 526474645 欢迎加入交流讨论,打广告的一律飞机票 这里demo使用延迟执行模拟网络请求:父组件给子组件需要使用自定义属性 Prop ,下面是示例代码: &l ...
- vue中父子组件先后渲染_VUE如何实现子父组件、父子组件、兄弟组件传值
父子组件传值: 父组件定义: 代码示例 子父组件传值: 父组件方法定义: 子组件执行父组件方法定义: methods: { closeOrOpenLeftMenu() { if (this.isLef ...
- FineUI小技巧(5)向子窗口传值,向父窗口传值
前言 FineUI中经常会用到启用IFrame的Window控件,这样有助于从物理上进行代码解耦和.IFrame的引入就会涉及传值问题,如何在父窗口和子窗口之间相互传值呢? 向子窗口传值 向子窗口传值 ...
- 组件间数据交互——父组件向子组件传值( props属性值类型) 子组件向父组件传值-携带参数 || 非父子组件间传值
父组件向子组件传值 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
最新文章
- openpyxl.utils.exceptions.IllegalCharacterError错误
- 中盐总公司:盐业公司24小时配送保供应
- 统一代码段与非一致代码段
- 中国水环境治理市场需求前景与十四五战略规划建议报告2022版
- 004-cpu的区分
- Linux中cut命令的使用
- Kubernetes 1.20 发布:妙啊
- java栈编程题_Java实现栈和队列面试题
- 2014职称计算机考试光盘,江苏省职称计算机考试光盘答案.doc
- 49 CO配置-控制-获利能力分析-把控制范围分配给经营范围
- 电脑字体在哪个文件夹_【安卓】造字(下):如何将生成的字体设置为手机系统显示字体...
- 甘特图看起来很生硬?教你使用智能颜色装饰你的甘特图!(一)
- Zipkin jar 下载地址
- 求职必看~10分钟读懂国企、事业单位和公务员的区别
- diy计算机组装注意事项,电脑DIY常见误区有哪些 电脑组装新手注意事项
- python字典生成器
- eclipse jdt
- web应用F12查看报错(前后端bug判断、2XX/3XX/4XX/5XX常见状态码解析)
- 苹果手机4位密码突然变6位密码了怎么回事怎么解锁?
- 【英语语法入门】 第29讲 情态动词的否定和疑问