easyui里弹窗的两种表现形式

easyui里弹窗的两种表现形式

博客分类：

• jQueryEasyUi

 

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>