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

桃扇骨 2022-05-27 05:06 499阅读 0赞

今天在写一个模块，里面有一个功能是在弹出的子页面中输入一些数据，然后在点击确认之后关闭子页面，把输入的这些数据再回显到之前的父页面上面。这里是用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;	
    }