easyui里弹窗的两种表现形式

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="width: 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="width: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',               width: 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="width: 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>

 

 

..