1. 程式人生 > >layer:子父之間的資料傳遞

layer:子父之間的資料傳遞

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回撥中。

希望對您有幫助!