EasyUI动态创建、删除模态Dialog

1、前言

---

一般EasyUI都是在一个界面实现模块的增删改查，对于部分业务场景需要考虑分开展现模块的增删改查界面，单一界面实现的优缺点如下：
优点：开发简单、开发速度快；
缺点：添加、修改等界面无法复用；界面耦合度高；

2、需求

菜单模块存在多个操作界面，比如：添加（修改）菜单、添加（修改）权限，关联角色，如果模块的所有功能在一个界面实现，界面的代码量非常大，可维护性差。针对该类情况，需要将模块的功能界面分开处理，采用弹出窗口实现。对于每次操作都需要动态改变窗口内容（比如：修改、详细界面）的需求，本文将讨论这类需求的实现方案

3、实现方式

以“修改列表”的数据为例，阐述代码的具体实现。
对列表行记录进行编辑时，需根据当前行的主键动态获取数据，在修改界面弹出窗口展现内容，由于功能界面和列表界面分开处理，每次都需创建新的Dialog，为了避免创建多个Dilaog div，在点击“编辑”时，需判断当前是否存在该功能类型ID的DIV（editform），先删除存在的(editform)Div Dialog元素，再根据Url重新创建Dialog。考虑模块的功能界面比较多，提取公共创建Dialog方法，在界面业务方法中显示窗口，具体代码如下：

这里写代码片
//移除存在的Dialog
$("#editform").remove();或 $("body").remove("#editform");
**先根据div的id删除，但界面元素还是会存在dialog div，还需执行dialog的销毁操作**
$("#editform").dialog('destroy');
//创建窗口
createModalDialog("editform","/user/modify","测试界面", 400, 300);
$("#editform).dialog('open');

4、实现代码

/**
 * 创建一个模态 Dialog
 * 
 * @param id divId
 * @param _url Div链接
 * @param _title 标题
 * @param _width 宽度
 * @param _height 高度
 * @param _icon ICON图标
 */
function createModalDialog(id, _url, _title, _width, _height, _icon){
    $("body").append("<div id='"+id+"' class='easyui-window'></div>");
    if (_width == null)
        _width = 800;
    if (_height == null)
        _height = 500;

    $("#"+id).dialog({
        title: _title,
        width: _width,
        height: _height,
        cache: false,
        iconCls: _icon,
        href: _url,
        collapsible: false,
        minimizable:false,
        maximizable: true,
        resizable: false,
        modal: true,
        closed: true
    });
}