`
uule
  • 浏览: 6348824 次
  • 性别: Icon_minigender_1
  • 来自: 一片神奇的土地
社区版块
存档分类
最新评论

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>	

 

 

..

 

 

 

 

 

 

 

 

 

 

 

  • 大小: 15.4 KB
  • 大小: 16.7 KB
分享到:
评论

相关推荐

    easyui datagrid 增加鼠标悬停弹窗事件

    - **创建弹窗**:然后,根据获取的数据创建一个预览窗口,可以是模态对话框、浮动层或其他形式,用于显示关键信息。 - **显示弹窗**:在弹窗中加载相关信息,如图片预览,然后将其定位到合适的位置。 - **处理`...

    SpringMVC +easyui+百度富文本编辑器+easyui三级弹窗+shiro权限框架

    EasyUI的三级弹窗功能是其组件特性的一种扩展,允许在同一个页面上打开三个级别的弹出窗口,形成一个嵌套的对话框结构。这种设计可以将复杂的操作流程分解为几个步骤,逐级呈现给用户,降低操作复杂度。例如,在一个...

    easyui 弹窗控件

    在EasyUI中,弹窗控件(Dialog)是一种常见的交互元素,用于显示模态或非模态的信息窗口,常用于表单编辑、消息提示或者展示详细内容等场景。本文将详细介绍EasyUI弹窗控件的使用方法和相关知识点。 1. **基本用法*...

    jquery-easyui-打印

    实现javascript打印功能,打印整个页面就很简单,但如果指定打印某一个区域就有点难点,这里有一个jQuery插件PrintArea可实现打印页面某区域功能。 使用说明 需要使用jQuery库文件和PrintArea库文件

    jquery easyui 表头固定 datagrid 弹出框 AJAX刷新页面

    标题 "jquery easyui 表头固定 datagrid 弹出框 AJAX刷新页面" 涉及的是在网页开发中使用jQuery EasyUI库实现的功能。jQuery EasyUI是一个基于jQuery的UI框架,它提供了一系列易于使用的组件,如datagrid(数据网格...

    easyui dialog和messager样式更改

    easyui dialog和messager样式更改,默认样式太丑

    SpringMVC+mybatis+easyui+百度富文本编辑器+easyui三级弹窗+shiro权限框架

    综上所述,这个项目结合了SpringMVC的MVC架构,MyBatis的持久层处理,EasyUI的界面设计,UEditor的富文本编辑,以及EasyUI的三级弹窗效果,以及Shiro的安全管理,共同构建了一个功能全面、易于维护的企业级Web应用。...

    easyUi弹出window窗口传值与调用父页面的方法,子页面给父页面赋值

    在EasyUI的弹窗场景中,我们主要关注的是通过查询字符串和JavaScript对象(如`parent`关键字)进行传递。 综上所述,EasyUI弹出窗口的传值与调用父页面方法涉及到前端页面交互的基本技术,理解并熟练掌握这些技巧...

    SpringMVC+mybatis+easyui+ueditor+easyui三级弹窗+shiro权限框架

    在“三级弹窗”场景中,EasyUI可以实现多级联动的对话框,提供丰富的交互体验。 UEditor是一款功能强大的富文本编辑器,常用于在线内容编辑。它支持图片上传、视频插入、公式编辑等多种功能,让网页内容的编辑变得...

    easyui- Jquery两种颜色选择器

    jQuery ColorPicker颜色选择器【网页取色器】,有的也称拾色器,总之它是运行在网页上截取屏幕颜色值的小工具,可以把某点的颜色值转换至对应格式传入需要的地方。ColorPicker基于强大的jQuery,使用方便、配置简单...

    easyUI中datagrid鼠标悬浮显示图片

    easyUI中datagrid鼠标悬浮显示图片,博客地址:https://blog.csdn.net/lwf3115841/article/details/119531658?spm=1001.2014.3001.5501

    EasyUI实现两个treegrid互相拖放

    本代码在EasyUI官网原treegrid拖放demo的基础上进行详尽的注释,并加以改动,如今可以实现两个treegrid之间互相拖放,本代码分别可以进行“剪切”和“复制”的功能,当前使用的是“剪切”功能,可通过改变treegrid-...

    EasyUI InsdepTheme EasyUI的皮肤美化 免费版

    总的来说,EasyUI InsdepTheme为开发者提供了一种便捷的方式,以美化基于EasyUI构建的应用程序。尽管InsdepTheme的获取途径可能有限,但其提供的视觉效果和用户体验的提升对于非商业项目来说,无疑是一大福音。在...

    简单的easyui页面

    EasyUI是一种基于JavaScript和CSS的前端框架,专为构建用户界面而设计,尤其适用于后台管理系统。这个名为"简单的easyui页面"的项目提供了一个简化版的EasyUI页面,非常适合用作前台UI界面,以实现简洁、高效的用户...

    easyui1.7 官网示例大全

    easyui\easyui-accordion-demo.zip easyui\easyui-crud-demo.zip easyui\easyui-datagrid10-demo.zip easyui\easyui-datagrid11-demo.zip easyui\easyui-datagrid12-demo.zip easyui\easyui-datagrid13-demo.zip ...

    easyui视频教程(6)

    EasyUI 是一个基于 jQuery 的轻量级用户界面框架,它为开发者提供了丰富的组件,包括布局、表格、对话框、树形菜单、表单等,帮助快速构建美观且响应式的 web 应用程序。"easyui 视频教程(6)"显然是针对初学者设计的...

    easyui的入门教程

    - **对话框(Dialog)**: 提供了模态和非模态两种对话框,可以用于显示信息、输入数据或执行操作。 - **表格(Grid)**: 支持数据分页、排序、过滤和编辑功能,与后台数据库的交互也非常便捷。 - **表单(Form)*...

    easyUI例子_easyui1.4.4_一套EASYUI的经典后台管理模板_jquery_

    EasyUI 是一个基于 jQuery 的前端框架,主要用于快速构建用户界面,尤其适用于后台管理系统。这个"easyUI例子_easyui1.4.4"压缩包提供了一套使用 EasyUI 1.4.4 版本的经典后台管理模板,适用于开发人员快速搭建功能...

    easyui官方离线文档

    EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列易于使用的组件,帮助开发者快速构建用户界面。这个"easyui官方离线文档"包含了丰富的资源,包括demo、源码、演示以及针对现代前端框架如Vue、Angular和React的...

    easyui-textbox和easyui-combobox的onchange事件响应实例

    在这个实例中,我们将深入探讨 EasyUI 中的两个重要组件:`easyui-textbox` 和 `easyui-combobox`,以及它们的 `onchange` 事件响应。 `easyui-textbox` 是一个基础输入框组件,它扩展了原生 HTML 的 `input` 元素...

Global site tag (gtag.js) - Google Analytics