easyui之dialog destroy 和close

最新推荐文章于 2023-09-13 14:19:52 发布

转载最新推荐文章于 2023-09-13 14:19:52 发布 · 925 阅读

26 篇文章

订阅专栏

easyui dialog生成有两种方式(以我现在的认知水平)，一种是在页面上固定一个dialog;一种是生成"临时"的dialog，对窗口的隐藏操作有两种方式：close\destroy,这两种方式的初始化和关闭是不完全一样的，且看我分开描述，再总结一下。

1、固定位置：

（1）初始化代码：

1
<div
 id="dialog_todo_maintain" class="easyui-dialog" title="保养信息操作"

2
  data-options="modal:true,closed:true,href:'maintain/detail.jsp'"

3
        style="width:
 620px; height: 460px; overflow: hidden">

4
  </div>

（2）窗口的组件及操作（省略具体操作）

1
$('#'+dialog_name).dialog({

2
     onLoad:function(){

3
      
4
        },

5
    buttons:[]

6
     
7
}];

8
 
9
$('#'+dialog_name).dialog('open');//显示窗口

（3）关闭窗口

1
这里只能这样：$('#'+dialog_name).dialog('close');//隐藏窗口

2
而不能这样：$('#'+dialog_name).dialog('destroy');//销毁窗口，如果这样操作，那么这个窗口就再也显示不了了

2、'临时'窗口

（1）初始化代码：

1
不需要先给定一个组件

（2）窗口的生成、增加组件及操作（省略具体操作）

01
$('<div/>').dialog({

02
      
  href
 : 'admin/cusInfo.jsp',

03
      
  width
 : 620,

04
      
  height
 : 480,

05
      
  modal
 : true,

06
      
  title
 : 'title',

07
      
  onClose
 : function()
 {

08
      
      $(this).dialog('destroy');

09
      
  },

10
      
  buttons:[]

11
    });

12
}

（3）关闭窗口

1
这里最好这样：$('#'+dialog_name).dialog('destroy');//如果不销毁则会对原先已有的dom结构造成影响

总结：这个区别其实很好理解，本质的区别就是destroy是将窗口组件销毁，不留痕迹；而close是将窗口隐藏起来。所以对应DOM的设计，采用不同的方式即可。