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>	

 

 

..