easyui之dialog destroy 和close_综合

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的设计，采用不同的方式即可。