动态加载modal框(bootstrap)

背景:在web开发中,modal框是很常用的组件,那如何在modal中加载后台数据?

开发环境:
  • 模板引擎:velocity
  • 前端框架:bootstrap

需求:父页面需要实现一个动态modal框,modal中的数据在每次modal弹出时从后台获取:


4383604-7db24c4483f0a044.png

一:动态加载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):


4383604-845b8ac45f41a5af.png

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">&times;</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

4383604-ac1a0c5656db411a.png

在show事件的handler中对modal进行动态处理,比如范例中对modal中id为deleteOkBtn的按钮添加了handler,并成功将recordId传入到modal中去

没有更多推荐了,返回首页