1、主JSP页面中描绘弹窗



 

  1. <div id="centerDiv" data-options="region:'center',border:false">
  2. <table id="networkQueryGrid"
  3. data-options="queryForm:'#queryForm',title:'查询结果',iconCls:'pag-list'"></table>
  4. </div>
  5. <div id="restartDialog" class="easyui-dialog" title="重新启动网络" style="width: 400px; height: 180px;"
  6. data-options="iconCls:'pag-list',modal:true,collapsible:false,minimizable:false,maximizable:false,resizable:false,closed:true">
  7. <div style="margin-left: 5px;margin-right: 5px;margin-top: 5px;">
  8. <div class="data-tips-info">
  9. <div class="data-tips-tip icon-tip"></div>
  10. 此网络提供的所有服务都将中断。请确认您确实要重新启动此网络。
  11. </div>
  12. <table style="margin-top: 20px;margin-left:20px;margin-right:20px;vertical-align:middle;" width="80%" border="0" cellpadding="0" cellspacing="1">
  13. <tr>
  14. <td style="width:20%;text-align:right;">
  15. 清理:
  16. </td>
  17. <td  style="text-align:left;">
  18. <input type="hidden" id="networkId" name="networkId"/>
  19. <input type="checkbox" id="cleanUp" name="cleanUp"/>
  20. </td>
  21. </tr>
  22. </table>
  23. <div style="text-align:right;margin-right:30px;">
  24. <a href="#" class="easyui-linkbutton" data-options="iconCls:'ope-finish'" onclick="restartNetwork()">确定</a>
  25. <a href="#" class="easyui-linkbutton" data-options="iconCls:'ope-cancel'" onclick="cancel()">取消</a>
  26. </div>
  27. </div>
  28. </div>

JS:

  1. function showRestartDialog(id){
  2. $("#networkId").val(id);
  3. $("#restartDialog").dialog('open');
  4. }
  5. function restartNetwork(){
  6. cancel();
  7. var checked = $("#cleanUp").prop("checked");
  8. invokeAjax('/network/restartNetwork','networkId=' + $("#networkId").val() + '&cleanUp='+checked,'重新启动');
  9. }
  10. function cancel(){
  11. $('#restartDialog').window('close');
  12. }

2、直接在JS里绘制弹窗(弹窗为单独页面文件)



 

Toobar可放置到主JSP页面:

  1. <div id="toolbar" style="text-align:right;">
  2. <a href="#" class="easyui-linkbutton" data-options="iconCls:'ope-finish'" onclick="associateIP()">获取新IP</a>
  3. </div>

JS:

  1. function showPublicIpDialog(row){
  2. var networkId ;
  3. var zoneId = row.zoneId;
  4. var virtualMachineId = row.id;
  5. if(row.nics && row.nics.length > 0){
  6. networkId = row.nics[0].networkId;
  7. }
  8. var ipHref = _root +'/vm/viewAllocateIP?networkId='+networkId+'&zoneId='+zoneId;
  9. $dialog = $('<div/>').dialog({
  10. title: '分配公网IP',
  11. width: 400,
  12. height: 250,
  13. iconCls : 'pag-search',
  14. closed: true,
  15. cache: false,
  16. href: ipHref,
  17. modal: true,
  18. toolbar:'#toolbar',
  19. onLoad:function(){
  20. //设置其他数据
  21. $("#zoneId").val(row.zoneId);
  22. if(row.nics && row.nics.length > 0){
  23. $("#networkId").val(row.nics[0].networkId);
  24. }
  25. },
  26. buttons : [ {
  27. text : '确定',
  28. iconCls : 'ope-save',
  29. handler : function() {
  30. var $radio = $("input[type='radio']:checked");
  31. var iPAddressId = $radio.val();
  32. if($radio.length == 0 || iPAddressId == ""){
  33. $.messager.alert('提示', '请选择IP','info');  return;
  34. }
  35. $.ajax({
  36. url: _root + "/vm/enableStaticNat",
  37. type: "post",
  38. data: {virtualMachineId:virtualMachineId,iPAddressId:iPAddressId},
  39. dataType: "json",
  40. success: function (response, textStatus, XMLHttpRequest) {
  41. if(response!=null && response.success){
  42. $.messager.alert('提示','分配公网IP成功','info',function(){
  43. $dialog.dialog('close');
  44. $obj.SuperDataGrid('reload');
  45. });
  46. }else if(response!=null&&!response.success){
  47. $.messager.alert('提示','分配公网IP失败','error');
  48. }
  49. }
  50. })
  51. }
  52. }, {
  53. text : '取消',
  54. iconCls : 'ope-close',
  55. handler : function() {
  56. $dialog.dialog('close');
  57. }
  58. } ]
  59. });
  60. $dialog.dialog('open');
  61. }
  62. function associateIP(){
  63. ...
  64. }

Controller:

  1. /**
  2. * 跳转到弹窗页面
  3. */
  4. @RequestMapping(value = "/viewAllocateIP", method = {RequestMethod.GET,RequestMethod.POST})
  5. public ModelAndView viewAllocateIP(@RequestParam String networkId,@RequestParam String zoneId) {
  6. ModelAndView model = new ModelAndView();
  7. model.setViewName("vm/allocateIP");
  8. try {
  9. Set<PublicIPAddress> ips = virtualMachineService.listPublicIpAddresses(networkId,zoneId);
  10. model.addObject("ips", ips);
  11. } catch(BusinessException e) {
  12. throw new ControllerException(HttpStatus.OK, e.getCode(), e.getMessage());
  13. } catch(Exception e) {
  14. final String msg = messageSource.getMessage(TipsConstants.QUERY_FAILURE);
  15. throw throwControllerException(LOGGER, HttpStatus.OK, null, msg, msg, e);
  16. }
  17. return model;
  18. }

allocateIP.jsp:

  1. <body>
  2. <input type="hidden" name="zoneId" id="zoneId" />
  3. <input type="hidden" name="networkId" id="networkId" />
  4. <div class="easyui-layout" data-options="fit:true" style="padding: 0px;">
  5. <div data-options="region:'center',border:false">
  6. <c:if test="${!empty ips}">
  7. <table class="ipTable" width="95%" border="1" borderColor="#DEDEDE" cellpadding="0" cellspacing="0">
  8. <c:forEach items="${ips }" var="item">
  9. <tr>
  10. <td style="width: 35px; text-align: center;"><input type="radio" value="${item.id }" name="ids" /></td>
  11. <td style="padding-left: 35px; font-size: 13px;">${item.IPAddress }</td>
  12. </tr>
  13. </c:forEach>
  14. </table>
  15. </c:if>
  16. </div>
  17. </div>
  18. </body>

easyui里弹窗的两种表现形式的更多相关文章

  1. [转载]EasyUI Pagination 分页的两种做法

    EasyUI 的 datagrid 支持服务器端分页,但是官方的资料比较少,以下总结了两种 datagrid 的服务器端分页机制,可根据情况具体使用. 一:使用 datagrid 默认机制 后台: p ...

  2. EasyUI Pagination 分页的两种做法

    EasyUI 的 datagrid 支持服务器端分页,但是官方的资料比较少,以下总结了两种 datagrid 的服务器端分页机制,可根据情况具体使用. 一:使用 datagrid 默认机制 后台: p ...

  3. Easyui 创建dialog的两种方式,以及他们带来的问题

    $('#yy').dialog('open');//打开dialog 这地方要注意,加入你关闭窗口的地方使用$('#yy').dialog('destroy');那么你这个dialog就只能使用一次, ...

  4. EasyUI 之 DataGrid的两种赋值方法

    方法一:使用ViewData赋值 首先,我们创建一个User的实体类 public class User { public string UserID; public string UserName; ...

  5. Flask 中蓝图的两种表现形式

    最近在学Flask,特有的@X.route 很适合RESTfuld API, 一般小型应用,在一个py文件中就可以完成,但是维护起来比较麻烦. 想体验Django那样的MVT模式, 看到 Flask提 ...

  6. 1. easyui tree 初始化的两种方式

    /** * 查询角色分类 */function queryRoleCategoryTree(selectId) { var url = basePath + 'rest/roleCategoryCon ...

  7. dataTable 从服务器获取数据源的两种表现形式

    var table = $('#example1').DataTable({ "processing": true,//加载效果 "autoWidth": fa ...

  8. 图文详解两种算法:深度优先遍历(DFS)和广度优先遍历(BFS)

    参考网址:图文详解两种算法:深度优先遍历(DFS)和广度优先遍历(BFS) - 51CTO.COM 深度优先遍历(Depth First Search, 简称 DFS) 与广度优先遍历(Breath ...

  9. Redis中持久化的两种方法详解

    Redis提供了两种不同的持久化方法来将数据存储到硬盘里面.一种方法叫快照(snapshotting),它可以将存在于某一时刻的所有数据都写入硬盘里;另一种方法教只追加文件(append-only f ...

随机推荐

  1. python thread 多线程

    thread 模块在python3中改为_thread,网上的各种帖子都说不建议新手使用thread,好吃不好吃总得尝尝看. import _thread def print_num(): for i ...

  2. Python 面向对象(初级篇) (转)

    概述 面向过程:根据业务逻辑从上到下写垒代码 函数式:将某功能代码封装到函数中,日后便无需重复编写,仅调用函数即可 面向对象:对函数进行分类和封装,让开发"更快更好更强..." 面 ...

  3. Fortran学习心得

    编译调试: 服务器上所用的编译器可以编译.F90的文件,同时,经过测试已经知道有两款编译器:gfortran和ifort. 另外,查看编译器的bash命令是:gfortran -v. 编程算法思想与C ...

  4. Visual Studio技巧之打造拥有自己标识的代码模板

    可能经过很多博客的介绍,大家都知道代码段的使用,使用代码段可以很方便地生成一些常用的代码格式,确实对我们开发很方便.在团队开发中或者在某些情况下我们经常可能还会希望使用Visual Studio生成的 ...

  5. node版本管理器nvm(服务器项目相关)

    git项目 https://github.com/creationix/nvm 1.下载并安装NVM脚本 curl https://raw.githubusercontent.com/creation ...

  6. linux keepalived+LVS 实现mysql 从库负载均衡

    前情提要: 参考链接: http://www.osyunwei.com/archives/7464.html ps:以上为本次操作的主要参考资料,非常感谢此文作者的贡献,我的随笔的主要目的是 说明在使 ...

  7. c语言字符串操作大全

     C语言字符串操作函数 函数名: strcpy 功  能: 拷贝一个字符串到另一个 用  法: char *stpcpy(char *destin, char *source); 程序例: #incl ...

  8. VS2013添加解决方案内项目的引用,编译时提示找不到文件

    1.添加解决方案内项目引用 2.编译时报错 原因: 要引用的程序集的Framework版本与当前项目的版本不一致. 解决: 统一引用与被引用程序集的版本.

  9. php_sapi_name详解

    php_sapi_name : — 返回 web 服务器和 PHP 之间的接口类型. 返回描述 PHP 所使用的接口类型(the Server API, SAPI)的小写字符串. 例如,CLI 的 P ...

  10. Spring AOP 完成日志记录

    Spring AOP 完成日志记录 http://hotstrong.iteye.com/blog/1330046