[ Layer ] layer.open弹出层中如何进行子父层数据交互

layer.open弹出层中如何进行子父层数据交互

相关技术要点

1、layer.open
2、jquery.data()
3、jquery.removeData()
4、js isNaN

一、首先了解下layer.open方法和本文实现的交互逻辑

Layer官网

1、页面弹出层

/*父层dom点击事件*/
$('#parentDom').click(function() {
		var opDom=$(this);
		var param = {
			preplanId:-1
		};
		showPop(param,opDom);
});

/*layer弹出页面层*/
function showPop(param,opDom){
	layer.open({
			//页面层默认选择2，content指向父层某个div时type设置为1
			type:2,
			//头部标题
			title:'选择预案模版',
			//子层容器宽度和高度
			area:['800px','500px'],
			//子层页面资源
			content:"/saf-web/html/other/plan-selector.html",
			//是否显示右上角关闭图标，默认为1，显示
			closeBtn:0,
			//右下角按钮文本和数目控制
			btn: ['启动', '取消'],
			//按钮对应点击事件回调通知
			yes:function(index, layero){
				//异常捕获，避免页面因js错误而终止运行 
				try{
					//成功回调，从当前界面dom缓存中获取子层保存的数据
					param.preplanId = parseInt(opDom.data('preplanId'));
					if(param.preplanId <= 0 || isNaN(param.preplanId)){
						layer.alert("预案模版ID获取失败！");
						return false;
					}
					startPlan(param);
					opDom.data('preplanId',-1);
				}catch(e){
					console.log(e);
					layer.alert("参数错误！");
					opDom.removeData("preplanId");
					return false;
				}	
				layer.close(index);
			},
			btn2:function(index, layero){
				layer.close(index);
				opDom.data('preplanId',-1);
			}
		});	
}

/*业务逻辑*/
function startPlan(param){
	//Todo
}

2、子层实现一个表格的绘制和表格行点击后，将行数据的ID返回给父页面

/**
 * 预案模版选择器
 */
;(function($, window, document) {
	/*页面私有方法管理容器*/
	var privUtils = {
		/**
		 * 初始化
		 */
		init : function() {
			this.RENDER.init();
		},
		/**
		 * 数据渲染
		 */
		RENDER : {
			/**
			 * 表单元素key
			 */
			tKeys:['id','preplan_name','level_name'],
			/**
			 * 初始化
			 */
			init : function() {
				this.loadPrePlan();
			},
			/**
			 * 加载预案模版数据
			 */
			loadPrePlan : function() {
				$.getJSON("/preplan/preplan/loadPreplan", {}, function(result) {
					if (result.code != 0) {
						layer.msg("预案模版加载失败！", {
							shade : [ "000" ]
						});
						return;
					}
					if (result.list.length == 0) {
						layer.alert("未配置预案模版！");
						return;
					}
					privUtils.RENDER.createTable(result.list);
				});
			},
			/**
			 * 创建表格数据
			 */
			createTable : function(list) {	
				$('.sc-tbody').empty();
				$(list).each(function(i,plan){
					$('.sc-tbody').append(privUtils.RENDER.createTr(plan));
					$('.sc-tbody tr:last').data("id",plan.id);
				});	
				this.initTrEvent();
			},
			/**
			 * 创建Tr
			 */
			createTr:function(plan){
				var tr = '<tr title="单击选择预案模版">';
				$(this.tKeys).each(function(i,key){
					tr+='<td>'+plan[key]+'</td>'
				});
				return tr+'</tr>';
			},
			/**
			 * 初始化tr点击事件
			 */
			initTrEvent:function(){
				$('tr').click(function(){
					$('tr').removeClass('on-sel');
					$(this).addClass('on-sel');
					parent.$('#parentDom').data('preplanId',$(this).data('id'));
				});
			}
		}
	}
	
	/*dom加载完毕自动执行函数*/
	$(function(){
		privUtils.init();
	});
	
})(jQuery, window)

3、设计思路

> 父层界面负责弹出子层界面和接收子层界面数据
> 子层数据利用$.data（key,val）的方式进行元素和数据的绑定、动态获取
> 父层在关闭的时候监听数据的完整性，通过在layer.open中配置的yes和btn2方法的逻辑判断，返回false，阻止子层关闭，直至子层操作完毕后，并选择正确的数据，才允许子层关闭

4、效果

二、其他方式

1、父层利用window创建缓存对象，在子层中用window.parent进行访问和操作，监听layer.open的回调事件也可以。`parent 是 JS 自带的全局对象，可用于操作父页面`
2、原生iframe跨页面方法调用
3、注册父层事件监听器（自定义）

更多

扫码关注“架构探险之道”，获取更多源码和文章资源

知识星球(扫码加入获取源码和文章资源链接)