背景：在web開發(fā)中，modal框是很常用的組件，那如何在modal中加載后臺數(shù)據(jù)？
開發(fā)環(huán)境：
- 模板引擎：velocity
- 前端框架：bootstrap
需求：父頁面需要實(shí)現(xiàn)一個(gè)動(dòng)態(tài)modal框，modal中的數(shù)據(jù)在每次modal彈出時(shí)從后臺獲?。?/p>
一：動(dòng)態(tài)加載modal框（動(dòng)態(tài)加載后臺數(shù)據(jù)顯示在modal框）
父頁面：
添加彈出按鈕和modal的容器：
<!-- 觸發(fā)modal彈出的按鈕-->
<button id="addDomainBtn" type="button" class="btn btn-default" onclick="showModal()">添加域名
<!-- Modal的外層div，也是動(dòng)態(tài)加載內(nèi)容/addDomain的容器-->
<div class="modal fade" id="addDomainModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<!--modal內(nèi)容在此加載-->
</div>
父頁面添加showModal方法，由彈出按鈕的click事件觸發(fā)：
<script>
var showModal = function () {
$("#addDomainModal").load("/addItem", function () {
$("#addDomainModal").modal('show');
})
}
</script>
Modal頁面（addItem.vm）：
<div class="modal-dialog">
<div class="modal-content">
<form action="/saveItem" class="form-horizontal customized-form" id="addDomain">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Test</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="firstname" class="col-sm-3 control-label">Test1：</label>
<div class="col-sm-4">
<select id="env" name="env" class="form-control" onchange="zoneChange()">
#foreach(${envOption} in ${envMap})
#if (${envOption.id} == ${selectEnv})
<option value="${envOption.id}" selected>${envOption.name}</option>
#else
<option value="${envOption.id}">${envOption.name}</option>
#end
#end
</select>
</div>
</div>
<div class="form-group">
<label for="firstname" class="col-sm-3 control-label">Test2：</label>
<div class="col-sm-4">
<input type="text" name="name" value="$!record.name" class="form-control" placeholder="">
</div>
<div class="col-sm-3">
<select id="zone" name="zone" class="form-control" required>
#foreach(${zone} in ${zoneMap})
<option value="$!zone.id">.${zone.name}</option>
#end
</select>
</div>
</div>
<div class="form-group">
<label for="firstname" class="col-sm-3 control-label">Test3：</label>
<div class="col-sm-4">
<input type="text" name="content" value="$!record.content" class="form-control"
placeholder="">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" value="no" data-dismiss="modal">關(guān)閉</button>
<button type="submit" class="btn btn-primary" value="ok" id="submitAddBtn">提交更改</button>
</div>
</form>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
需要注意的約定是： 1、由負(fù)責(zé)承載modal內(nèi)容的div來調(diào)用jquery的load事件 2、jquery的load事件會將/addItem頁面渲染到調(diào)用load事件的div中 3、modal頁面文件的名稱(addItem.vm)需要和url（/addItem）保持一致，否則/addItem對應(yīng)的controller需要在代碼中指定需要渲染的view
二：父頁面向Modal傳值（例如傳入id，后臺根據(jù)id查詢數(shù)據(jù)顯示在modal框）
如果id直接在頁面的model中，通過EL表達(dá)式取值即可，否則通過js獲取id容器空間的值
<script>
var showModal = function () {
$("#addDomainModal").load("/addItem?id=#{id}", function () {
$("#addDomainModal").modal('show');
})
}
</script>
<script>
var showModal = function () {
$("#addDomainModal").load("/addItem?id=" + $("#xxxx").val(), function () {
$("#addDomainModal").modal('show');
})
}
</script>
二：Modal刷新范例（例如根據(jù)select控件選擇值刷新數(shù)據(jù)）
原理：通過select的onChange事件調(diào)用refreshModal方法，就可以調(diào)用后臺的addItem方法獲取數(shù)據(jù)，然后刷新modal的前臺數(shù)據(jù)
1.前臺代碼：通過select的onChange事件調(diào)用refreshModal方法
<select id="env" name="env" class="form-control" onchange="refreshModal()">
......
</select>
2.前臺js代碼：調(diào)用jquery的load方法訪問后臺controller方法
// 根據(jù)select值刷新modal
var refreshModal = function () {
$("#addDomainModal").load("/addItem?env=" + $("#env option:selected").val(), function () {
$("#addDomainModal").modal('show');
})
}
3.controller代碼：
/**
* goto add item page
*
* @param request
* @return
* @version 1.1
*/
@RequestMapping("/addItem")
public Map<String,Object> addItem(HttpServletRequest request, @RequestParam(value = "env", required = false) String env) {
Map<String, Object> data = new FastHashMap();
// 獲取頁面配置數(shù)據(jù)
Map<String, Tenviroment> envMap = enviromentService.getEnviromentMap();
if (env == null) {
env = ControllerUtils.getDefaultEnvId(envMap, DEFAULT_ENV).getId();
}
Map<String, ZoneModel> zoneMap = zoneService.getZoneMap(env);
data.put("selectEnv", env);
data.put("envMap", envMap);
data.put("remoteIp", request.getRemoteAddr());
data.put("zoneMap", zoneMap);
return data;
}
三、父頁面?zhèn)鲾?shù)據(jù)到modal框
有3種方式：
1、通過cookies
2、直接通過modal的show事件傳值
3、父頁面?zhèn)魅牒笈_，modal框在load事件時(shí)獲取后臺數(shù)據(jù)
其中1、2無需后臺交互，性能上占優(yōu)
以常用的2為例：
1.頁面表格中每一行有刪除Item的按鈕，用戶點(diǎn)擊后彈出刪除確認(rèn)對話框（modal）：
2.用戶點(diǎn)擊modal上的ok按鈕后調(diào)用后臺服務(wù)刪除item，這里父頁面在modal彈出時(shí)，需要傳入item的id（recordId）：
- 表格內(nèi)容部分代碼：
#foreach(${record} in ${recordLst})
<tr>
<td>
${record.id}
</td>
<td>
${record.name}.${record.zoneName}
</td>
<td>
${record.content}
</td>
<td>
${record.envName}
</td>
<td>
-
</td>
<td>
<a href="javascript:void(0)" onclick="deleteRecord('${record.id}')">刪除Item</a>
</td>
</tr>
#end
- 模態(tài)框部分代碼：
<div class="modal fade" id="recordModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Confirm</h4>
</div>
<div class="modal-body">你確定要?jiǎng)h除Item么？</div>
<div class="modal-footer">
<button id="deleteOkBtn" type="button" class="btn btn-default">Yes</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
- 刪除記錄的js代碼：
var deleteRecord = function (recordId) {
$("#recordModal").on('show.bs.modal', function () {
// 彈出框OK按鈕綁定事件處理
$("#deleteOkBtn").on('click', function () {
deleteOk(recordId);
});
});
$("#recordModal").modal('show')
}
bootstrap的modal框支持事件show.bs.modal
在show事件的handler中對modal進(jìn)行動(dòng)態(tài)處理，比如范例中對modal中id為deleteOkBtn的按鈕添加了handler，并成功將recordId傳入到modal中去
