easyui里弹窗的两种表现形式

easyui里弹窗的两种表现形式

博客分类：

 
• jQueryEasyUi

 

1、主JSP页面中描绘弹窗

 

<div id="centerDiv" data-options="region:'center',border:false">
        <table id="networkQueryGrid"
            data-options="queryForm:'#queryForm',title:'查询结果',iconCls:'pag-list'"></table>
    </div>

    <div id="restartDialog" class="easyui-dialog" title="重新启动网络" style=" 400px; height: 180px;"
                    data-options="iconCls:'pag-list',modal:true,collapsible:false,minimizable:false,maximizable:false,resizable:false,closed:true">
        <div style="margin-left: 5px;margin-right: 5px;margin-top: 5px;">
            <div class="data-tips-info">
                <div class="data-tips-tip icon-tip"></div>
                此网络提供的所有服务都将中断。请确认您确实要重新启动此网络。
            </div>
            <table style="margin-top: 20px;margin-left:20px;margin-right:20px;vertical-align:middle;" width="80%" border="0" cellpadding="0" cellspacing="1">
                <tr>
                    <td style="20%;text-align:right;">
                        清理：
                    </td>
                    <td  style="text-align:left;">
                        <input type="hidden" id="networkId" name="networkId"/>
                        <input type="checkbox" id="cleanUp" name="cleanUp"/>
                    </td>
                </tr>
            </table>
            <div style="text-align:right;margin-right:30px;">
                <a href="#" class="easyui-linkbutton" data-options="iconCls:'ope-finish'" onclick="restartNetwork()">确定</a>
                <a href="#" class="easyui-linkbutton" data-options="iconCls:'ope-cancel'" onclick="cancel()">取消</a>
            </div>
        </div>
    </div>

JS:

function showRestartDialog(id){
        $("#networkId").val(id);
        $("#restartDialog").dialog('open');
    }

    function restartNetwork(){
        cancel();
        var checked = $("#cleanUp").prop("checked");
        invokeAjax('/network/restartNetwork','networkId=' + $("#networkId").val() + '&cleanUp='+checked,'重新启动');
    }

    function cancel(){
        $('#restartDialog').window('close');
    }

2、直接在JS里绘制弹窗(弹窗为单独页面文件)

 

Toobar可放置到主JSP页面：

<div id="toolbar" style="text-align:right;">
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'ope-finish'" onclick="associateIP()">获取新IP</a>
</div>

 JS:

function showPublicIpDialog(row){
        var networkId ;
        var zoneId = row.zoneId;
        var virtualMachineId = row.id;
        if(row.nics && row.nics.length > 0){
            networkId = row.nics[0].networkId;
        }

        var ipHref = _root +'/vm/viewAllocateIP?networkId='+networkId+'&zoneId='+zoneId;
        $dialog = $('<div/>').dialog({
               title: '分配公网IP',
                400,
               height: 250,
               iconCls : 'pag-search',
               closed: true,
               cache: false,
               href: ipHref,
               modal: true,
               toolbar:'#toolbar',
               onLoad:function(){
                   //设置其他数据
                   $("#zoneId").val(row.zoneId);
                   if(row.nics && row.nics.length > 0){
                      $("#networkId").val(row.nics[0].networkId);
                   }
               },
               buttons : [ {
                    text : '确定',
                    iconCls : 'ope-save',
                    handler : function() {
                        var $radio = $("input[type='radio']:checked");
                        var iPAddressId = $radio.val();
                        if($radio.length == 0 || iPAddressId == ""){
                            $.messager.alert('提示', '请选择IP','info');  return;
                        }

                        $.ajax({
                            url: _root + "/vm/enableStaticNat",
                            type: "post",
                            data: {virtualMachineId:virtualMachineId,iPAddressId:iPAddressId},
                            dataType: "json",
                            success: function (response, textStatus, XMLHttpRequest) {
                                 if(response!=null && response.success){
                                     $.messager.alert('提示','分配公网IP成功','info',function(){
                                         $dialog.dialog('close');
                                         $obj.SuperDataGrid('reload');
                                     });

                                 }else if(response!=null&&!response.success){
                                     $.messager.alert('提示','分配公网IP失败','error');
                                 }
                            }

                        })
                    }
                }, {
                    text : '取消',
                    iconCls : 'ope-close',
                    handler : function() {
                        $dialog.dialog('close');
                    }
                } ]

          });

        $dialog.dialog('open');

    }

    function associateIP(){
        ...
    }

Controller:

/**
     * 跳转到弹窗页面
     */
    @RequestMapping(value = "/viewAllocateIP", method = {RequestMethod.GET,RequestMethod.POST})
    public ModelAndView viewAllocateIP(@RequestParam String networkId,@RequestParam String zoneId) {
        ModelAndView model = new ModelAndView();
        model.setViewName("vm/allocateIP");

        try {
            Set<PublicIPAddress> ips = virtualMachineService.listPublicIpAddresses(networkId,zoneId);
            model.addObject("ips", ips);
        } catch(BusinessException e) {
            throw new ControllerException(HttpStatus.OK, e.getCode(), e.getMessage());
        } catch(Exception e) {
            final String msg = messageSource.getMessage(TipsConstants.QUERY_FAILURE);
            throw throwControllerException(LOGGER, HttpStatus.OK, null, msg, msg, e);
        }

        return model;
    }

allocateIP.jsp:

<body>
    <input type="hidden" name="zoneId" id="zoneId" />
    <input type="hidden" name="networkId" id="networkId" />

    <div class="easyui-layout" data-options="fit:true" style="padding: 0px;">
        <div data-options="region:'center',border:false">
            <c:if test="${!empty ips}">
                <table class="ipTable" width="95%" border="1" borderColor="#DEDEDE" cellpadding="0" cellspacing="0">
                    <c:forEach items="${ips }" var="item">
                        <tr>
                            <td style=" 35px; text-align: center;"><input type="radio" value="${item.id }" name="ids" /></td>
                            <td style="padding-left: 35px; font-size: 13px;">${item.IPAddress }</td>
                        </tr>
                    </c:forEach>
                </table>
            </c:if>
        </div>
    </div>
    </body>