我們知道在使用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"></i>添加
</button>
<button class="layui-btn layui-btn-danger">
<i class="layui-icon">ဆ</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'></i>編輯</button>"
+"<button class='layui-btn layui-btn-small layui-btn-danger'><i class='layui-icon'></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>
