layUI子页面向父页面传值

时间:2024-04-05 09:46:05

今天遇到了一个问题,父子iframe传值问题,百度了很多,都没有解决子页面像父页面传值问题

如图所示:

父页面:

layUI子页面向父页面传值

 

子页面:

layUI子页面向父页面传值

点击附件就会进入子页面,这里面进行文件上传,需要将上传好的文件ID传回父页面中

我自己写了一个通用方法:

其中也包括了弹出框通用方法

/**
 * layui弹出框共同方法
 * @param title 标题
 * @param url 请求的url
 * @param w 弹出层宽度(缺省调默认值)
 * @param h 弹出层高度(缺省调默认值)
 * @param type 弹出操作类型
 * @param upload 是否上传
 * @returns
 */
function Modalshow(title,url,w,h,type,upload){
	
    if (title == null || title == '') {
        title=false;
    };
    if (url == null || url == '') {
        url="404.html";
    };
    if (w == null || w == '') {
        w=($(window).width()*0.9);
    };
    if (h == null || h == '') {
        h=($(window).height() - 50);
    };
    var btn ="";
    if (type=='2') {
    	if(upload){
    		btn =['保存','取消','附件']
    	}else{
    		btn =['保存','取消']
    	}
	}else if (type=='3') {
		if(upload){
    		btn =['更新','取消','附件']
    	}else{
    		btn =['更新','取消']
    	}
	}
    if(type=='1'){
		layer.open({
	        type: 2,
	        area: [w+'px', h +'px'],
	        anim: 0,
	        fix: false, //不固定
	        maxmin: true,
	        shadeClose: false,
	        btnAlign: 'c',
	        shade:0.4,
	        title: title,
	        content: url,
	        skin: 'layer-myskin',
	        btn: ['确认']
	    });
	}else{layer.open({
        type: 2,
        area: [w+'px', h +'px'],
        anim: 4,
        fix: false, //不固定
        maxmin: true,
        shadeClose: false,
        shade:0.4,
        title: title,
        content: url,
        btn: btn,
        skin: 'layer-myskin'
		,btn1: function(index, layero){
			$(layero).find("iframe")[0].contentWindow.$('#submitForm').click();
		  }
		,btn2: function(index, layero){
			layer.close(index);
		 }
		,btn3: function(index, layero){
			//获取父页面的iframe值
			var iframeName = $(layero).find("iframe")[0].id;
			var contextPath= getContextPath();
			var url = contextPath+'/uploadFilesForworrd';
			//打开子页面 传入iframe值是为了更好的指定传回值的页面
			var uploadFileIds = uploadShow("附件列表",url,900,600,iframeName);
			return false;
		 }
    });
	}
    
}
//文件上传modal
function uploadShow(title,url,w,h,iframeName){
	var uploadFileIds;
    var btn =['开始上传','保存'];
    layer.open({
        type: 2,
        area: [w+'px', h +'px'],
        fix: false, //不固定
        maxmin: true,
        shadeClose: false,
        shade:0.4,
        title: title,
        content: url,
        btn: btn,
        skin: 'layer-myskin',
        zIndex: layer.zIndex,
        success: function(layero){
            layer.setTop(layero);//置顶当前窗口
          }
		,btn1: function(index, layero){
			$(layero).find("iframe")[0].contentWindow.$('#uploadFileButton').click();
			return false;
		  }
		,btn2: function(index, layero){
			//子页面的元素值
			uploadFileIds = $(layero).find("iframe")[0].contentWindow.$('#uploadFileIds').val();
			uploadFileIds=uploadFileIds.substring(0,uploadFileIds.length-1);
			//data
			var dataArray=new Array();
			var dataMap={};
			dataMap.name = "FileIds";
			dataMap.value = uploadFileIds;
			dataArray.push(dataMap);
			//element
			var eleArray=new Array();
			eleArray.push("FileIds");
			//进行子父页面传值操作
			setChooseValues(eleArray,dataArray,iframeName,layer,"input","id");
		 }
    });
    return uploadFileIds;
}
/*关闭弹出框口*/
function Modalclose(){
    var index = parent.layer.getFrameIndex(window.name);
    parent.layer.close(index);
}
/**
 * 
 * @param _element 元素名称
 * @param _data 子页面元素名称数据
 * @param iframeName 父页面iframeName
 * @param layer 子页面layer
 * @param type 指定父页面元素dom类型
 * @param elementPro 指定父页面元素属性
 * @returns
 */
function setChooseValues(_element,_data,iframeName,layer,type,elementPro){
	var index = layer.getFrameIndex(iframeName);
	for (var i = 0; i < _element.length; i++) {
		var element = layer.getChildFrame(type+"["+elementPro+"='"+_element[i]+"']", index);
		for (var j = 0; j < _data.length; j++) {
			if(_element[i]==_data[j].name){
				element[0].value=_data[j].value;
			}
		}
	}
}

其中很好的解决了layUI子父页面传值问题,支持多个值传回父页面,希望能帮助到大家