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即可。

例：点击添加按钮，显示添加员工界面，同时加载部门信息到下拉列表中。
效果图如下：
Layui Layer在open弹出层中异步加载数据和form表单radio、checkbox、select不渲染，不可点击的解决办法
下面是完整案例代码：

<%@ 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>