destroy重新打开 eayui_EasyUI相关知识点整理

EasyUI相关知识整理

EasyUI是一种基于jQuery、Angular.、Vue和React的用户界面插件集合。easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。也就是说EasyUI只负责提供界面插件，其内部的实现可以基于三大前端框架或者jQuery。

jQuery is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, and Ajax.It is free, open-source software using the permissive MIT LicenseWeb analysis indicates that it is the most widely deployed JavaScript library by a large margin. ——维基百科

在当前的项目中，主要是基于jQuery库的使用经验，总结起来有以下几个方面需要整理：

界面浮框：包括window、dialog等浮动窗口，这些窗口的创建以及销毁。

下拉框：包括下拉框的赋值、初始化、属性设置、联动等常见操作。

表格：DataGrid控件每一行内容的按钮添加，数据加载，行删除等常见操作。

表单：表单的提交操作，以及附件的提交操作。

树型结构：包括置空、设置图标、设置双击单击事件。

界面浮框

基本属性

data-option="modal:true,shadow:false,closed:true, iconCls:'icon-save',minimizable:false,maximizable:false,onClose:function(){clearBugWindow()}" style="width:900px;max-height: 750px;padding: 10px">

具体的属性可以结合JqueryEasyUI API文档去查询，但是在实际的项目中就是如上面那样使用。

shadow属性：该属性如果设置为true将导致window内部的内容如果折叠，会导致出现莫名其妙的阴影。

modal属性：该属性设置为true表示为模式化窗口——除非关闭该窗口，否则无法操作其他窗口。

resize方法：该方法一般用于调整窗口的初始化位置，一般使用如下方式进行操作：

$('#id').window('resize',{top: ($(window).height() - 750) * 0.5});

与dialog的混淆

在实际开发中，可能定义一个控件为easyui-window，但是在调用方法的过程中，使用$("#id").dialog('functionName')。这种情况是不规范的，但是也可以生效，因为dialog是对window的扩展，所以可以认为window可以使用的方法，dialog都可以实现。

dialog可以看作是特殊的window，它具有window所不具有的属性。比如toolbar，buttons，用于定义上方的工具栏和下方的按钮。

Destroy销毁和Close关闭

close只是将窗体隐藏起来，而destroy意味着将内容销毁。在实际的使用过程中，如果dialog或者window是显示定义在html元素中，close后可以调用open再打开，但是destroy后就无法再使用窗体，除非刷新页面重新初始化元素。

场景描述

网站的首页有一个主框，所有的子功能模块都是以tab页面的形式呈现，每当选项卡发生改变时，都会刷新页面，这样也就导致用户在两个已经打开的选项卡之间交替作业十分不方便。于是修改逻辑，只当用户点击左侧导航栏时，刷新选项卡；当用户点击已经存在的选项卡时，不刷新选项卡。

问题在于如果对dialog执行destroy后，必须刷新tab来重新创建dialog，需要使用tabs的update方法&#x