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

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

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

layer.open

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、注册父层事件监听器（自定义）