easyui里弹窗的两种表现形式

Posted 2020-08-07

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="#" class="easyui-linkbutton" data-options="iconCls:‘ope-finish‘" onclick="restartNetwork()">确定</a>  
26.                 <a href="#" 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="#" 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="${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>