Layui Layer在open弹出层中异步加载数据和form表单radio、checkbox、select不渲染,不可点击的解决办法

我们知道在使用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>
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值