(layer) 如何关闭子页面之后把数据回显到父页面上?

今天在写一个模块,里面有一个功能是在弹出的子页面中输入一些数据,然后在点击确认之后关闭子页面,把输入的这些数据再回显到之前的父页面上面。这里是用layer弹层组件,弹出一个iframe页面做的。研究了很久才弄明白。

如下父页面的相关代码

//父页面
//click事件点击进入一个iframe页面(子页面)
$(".relation").click(function() {
	// 是否是指派页面
	window.IspPoint = false;
	parent.layer.open({
	type : 2,//弹窗类型 ['dialog', 'page', 'iframe', 'loading', 'tips']
	area : [ '610px', '320px' ],
	shift : 2,//可选动画类型0-6
	scrollbar : false,
	title : false,
	closeBtn : false,
	content : "address.html",
	btn: ['确定','取消'],
	//这里yes:function为设置的第一个按钮的function,后面设置的按钮默认点击关闭
	yes:function(index,layero){
        //需要回显的值
        //layero为当前的DOM对象,去找打开的iframe转成DOM对象调用子页面其中的function (callbackdata)
        var res = $(layero).find("iframe")[0].contentWindow.callbackdata();
        //把回显的值赋给需要显示的地方
        $("#name").val(res.data_name);
        $("#id").val(res.data_id);
        //关闭子页面
	parent.layer.close(index);
});

如下子页面的相关代码

/*子页面 回显data */
var callbackdata = function () {
	var id = "";
	var name = "";
	//我这里循环拿取li列表的data中所有name和id
	for(var z = 0 ;z< length ;z++){
		if(0 != z){
			pk += ",";
			name += ",";
		}
		name = name + $('.address-right').find('li').eq(z).data('name');
		id = id + $('.address-right').find('li').eq(z).data('id');
	}
	//data里面可以存放很多需要回显的数据,在父页面调用这个function即可拿到data里面的数据达到回显的效果
	data ={
			data_name : name,
			data_id : id
	};
	//function返回一个data值,达到回显数据效果
	return data;	
}

 

在layui中,想要将父页面的值回显页面的下拉框中,可以通过以下步骤实现: 1. 在父页面中,定义一个变量或者通过某种方式获取到需要回显的值。 2. 将这个值传递给页面,在父页面的JavaScript中,可以使用如下代码将值传递给页面: ```javascript layui.use(['layer'], function(){ var layer = layui.layer; var parentValue = '需要回显的值'; layer.open({ type: 2, title: '页面', content: '页面的URL', area: ['500px', '400px'], success: function(layero, index){ // 在页面中使用layui的方法获取到页面的DOM对象 var body = layer.getChildFrame('body', index); // 通过DOM的id获取到下拉框 var select = body.find('#selectId'); // 将父页面的值设置为下拉框的默认值 select.val(parentValue); // 使用layui的form模块进下拉框的渲染 layui.use('form', function(){ var form = layui.form; form.render('select'); }); } }); }); ``` 3. 在页面中的HTML代码中,定义一个id为selectId的下拉框: ```html <select id="selectId" lay-verify="required"> <option value="">请选择</option> <option value="值1">选项1</option> <option value="值2">选项2</option> <option value="值3">选项3</option> </select> ``` 以上代码中,通过layui的layer模块,打开一个页面,并在页面的加载成功回调函数中,获取到页面中的下拉框,并将父页面的值设置为下拉框的默认值。最后使用layui的form模块渲染下拉框,完成父页面值的回显页面的下拉框中。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值