背景：在web开发中，modal框是很常用的组件，那如何在modal中加载后台数据？
开发环境：
- 模板引擎：velocity
- 前端框架：bootstrap
需求：父页面需要实现一个动态modal框，modal中的数据在每次modal弹出时从后台获取：
一：动态加载modal框（动态加载后台数据显示在modal框）
父页面：
添加弹出按钮和modal的容器：
<!-- 触发modal弹出的按钮-->
<button id="addDomainBtn" type="button" class="btn btn-default" onclick="showModal()">添加域名
<!-- Modal的外层div，也是动态加载内容/addDomain的容器-->
<div class="modal fade" id="addDomainModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<!--modal内容在此加载-->
</div>
父页面添加showModal方法，由弹出按钮的click事件触发：
<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">关闭</button>
<button type="submit" class="btn btn-primary" value="ok" id="submitAddBtn">提交更改</button>
</div>
</form>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
需要注意的约定是： 1、由负责承载modal内容的div来调用jquery的load事件 2、jquery的load事件会将/addItem页面渲染到调用load事件的div中 3、modal页面文件的名称(addItem.vm)需要和url（/addItem）保持一致，否则/addItem对应的controller需要在代码中指定需要渲染的view
二：父页面向Modal传值（例如传入id，后台根据id查询数据显示在modal框）
如果id直接在页面的model中，通过EL表达式取值即可，否则通过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刷新范例（例如根据select控件选择值刷新数据）
原理：通过select的onChange事件调用refreshModal方法，就可以调用后台的addItem方法获取数据，然后刷新modal的前台数据
1.前台代码：通过select的onChange事件调用refreshModal方法
<select id="env" name="env" class="form-control" onchange="refreshModal()">
......
</select>
2.前台js代码：调用jquery的load方法访问后台controller方法
// 根据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();
// 获取页面配置数据
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;
}
三、父页面传数据到modal框
有3种方式：
1、通过cookies
2、直接通过modal的show事件传值
3、父页面传入后台，modal框在load事件时获取后台数据
其中1、2无需后台交互，性能上占优
以常用的2为例：
1.页面表格中每一行有删除Item的按钮，用户点击后弹出删除确认对话框（modal）：
2.用户点击modal上的ok按钮后调用后台服务删除item，这里父页面在modal弹出时，需要传入item的id（recordId）：
- 表格内容部分代码：
#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
- 模态框部分代码：
<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">你确定要删除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进行动态处理，比如范例中对modal中id为deleteOkBtn的按钮添加了handler，并成功将recordId传入到modal中去
网友评论