动态加载modal框(bootstrap)

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

开发环境：

• 模板引擎：velocity
• 前端框架：bootstrap

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

一：动态加载modal框（动态加载后台数据显示在modal框）

父页面：

添加弹出按钮和modal的容器：

添加域名



     

父页面添加showModal方法，由弹出按钮的click事件触发：

Modal页面（addItem.vm）：

    

        

            

                ×
                
Test
            
            


                

                    Test1：
                    

                        
                            #foreach(${envOption} in ${envMap})
                                #if (${envOption.id} == ${selectEnv})
                                    ${envOption.name}
                                #else
                                    ${envOption.name}
                                #end
                            #end
                        
                    
                
                

                    Test2：
                    

                        
                    
                    

                        
                            #foreach(${zone} in ${zoneMap})
                                .${zone.name}
                            #end
                        
                    
                
                

                    Test3：
                    

                        
                    
                
            
            

                关闭
                提交更改
            
        
    

需要注意的约定是： 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容器空间的值

二：Modal刷新范例（例如根据select控件选择值刷新数据）
原理：通过select的onChange事件调用refreshModal方法，就可以调用后台的addItem方法获取数据，然后刷新modal的前台数据
1.前台代码：通过select的onChange事件调用refreshModal方法

 
     ......
 

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 addItem(HttpServletRequest request, @RequestParam(value = "env", required = false) String env) {
        Map data = new FastHashMap();

        // 获取页面配置数据
        Map envMap = enviromentService.getEnviromentMap();
        if (env == null) {
            env = ControllerUtils.getDefaultEnvId(envMap, DEFAULT_ENV).getId();
        }

        Map 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})
            
                
                    ${record.id}
                
                
                    ${record.name}.${record.zoneName}
                
                
                    ${record.content}
                
                
                    ${record.envName}
                
                
                    -
                
                
                    删除Item
                
            
        #end

• 模态框部分代码：

    

        

            

                ×
                
Confirm
            
            
你确定要删除Item么？
            

                Yes
                Cancel
            
        

    

• 删除记录的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中去