layer:子父之間的資料傳遞
阿新 • • 發佈:2019-02-02
layer中有這樣的情況,父頁面與彈窗(子頁面)之間的資料通訊。
*表單中的表單元素必須有name屬性。
這邊我講一下兩種情況(都是以表單為例子):
1、父頁面的資料在彈窗(子頁面)中顯示。
2、子頁面(彈窗)反饋的資訊,在父頁面顯示。
先解釋一下邏輯:
一、子——>父
1、點選“標記”,彈出彈窗:
2、填寫表單,並提交,點選提交按鈕後,判斷是否標記了“黑名單“,如果“是”,則在父頁面顯示layer.msg”你被拉黑名單了!”。
3、父頁面js
/**
* 點選標記 彈窗 標記
*/
$('#ljTable tbody').on('click','.signClick' ,function(){
layer.open({
type: 2,
skin: 'CLYM-style',
area: ['500px','300px'],
title: '標記',
content: 'sign.html'
});
});
4、子頁面js
var index = parent.layer.getFrameIndex(window.name);//獲取子視窗索引
layui.use('form', function(){
var form = layui.form();
//監聽提交
form.on('submit(signForm)', function(data){
var dataString = JSON.stringify(data.field);
var dataObj = data.field;
console.log(dataObj);
if (dataObj.sign === '是') {
parent.layer.close(index);
parent.layer.msg('你被拉黑名單了!',{shade: 0.3});//使用parent可以獲得父頁面DOM
}else{
parent.layer.close(index);
}
return false;
});
});
*子頁面呼叫父頁面函式:parent.func();
5、效果
二、父——>子
1、點選詳情按鈕,彈出彈窗:(例如我點選第一條資訊的詳情):
第一條資訊是:
2、父頁面的js:
/**
* 點選詳情 彈窗 賬戶資訊
*/
$('#ljTable tbody').on('click','.detailsClick',function(){
var _this = $(this),
data =_this.parent().siblings(),
arr = [];
for(var i = 1; i< data.length; i++){
// console.log($(data[i]).text());
arr.push($(data[i]).text());//拿到點選按鈕的當前那條資訊的內容 放到一個數組裡
}
// console.log(arr);
layer.open({
type: 2,
skin: 'CLYM-style',
area: ['950px','560px'],
title: '賬戶資訊',
content: 'accountDetails.html',
success: function(layero, index){
var body = layer.getChildFrame('body',index);//建立父子聯絡
var iframeWin = window[layero.find('iframe')[0]['name']];
// console.log(arr); //得到iframe頁的body內容
// console.log(body.find('input'));
var inputList = body.find('input');
for(var j = 0; j< inputList.length; j++){
$(inputList[j]).val(arr[j]);
}
}
});
});
3、效果:
所以父傳子的關鍵是將,通訊寫在success回撥中。
希望對您有幫助!