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>
easyui里弹窗的两种表现形式的更多相关文章
- [转载]EasyUI Pagination 分页的两种做法
EasyUI 的 datagrid 支持服务器端分页,但是官方的资料比较少,以下总结了两种 datagrid 的服务器端分页机制,可根据情况具体使用. 一:使用 datagrid 默认机制 后台: p ...
- EasyUI Pagination 分页的两种做法
EasyUI 的 datagrid 支持服务器端分页,但是官方的资料比较少,以下总结了两种 datagrid 的服务器端分页机制,可根据情况具体使用. 一:使用 datagrid 默认机制 后台: p ...
- Easyui 创建dialog的两种方式,以及他们带来的问题
$('#yy').dialog('open');//打开dialog 这地方要注意,加入你关闭窗口的地方使用$('#yy').dialog('destroy');那么你这个dialog就只能使用一次, ...
- EasyUI 之 DataGrid的两种赋值方法
方法一:使用ViewData赋值 首先,我们创建一个User的实体类 public class User { public string UserID; public string UserName; ...
- Flask 中蓝图的两种表现形式
最近在学Flask,特有的@X.route 很适合RESTfuld API, 一般小型应用,在一个py文件中就可以完成,但是维护起来比较麻烦. 想体验Django那样的MVT模式, 看到 Flask提 ...
- 1. easyui tree 初始化的两种方式
/** * 查询角色分类 */function queryRoleCategoryTree(selectId) { var url = basePath + 'rest/roleCategoryCon ...
- dataTable 从服务器获取数据源的两种表现形式
var table = $('#example1').DataTable({ "processing": true,//加载效果 "autoWidth": fa ...
- 图文详解两种算法:深度优先遍历(DFS)和广度优先遍历(BFS)
参考网址:图文详解两种算法:深度优先遍历(DFS)和广度优先遍历(BFS) - 51CTO.COM 深度优先遍历(Depth First Search, 简称 DFS) 与广度优先遍历(Breath ...
- Redis中持久化的两种方法详解
Redis提供了两种不同的持久化方法来将数据存储到硬盘里面.一种方法叫快照(snapshotting),它可以将存在于某一时刻的所有数据都写入硬盘里;另一种方法教只追加文件(append-only f ...
随机推荐
- 【转载】非线性分析中的ansys跟踪显示
原文地址:http://muchong.com/html/201209/4936556.html 在ansys output windows 有 force convergenge valu 值 和 ...
- TestDisk 恢复rm -rf 的文件
Linux操作系统下使用TestDisk恢复已删除的文件或目录 原创作者:szyzln/2015.10.16 转载需注明原始出处! 说明: testdisk和photorec是著名的恢复数据,而绝 ...
- cl.exe命令方式编译cpp
直接在命令行窗口调用cl编译cpp文件 往往不能通过. 主要原因是一些头文件及可执行文件未在环境变量中设置.可以通过执行VSVAR32.BAT批处理文件来设置环境变量,注意vs2005跟2008的放置 ...
- 解决php的“It is not safe to rely on the system’s timezone settings”问题
PHP调试的时候出现了警告: It is not safe to rely on the system解决方法,其实就是时区设置不正确造成的,本文提供了3种方法来解决这个问题. 实 际上,从PHP 5 ...
- SQL2005 遍历表插入
/* sql2005遍历表(方法1) insert into 数据表(userid,adddate) values((select userid from 用户表),date); */ /*sql20 ...
- 电脑控制台灯(c# hook,显示室温,联网校正时间)
突发奇想,于是便写了一个小程序用于控制台灯,这几天功能也在不断的完善中,目前基本已经完成.下面进行功能的简述的代码的分析. 整体设计包含下位机程序和上位机程序.下位机用的c语言,上位机用的 ...
- (C# Binary Tree) 基本概念和算法
A binary tree is defined as a tree where each node can have no more than two children. Building a Bi ...
- JVM参数(一)JVM类型以及编译器模式
现在的JVM运行Java程序(和其它的兼容性语言)时在高效性和稳定性方面做的非常出色.自适应内存管理.垃圾收集.及时编译.动态类加载.锁优化——这里仅仅列举了某些场景下会发生的神奇的事情,但他们几乎不 ...
- mysql备份还原数据库
1.备份数据库 mysqldump -u root -p test>/home/victor/test.sql 说明:如果提示找不到mysqldump命令,先用一条find命令查找mysqldu ...
- properties文件简介及其常用Java操作
一.properties文件简介 java中的properties文件是一种配置文件,主要用于表达配置信息,文件类型为*.properties,格式为文本文件,文件的内容是格式是"键=值&q ...