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>
..
相关推荐
SpringMVC +easyui+百度富文本编辑器+easyui三级弹窗
easyui 弹窗控件
easyui dialog和messager样式更改,默认样式太丑
easyui1.4.5增加一个鼠标滑过行,注意是行不是列,然后弹出框显示某些关键信息,如经典的图片预览操作,内容提供demo,并附修改方法,这个方法是修改的源码,没有增加扩展实现,若愿意请自行实现
SpringMVC+mybatis+easyui+百度富文本编辑器+easyui三级弹窗+shiro权限框架
SpringMVC+mybatis+easyui+ueditor+easyui三级弹窗+shiro权限框架
NULL 博文链接:https://cqh520llr.iteye.com/blog/1956791
jQuery ColorPicker颜色选择器【网页取色器】,有的也称拾色器,总之它是运行在网页上截取屏幕颜色值的小工具,可以把某点的颜色值转换至对应格式传入需要的地方。ColorPicker基于强大的jQuery,使用方便、配置简单...
easyUi弹出window窗口传值与调用父页面的方法,子页面给父页面赋值,详情链接:
本代码在EasyUI官网原treegrid拖放demo的基础上进行详尽的注释,并加以改动,如今可以实现两个treegrid之间互相拖放,本代码分别可以进行“剪切”和“复制”的功能,当前使用的是“剪切”功能,可通过改变treegrid-...
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的经典后台管理模板easyui的后台管理实例运行环境浏览器项目技术(必填)easyui+jquery1.4.4
easyUI
基于EasyUI 官方的帮助。 Application 使用easyUI创建一个CRUD的应用 使用easyUI创建一个CRUD DataGrid 使用easyUI展开行详细编辑form创建CRUD应用 使用jQuery easyUI 创建一个 RSS Feed阅读器 Drag and ...
easyui快递系统easyui快递系统easyui快递系统easyui快递系统easyui快递系统easyui快递系统easyui快递系统easyui快递系统easyui快递系统easyui快递系统easyui快递系统easyui快递系统easyui快递系统easyui快递系统...
jQuery EasyUI EasyUI 组件范例
EasyUI 中文文档 两份
easyui1.7中文api
本页面是简化后的easyui页面 十分适合做前台ui界面
easyui在ie6下存在性能问题,所有从easyui里分离出来了一个grid ui控件。非常灵活,可以自己改成控件,里面点开直接可以看到效果