首页 > 代码库 > easyui里弹窗的两种表现形式

easyui里弹窗的两种表现形式

2024-08-12 09:32:03   220人阅读

easyui里弹窗的两种表现形式

博客分类：
     
  • jQueryEasyUi
 

1、主JSP页面中描绘弹窗


技术分享
 

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

 

JS:

 

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

 

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


技术分享
 

Toobar可放置到主JSP页面：

Html代码  技术分享
  1. <div id="toolbar" style="text-align:right;">                    
  2.     <a href=http://www.mamicode.com/"#" class="easyui-linkbutton" data-options="iconCls:‘ope-finish‘" onclick="associateIP()">获取新IP</a>  
  3. </div>      

 JS:

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

 

Controller:

Java代码  技术分享
  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.           
  9.         try {  
  10.             Set<PublicIPAddress> ips = virtualMachineService.listPublicIpAddresses(networkId,zoneId);  
  11.             model.addObject("ips", ips);  
  12.         } catch(BusinessException e) {  
  13.             throw new ControllerException(HttpStatus.OK, e.getCode(), e.getMessage());  
  14.         } catch(Exception e) {  
  15.             final String msg = messageSource.getMessage(TipsConstants.QUERY_FAILURE);  
  16.             throw throwControllerException(LOGGER, HttpStatus.OK, null, msg, msg, e);  
  17.         }  
  18.           
  19.         return model;  
  20.     }  

 

allocateIP.jsp:

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

 

easyui里弹窗的两种表现形式


联系
我们