Layui Layer在open彈出層中非同步載入資料和form表單radio、checkbox、select不渲染，不可點選的解決辦法

阿新 • • 發佈：2019-01-11

我們知道在使用layui的form表單元素中的radio、checkbox、select控制元件時需要使用layui.use([“form”])載入form表單模組，並使用時form.render()函式進行渲染。

而layer.open呼叫時的是靜態html程式碼，所以在layui.open程式碼執行之後，需要呼叫
form.render()進行渲染。

同樣的道理，如果我們需要在彈出的介面中顯示非同步載入的資料，那麼需要先執行非同步資料的載入到Html中，再使用layer.open應用載入後的html即可。

例：點選新增按鈕，顯示新增員工介面，同時載入部門資訊到下拉列表中。
效果圖如下：
這裡寫圖片描述

下面是完整案例程式碼：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head> 

<% pageContext.setAttribute("APP_PATH", request.getContextPath()); %>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="${APP_PATH }/Static/layui/css/layui.css">
<script type="text/javascript" src="${APP_PATH }/Static/js/jquery-3.2.1.min.js" 
></script>
<script type="text/javascript" src="${APP_PATH }/Static/layui/layui.js"></script>
<style type="text/css">
    body .myclass .layui-layer-content{padding: 20px;}
</style>
<title>Insert title here</title>
</head>
<body style="margin-top: 20px;">
    <div class="layui-container">
        <!-- 標題列 -->
        <div class="layui-row">
            <div class="layui-col-md12" style="text-align: center;">
                <font size="15px;">SSM-CRUD</font>
            </div>
        </div>
        <!-- 頂部列 -->
        <div class="layui-row" style="margin-top: 20px;">
            <div class="layui-col-md12">
                <button id="addEmplpyeeBtn" class="layui-btn layui-btn-normal">
                <i class="layui-icon">&#xe654;</i>新增
                </button>
                <button class="layui-btn layui-btn-danger">
                <i class="layui-icon">&#x1006;</i>刪除
                </button>
            </div>
        </div>
        <!-- 表格列 -->
        <div class="layui-row">
            <div class="layui-col-md12">
                <table class="layui-table" id="table">
                    <thead>
                        <tr>
                            <th>編號</th>
                            <th>姓名</th>
                            <th>性別</th>
                            <th>郵箱</th>
                            <th>部門</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
        <!-- 分頁列 -->
        <div class="layui-row">
            <div class="layui-col-md12">
                <div id="paging" style="float: right;"></div>
            </div>
        </div>

        <!-- 需要彈出的新增員工介面 -->
        <div class="layui-row" id="test" style="display: none;">
            <div class="layui-col-md10">
                <form class="layui-form" id="addEmployeeForm">
                    <div class="layui-form-item">
                        <label class="layui-form-label">姓名：</label>
                        <div class="layui-input-block">
                            <input type="text" name="empName" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">性別：</label>
                        <div class="layui-input-block">
                            <input type="radio" name="empSex" value="男" title="男" checked>
                            <input type="radio" name="empSex" value="女" title="女">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">郵箱：</label>
                        <div class="layui-input-block">
                            <input type="text" name="empEmail" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">部門：</label>
                        <div class="layui-input-block">
                            <select class="layui-input" name="deptId" id="deptSelect">

                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button type="button" class="layui-btn layui-btn-normal">提交</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

    </div>
</body>
<script type="text/javascript">
    layui.use(["form","laypage","layer"],function(){
        var form=layui.form;
        var laypage=layui.laypage;
        var layer=layui.layer;

        $(function () {
            var url="${APP_PATH}/employee";
            initData(url, laypage);


            /* 點選新增按鈕提出新增員工介面 */
            $("#addEmplpyeeBtn").click(function () {

                /* 非同步獲取部門資料填充到部門Select */
                var url="${APP_PATH}/departments";
                $.get(url,function(result){
                    var departments=result.data.departments;
                    var deptSelect=$("#deptSelect");
                    $.each(departments,function(index,data){
                        var deptOption=$("<option value='"+data.deptId+"'>"+data.deptName+"</option>");
                        deptSelect.append(deptOption);
                    });

                    /* 再彈出新增介面 */
                    layer.open({
                        type:1,
                        title:"新增員工",
                        skin:"myclass",
                        area:["50%"],
                        content:$("#test").html()
                    });

                    /* 渲染表單 */
                    form.render();

                });

            });

        });

        function initData(url,laypage) {
            $.get(url,function(result){
                var pageInfo=result.data.pageInfo;
                var employees=pageInfo.list;
                var employeeTr;

                <!--填充表格資料-->
                $("#table tbody").html("");
                $.each(employees,function(index,item){
                    employeeTr=$("<tr>"
                            +"<td>"+item.empId+"</td>"
                            +"<td>"+item.empName+"</td>"
                            +"<td>"+item.empSex+"</td>"
                            +"<td>"+item.empEmail+"</td>"
                            +"<td>"+item.department.deptName+"</td>"
                            +"<td>"
                                +"<button class='layui-btn layui-btn-small layui-btn-normal'><i class='layui-icon'>&#xe642;</i>編輯</button>"
                                +"<button class='layui-btn layui-btn-small layui-btn-danger'><i class='layui-icon'>&#xe640;</i>刪除</button>"
                            +"</td>"
                        +"</tr>");
                    employeeTr.appendTo("#table tbody");
                });

                <!--填充分頁資料-->
                 laypage.render({
                    elem: 'paging'
                    ,curr: pageInfo.pageNum
                    ,count: pageInfo.total
                    ,limit: pageInfo.pageSize
                    ,limits:[5,10,20]
                    ,layout: ['count', 'prev', 'page', 'limit', 'next', 'skip']
                    ,jump: function(obj,first){
                      if(!first){
                          var url="${APP_PATH}/employee?pageNum="+obj.curr+"&pageSize="+obj.limit;
                          initData(url, laypage);
                      };
                    }
                  });  
            });
        }

    });

</script>
</html>

Layui Layer在open彈出層中非同步載入資料和form表單radio、checkbox、select不渲染，不可點選的解決辦法

我們知道在使用layui的form表單元素中的radio、checkbox、select控制元件時需要使用layui.use([“form”])載入form表單模組，並使用時form.render()函式進行渲染。而layer.open呼叫時的是靜態h

在layui layer 彈出層中載入 layui table

1 layer.open({ 2 type: 1, 3 area:['80%','60%'], 4 content: '<div><table id="testTable"></table></div>', 5 s

layui（彈出層）

lse 屬性彈層標題欄彈出層 frame 重復 gin normal 首先引入文件 layui.css　　jquery.min.js　　layui.js 彈出層 data-method 後面的屬性控制是什麽彈窗，在js中寫方法 <div class="site

Layui關閉彈出層對話方塊--重新整理父介面

在畢設的開發中，新增使用者、新增許可權等等一些地方需要類似於bootstrap中的模態框。然而開發用的卻是layui 在layui中有彈出層可以實現其中的效果。但是，一般用的時候都是提交後關閉視窗，重新整理父介面。這裡記錄一下方法 var index = parent.layer.getFrameIn

layui中彈出iframe層時將彈出層的儲存按鈕繫結為iframe中表單的提交按鈕的方法

彈出層提交表單的js layer .open({ type : 2, title : '新增許可權', area : [ '500px', '450px' ], offset : '160px', shadeClose : t

layui 操作彈出層

var index = parent.layer.getFrameIndex(window.name); parent.layer.close(index);//關閉當前頁 // win

[Layer] layui的彈出層用法記錄

為了更方便自己的使用和查詢，把常用的程式碼記錄一下，省的老去翻文件了。通用載入提示：layer.msg('載入中...',{icon: 16,time:false,shade:0.6});layer.load(2, { shade: false });完成提示加關閉當前lay

layui.layer 彈出層使用

layer 在 layui 體系中的位置比較特殊，甚至讓很多人都誤以為 layui = layer ui，所以再次強調 layer 只是作為 layui 的一個彈層模組1,獲取laery,你需要去官網下載laery.js 地址--http://layer.layui.co

layui iframe彈出層高度自適應，並垂直居中

var bodyHH = document.documentElement.clientHeight; if(heg + titHeight + btnHeight > $(window).height()){ layero.css({height:$(window).height(),

前端ui框架layui——layer彈出層-內建方法

提示：本頁內容所展示的內建方法是除了所有彈出方法(eg:layer.open)以外的，想看彈出方法請到這裡————————內建方法——————————1.layer.config(options) - 初始化全域性配置這是一個可以重要也可以不重要的方法，重要的是，它的

layui之彈出層--從父視窗傳遞資料到子視窗

前一篇《layui之資料表格–與後臺互動獲取資料》介紹了layui資料表格如何獲取動態資料，接下來介紹下layui如何往彈出層子視窗傳遞表格資料示例如圖：點選編輯按鈕，彈出編輯彈出層，並顯示相應的編輯資料這裡省略layui基礎的語法，

layui使用button按鈕點擊出現子彈層彈層中載入表單，並傳遞引數給父彈出層

在父層中增加button按鈕和隱藏域接收子彈出層傳遞的值 <button id="btnMenuTree" type="button" class="layui-btn layui-btn-radius layui-btn-normal layui-btn-xs">選擇</bu

layui彈出層layer過大被遮擋解決辦法-resize事件自動調整

思路 pla title 位置相關無法 dex 前端情況遇到的問題 ??最近在使用layui做一個管理系統，由於前端技術有限，在開發過程中也遇到這樣那樣的問題，即比較簡單的問題有時也要搞半天。。??layer彈出窗口在彈出時指定了area，彈出後，如果當前頁面（if

彈出層-layui

pre eth ati led 彈出 system style AD IV type 0（信息框，默認）1（頁面層）2（iframe層）3（加載層）4（tips層） iframe窗 layer.open({ type: 2, titl

解決session過期跳轉到登錄頁並跳出iframe框架（或者layui彈出層）

ref 界面 func ESS pre 這不 session ram 用戶當用戶長時間停留在管理界面沒有操作，等到session過期後，進行了操作，那麽只是iframe跳轉到login頁面，這不是我們想要的結果。解決方法：在login頁面加一個邏輯判斷： <scr

layui 彈出層點擊事件

tle color script pan dmi div style stat 事件最簡單 <!DOCTYPE html> <html> <head> <title></title> {load

Layui彈出層、日期和時間選擇、即時通訊、分頁

怎樣其中日期時間 hub scrip 即時通 http 邏輯 asc Layui彈出層、日期和時間選擇、即時通訊、分頁彈層組件文檔 - layui.layer 對於彈出層的感覺是：layer 至今仍作為 layui 的代表作，她的受眾廣泛並非偶然，而是這數年來的堅持、

Layui 關於在使用Layui彈出層的時候,彈兩個視窗時再使用第二次彈窗的時候導致視窗不能點選

問題如標題,原因是因為我做的新增和修改是在同一個視窗中,但是由於我在第一層的視窗中的一個按鈕需要呼叫開啟第二層視窗,所以就導致在程式碼上一個按鈕綁定了兩次click時間,在第一次使用過後,再去使用的時候會導致第一次的事件也會執行,頁面上會多彈出一個視窗導致頁面無法點選,解決方法就是在你彈出第二層視窗

Layui彈出層詳解

今天空了學習一下彈出層還是一步步展示把首先，layer可以獨立使用，也可以通過Layui模組化使用。我個人一直是用的模組化的所以下面素有的都是基於模組化的。引入好相關檔案就可以開始啦今天放圖片把試著學一下放圖片 1.最簡單的彈層，這個彈層的效果其實就是一個加了特效和樣式的aler

Layui 總結（1）彈出層

text rip das highlight 增加 str type 吸附 style 1.彈出小提示tips 默認吸附在自己地方控制彈出的位置可以讓其吸附在其他元素附近，在內容後面增加一個jq選擇器 <input type="text">

Layui Layer在open彈出層中非同步載入資料和form表單radio、checkbox、select不渲染，不可點選的解決辦法

相關推薦