本篇文章主要介绍一下layui父子页面互相传值问题
1、父页面传值给子页面
场景描述:layui 弹出层
相信贴个图片就能一目了然了,就不多哔哔了
解决方案:`
function openAddPage(_titel, data){
var index = layui.layer.open({
title : _titel,
type : 2,
area : ['500px', '400px'],
content : "dictionary-add.shtml",
success : function(layero, index){
var body = layui.layer.getChildFrame('body', index);
if(data){
body.find(".dicName").val(data.dicName);
body.find(".dicId").val(data.dicId);
body.find(".dicDicId").val(data.dicDicId);
body.find(".name").val(data.name);
body.find(".content").val(data.content);
body.find(".note").val(data.note);
form.render();
};
/* setTimeout(function(){
layui.layer.tips('点击此处返回文字典列表', '.layui-layer-setwin .layui-layer-close', {
tips: 3
});
},500)*/
},
end : function(index, layero){
tableIns.reload();
}
})
//layui.layer.full(index);
//改变窗口大小时,重置弹窗的宽高,防止超出可视区域(如F12调出debug的操作)
//$(window).on("resize",function(){
//layui.layer.full(index);
//})
}
这种方式在layui官网就有。 也不多哔哔了
**2、子页面传值给父页面**
场景描述:
大概场景是弹出一个页面,将弹出层的合同编码传递给父页面,继而进行后续操作。
解决方案:
layui将jquery最稳定的版本1.11作为一个内置的DOM模块(唯一的一个第三方模块)。
首先js中声明一下内容
parent$ = window.parent.layui.jquery,
下边的parent$ 就可以用了
table.on('toolbar(contractList)', function (obj) {
var checkStatus = table.checkStatus(obj.config.id); //获取选中行状态
switch (obj.event) {
case 'getCheckData': //确认
var data = checkStatus.data; //获取选中行数据
parent$("#contractCode").val(data[0].contractcode);
parent$("#contractName").val(data[0].contractname);
close();
break;
case 'back': //返回
close();
break;
}
;
});
总结:
本来要哔哔好多东西的,没想到突然就要结束了
不过呢,通过以上内容,更加明白并深入体会到基础(底层)知识的重要性。万事皆是
比如拿很多框架的封装来说,闭眼思考,却是如此
主要了解 window对象的parent属性:返回当前窗口的父窗口