iframe渲染表單數據

iframe渲染表單數據

父層頁面調用子層頁面時，利用iframe的形式打開頁面，父層與子層之間傳遞數據

父層頁面

//layui窗口打開一個iframe 
layer.open({
      type: 2
      ,title: '修改賬戶'
    //url
      ,content: 'form.html'
      ,area: ['420px', '420px']
      ,btn: ['修改', '取消']
    //打開窗口成功後的操作
      ,success:function(layero, index){
        //獲取新窗口對象
        var iframeWindow = window['layui-layer-iframe'+ index];
        //重新渲染
        layui.$.ajax({
          type: 'post',
          url: localhostHead + '/user/info/' + userid,
          dataType: "json",
          contentType: "application/json",
          success: function (data) {
              //渲染表單
            //調用子層定義的方法
            iframeWindow.setdata(data.data);   
          
          }
        });
          
               
        //form.render();
        //layui.form('select').render()
      }
    //當iframe點擊確定按鈕時的操作
      ,yes: function(index, layero){
        var iframeWindow = window['layui-layer-iframe'+ index]
        ,submit = layero.find('iframe').contents().find("#LAY-user-submit");
                  
          //監聽提交
          iframeWindow.layui.form.on('submit(LAY-user-submit)', function(data){
            var  field= data.field; //獲取提交的字段
            field["id"]=userid;
            //提交 Ajax 成功後，靜態更新表格中的數據
                   
            layer.close(index); //關閉彈層
          });  
          
          submit.trigger('click');
        }
      }); 

子層頁面

function setdata(data) {
          //渲染表單
          layui.use('form', function(){
              var form = layui.form;
              //根據的type類型修改
              form.val("layuiadmin-form-admin", { //formTest 即 class="layui-form" 所在元素屬性 lay-filter="" 對應的值
                  "userName": data.userName// "name": "value",
              });
 
              console.log(data);
          });

    };

效果：打開iframe窗口時查詢表格點擊行的值後自動渲染數據，實現用戶修改時自動獲取之前設置好的值的功能

注意事項：

在iframe層的form表單隱藏一個提交按鈕，可實現檢查表單填寫的數據是否正確的功能

 <div class="layui-form-item layui-hide">
      <input type="button" lay-submit lay-filter="LAY-user-submit" id="LAY-user-submit" value="確認">
    </div>

結合vue,js

突然想到vue框架可以進行數據雙向綁定，炒雞耐用，不過不知道會不會出現衝突啊

騷一把

1. 導入vue

2. 在表單的父層div 加上id

3. 給每個表單的子組件加上v-model進行雙向數據綁定

    <input type="text" v-model="userName" name="userName" lay-verify="" placeholder="請輸入用戶名" autocomplete="off" class="layui-input">
   

4. 在js中賦數據

   //用vue雙向綁定渲染表單
   
   ​     let rua=new Vue({
   
       //div的id
   ​      el:"#layuiadmin-form-admin",
   
   ​      data:data//data:{}
   
   ​    });