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设置为1type: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 = '';$(this.tKeys).each(function(i,key){tr+=''+plan[key]+' '});return 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、注册父层事件监听器（自定义）
更多
扫码关注“架构探险之道”，获取更多源码和文章资源
知识星球(扫码加入获取源码和文章资源链接)
