layui 彈出層layer中from初始化 ,並在btn中返回from.data

1.彈出對話框

layer.open() 來初始化彈層

 // 監聽添加操作
        $(".data-add-btn").on("click", function () {
            var that = this;
            //多窗口模式，層疊置頂
            layer.open({
                type: 2 //此處以iframe舉例
                , title: '添加機構信息'
                , area: ['690px', '460px']
                , shade: 0.5
                , maxmin: true
                , offset: "auto"
                , content: './from_add.html'
                , btn: ['確定'] //只是為了演示
                , yes: function (index, layero) {
                    var body = layer.getChildFrame('body', index);
                    var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe頁的窗口對象，執行iframe頁的方法：iframeWin.method();
                    //console.log(body.html()) //得到iframe頁的body內容
                    //var data1 = iframeWin.getfrom();
                    console.log(iframeWin.layui.form.val('example'));   //這里只有layui 2.5.5的時候可以取到值
                    layer.closeAll();
                }
                , zIndex: layer.zIndex //重點1
                , success: function (layero,index) {
                    var body = layer.getChildFrame('body', index);
                    var iframeWin = window[layero.find('iframe')[0]['name']];
                    //body.find("#username")[0].value='Hi，我是從父頁來的';
                    var dd={
                        "password": "123456"
                        , "interest": 1
                        , "like[write]": true //復選框選中狀態
                        , "close": true //開關狀態
                        , "sex": "女"
                        , "desc": "我愛 layui"
                    };
                    iframeWin.loadfrom(dd);
                }
            });
        });

2.在context的html中定義環視 loadform 並傳值

 注：這里測試發現，如果 給from直接傳形參如：form.val('example', data); 會初始化失敗，form 中沒有數據但是不報錯，但是序列化，反序列化后成功（估計是這個對象直接初始化有問題，layui這里有bug）

    var loadfrom =function loaddata(data){
        var dd2=  JSON.stringify(data);
        var ddd = JSON.parse(dd2);
        layui.form.val('example', ddd);

        // layui.use(['form'], function () 
        // {
        //     var form =layui.form;
        //     var ddd = JSON.parse(dd2);
        //     form.val('example', ddd);
        // });
    };

 

注：彈出的窗口時官方示例：注意是：layui-form

<form class="layui-form" action="" lay-filter="example">
    <div class="layui-form-item">
        <label class="layui-form-label">輸入框</label>
        <div class="layui-input-block">
            <input type="text" name="username" id="username" lay-verify="title" autocomplete="off" placeholder="請輸入標題" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">密碼框</label>
        <div class="layui-input-block">
            <input type="password" name="password" placeholder="請輸入密碼" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">選擇框</label>
        <div class="layui-input-block">
            <select name="interest" lay-filter="aihao">
                <option value=""></option>
                <option value="0">寫作</option>
                <option value="1">閱讀</option>
                <option value="2">游戲</option>
                <option value="3">音樂</option>
                <option value="4">旅行</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">復選框</label>
        <div class="layui-input-block">
            <input type="checkbox" name="like[write]" title="寫作">
            <input type="checkbox" name="like[read]" title="閱讀">
            <input type="checkbox" name="like[daze]" title="發呆">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">開關</label>
        <div class="layui-input-block">
            <input type="checkbox" name="close" lay-skin="switch" lay-text="ON|OFF">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">單選框</label>
        <div class="layui-input-block">
            <input type="radio" name="sex" value="男" title="男" checked="">
            <input type="radio" name="sex" value="女" title="女">
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">文本域</label>
        <div class="layui-input-block">
            <textarea placeholder="請輸入內容" class="layui-textarea" name="desc"></textarea>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
        </div>
    </div>
</form>