layer实现弹出动态页面，并实现子母页面数据传递

背景

系统中相对比较复杂的页面，需要弹出层并且弹出层动态加载数据，且需要返回选择数据。选择了layer进行实现此种。在网上搜索了一些信息，有些相对零散。功能开发结束后，进行整理记录。

调用layer母页面

<button id="rk" class="btn btn-primary" onclick="getRkInfo();return false;">选择入库单</button>

在layer.open中主要注意type类型：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。
因需求是需用动态查询相关联的数据，所以母页面 type：2

var url = '../yjgl/layer_rk_list.html?id='+id+'&gysId='+gysId;
		//示范一个公告层
		layer.open({
		  type: 2,
		  title: "选择入库单",
		  shadeClose: true,
		  shade: 0.4,
		  area: ['90%', '90%'],
		  content:  url,
		  skin: 'demo-class',
		  btn: ['确定','关闭'],
		  yes: function(index,layero){
			 //获取加载页面的值
			 var res = window["layui-layer-iframe" + index].callbackdata();
		      //打印返回的值，看是否有我们想返回的值。
		     var list_list = res.list_list;
		     $("#gysName").val(res.gysName);
		     $("#gysId").val(res.gysId);
		  
		     $.ajax({
				url : '../../cwSettleController/addSettleMx.do',
				async : false,
				data: {
					'type' : 'rk',
					'pid' : id,
					'gysName' : res.gysName,
					'gysId' : res.gysId,
	                'list_data':  JSON.stringify(list_list)
	            },
				type : 'POST',
				dataType : "json",
				success : function(data) {
					 var json = JSON.parse(data);
						 location.href="settle_mx.html?id="+ id;
				}
			});
		     //查询合同下采购明细
		     layer.closeAll();
			return false;
		  },
		 btn2: function(index, layero){
		    //按钮【取消】的回调
		  }
		});

被调用layer 子页面

子页面html根据实际业务需求进行绘制就ok了。在js中有一个特别需用关注的点。就是下列的函数。该函数为母页面调用，获取子页面选择数据的函数。

var callbackdata = function () {
		 var len = $("input[name='id']:checked").length;
		 var str = "";
		 var list_list = {}; 
 		 var list_json = new Array();
 		var gysId ="";
 		var gysName ="";
		 $("input[name='id']:checked").each(function(index){
			 var input_list2 = {};
			 var tr = $(this).parent().parent();
			 gysId = $(tr).find("input[data-column='gysId']").val();
			 gysName = $(tr).find("span[data-column='gys_name']").html();
			 var rk_code = $(tr).find("span[data-column='rk_code']").html();
			 var htNo = $(tr).find("span[data-column='contract_num']").html();
			 var mlNo = $(tr).find("span[data-column='ml_no']").html();
			 input_list2["gysId"] = $.trim(gysId);
			 input_list2["gysName"] = $.trim(gysName);
			 input_list2["rkNo"] = $.trim(rk_code);
			 input_list2["contractNo"] = $.trim(htNo);
			 input_list2["mlNo"] = $.trim(mlNo);
			 list_json[index] = input_list2;
		 })
		 list_list["list_mx"] = list_json;
	     var data = {
	    		 gysId : gysId,
	    		 gysName : gysName,
	    		 list_list:list_list
	     };
	     return data;
	}

最终效果

总结

1、layer母页面调用open方法。type要注意相应的类型填写
2、若layer弹出层子页面为表单，需要填写并进行验证。在子页面回调函数中进行验证，并将验证的msg和flag进行标识返回。可在母页面中区分正常和非正常数据。根据返回信息选择性关闭弹出层 layer.closeAll();

哈哈layer做弹层是不是挺简单的。