LayUI的使用心得:全面覆蓋父窗口的子窗口

前言:有一個這樣的需求:本身已打開了一個窗口,是底部有按鈕的窗口。然後 在這個窗口中又需要打開一個子窗口,原本layui的窗口打開模式設定是 子窗口是嵌在父窗口裏(title和按鈕欄的中間);但是用戶說操作子窗口的時候老是不小心點了 父窗口的底部確定按鈕。那麼 這就只能將 子窗口全面覆蓋住 父窗口。

           這解決辦法其實簡單起來也是很簡單,直接parent.layer.open就可以。但是~

           我們的子窗口類型是 type=1,即窗體裏的content內容是  靜態html,非url請求的頁面內容,並且這裏邊有 input,select,查詢按鈕,table。parent.layer.open的話就會導致 子窗口中的select ,按鈕無效,那 table就也沒法動態加載數據。

原因是:這裏其實呢  一共是有三個層面:原始的主頁面,父窗體(從主頁content=url打開的),子窗體(父窗體中打開的)。一旦在父窗體中以parent.layer.open這種模式打開子窗體的話,就代表  這子窗體中的標籤內容全屬於 主頁面的,那麼 當你在 父窗體中所寫的 子窗體中的標籤的各種事件,那就變成無效的了。

解決辦法:

 parent.layer.open的success事件中,添加:

    1.解決查詢按鈕的事件:

            parent.layui.$("#GetMaterialListId").click(function () { globalFunc.getMaterialList(); });

            GetMaterialListId爲查詢按鈕的id,globalFunc.getMaterialList()爲按鈕點擊的事件。

    2.解決table的加載問題

           parent.layui.table.render的方式初始化table,input是table查詢條件,那麼在 初始化中where裏這樣寫: 

           where: { name: parent.layui.$('#name').val()},

  最後當點子窗口的確定按鈕,即獲取選擇的table的行

       var checkStatus = parent.layui.table.checkStatus('selectManage');

最終效果圖:

這樣就解決問題了,簡單,不必非要將 這些代碼寫在主頁面裏(這是最初比較笨的辦法,因爲parent.layer.open打開的子窗體,就等同於與父窗體同級)。畢竟主頁面的東西與父窗體中的東西沒有特別的關聯,後期管理和查看邏輯都清晰明瞭。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章