EASY UI封装：创建对话框和窗口(dialog,window)

题记：最近，项目中使用了EASY UI的对话框和窗口,但在使用传统方法（定义div->再实时调用easyui生成dialog或window）存在许多莫名其妙的问题，当refresh新链接时时常出错（要么是新返回的html内的js不执行，要么是console报datagrid错误，但页面正常加载了），经调试发现是旧content未完全释放导致的，曾经尝试监听onClose事件destroy对应dialog或window，仍未解决问题。于是发挥我的聪明才智，自己封装了EASY UI的创建对话框和窗口方法。

代码如下：

/**
Copyright iamkarl@163.com

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

/**
 * 获取顶层窗口对象
 * @author : iamkarl@163.com
 * Date: 2013-05-20
 */
function getTopWindow(){
	var topWin = window;
	while(topWin.parent && topWin.parent!==topWin.self){
		topWin = topWin.parent;
	}
	return topWin;
}

/**
 * 获取一个客户端全局唯一自增长序数
 * @returns sn
 * @author : iamkarl@163.com
 * Date: 2017-11-17
 */
function getGlobalSeqNumber() {
    var topWin = getTopWindow();
    if (!topWin.globalSeqNumber || topWin.globalSeqNumber < 1) {
        topWin.globalSeqNumber = 1;
    }
    return ++topWin.globalSeqNumber;
}

/**
 * 动态创建easyui对话框
 * @author iamkarl@163.com 2018-08-31
 * @param {type} options
 * @returns Dialog
 */
function openDialogWithEasyui(options){
    var domId = "dialog_" + getGlobalSeqNumber();
    
    $("body").append('<div id="'+domId+'"/>');
    var onCloseBak = options.onClose||function(){};
    var onLoadBak = options.onLoad||function(){};
    $.extend(options,{
        onClose:function(){
            onCloseBak.apply(this, arguments);
            $('#' + domId).dialog("destroy");
        },
        onLoad:function(){
            onLoadBak.apply(this, arguments);
            //转换数据字典值为对应文本
            $(".dynamic-dictionary").each(function () {
                var eq = $(this);
                var dt = eq.data("dictType");
                var val = eq.data("value");
                if (dt) {//此处调用字典key-value转换逻辑，应替换为自己框架的
                    //eq.html(convertDictKey2Text(dt, val));
                }
            });
        }
    });
    return $('#' + domId).dialog(options);
}

/**
 * 简化版动态创建easyui对话框
 * @author iamiamkarl@163.com@163.com 2018-08-31 
 * @param {type} title
 * @param {type} url
 * @param {type} callback
 * @param {type} width
 * @param {type} height
 * @returns dialog
 */
function openDialogSimple(title, url, callback,width, height) {
    var options = {
        title: title,
        closed: false,
        cache: false,
        href: url,
        collapsible: false,
        draggable: true,
        resizable: true,
        minimizable: false,
        maximizable: false,
        modal: true
    };
    if(callback){
        options.onClose = callback;
    }
    if(!width && !height){
        options.fit = true;//最大化
    }else{
        options.width = width;
        options.height = height;
    }
    return openDialogWithEasyui(options);
}

/**
 * 动态创建easyui窗口
 * @author iamkarl@163.com 2018-08-31
 * @param {type} options
 * @returns Window
 */
function openWindowWithEasyui(options){
    var domId = "window_" + getGlobalSeqNumber();
    
    $("body").append('<div id="'+domId+'"/>');
    var onCloseBak = options.onClose||function(){};
    var onLoadBak = options.onLoad||function(){};
    $.extend(options,{
        onClose:function(){
            onCloseBak.call(this);
            $('#' + domId).dialog("destroy");
        },
        onLoad:function(){
            onLoadBak.call(this);
            //转换数据字典值为对应文本
            $(".dynamic-dictionary").each(function () {
                var eq = $(this);
                var dt = eq.data("dictType");
                var val = eq.data("value");
                if (dt) {//此处调用字典key-value转换逻辑，应替换为自己框架的
                    //eq.html(convertDictKey2Text(dt, val));
                }
            });
        }
    });
    return $('#' + domId).window(options);
}

/**
 * 简化版动态创建easyui窗口
 * @author iamiamkarl@163.com@163.com 2018-08-31 
 * @param {type} title
 * @param {type} url
 * @param {type} callback
 * @param {type} width
 * @param {type} height
 * @returns window
 */
function openWindowSimple(title, url, callback,width, height) {
    var options = {
        title: title,
        closed: false,
        cache: false,
        href: url,
        collapsible: false,
        draggable: true,
        resizable: true,
        minimizable: false,
        maximizable: false,
        modal: true
    };
    if(callback){
        options.onClose = callback;
    }
    if(!width && !height){
        options.fit = true;//最大化
    }else{
        options.width = width;
        options.height = height;
    }
    return openWindowWithEasyui(options);
}

 

使用示例：

                        openDialogWithEasyui({
                                title: '选择专家参加会议-${meetingName}',
                                //width: 800,//自定义宽度
                                //height: 600,//自定义高度
                                closed: false,
                                cache: false,
                                href: 'list_select.jsp?meetingId=${meetingId}&t='+new Date().getTime(),
                                collapsible:false,
                                draggable: true,
                                resizable: true,
                                minimizable: false,
                                maximizable: false,
                                fit: true,//效果是最大化
                                modal: true,
                                onClose:function(){
                                    datagridItems_inline.datagrid('load');
                                }
                            });




//简单模式
openDialogSinple( '选择专家参加会议-${meetingName}'， 'list_select.jsp?meetingId=${meetingId}&t='+new Date().getTime(),function(){
                                    datagridItems_inline.datagrid('load');
                                });

以下补充数据字典key-value转换逻辑样本代码，仅供参考：

/**
 *从全局缓存转换字典key为text
 *@param dictType :类型key
 *@param key :字典key
 *@author : iamkarl@163.com
 * Date: 2013-05-20
 */
function convertDictKey2Text(dictType, key) {
    var dictCache = getDictCacheAsync();
    var dict = dictCache[dictType];
    if (!dict)
        return key;
    if (!dict.kvMap) {
        dict.kvMap = {};
        for (var i = 0; i < dict.length; i++) {
            var item = dict[i];
            dict.kvMap[item.code] = item.text;
        }
    }
    if (dict.kvMap[key]) {
        return dict.kvMap[key];
    } else
        return key;
}

/**
 * 清除字典缓存
 * @author : iamkarl@163.com
 * Date: 2013-05-20
 */
function cleanDictCacheAsync() {
    var topWin = getTopWindow();
    topWin.static_dict_cache_data = null;
}

window.dictionaryMapDataGetUrl = webRoot+"/view/system/dictType/getDictMap.do";

/**
 *同步请求得到数据字典缓存
 * @author : iamkarl@163.com
 * Date: 2013-05-20
 */
function getDictCacheAsync() {
    var topWin = getTopWindow();
    var dictCache = topWin.static_dict_cache_data;
//    if (!dictCache) {//如果是静态数据字典
//         dictCache = topWin.static_dict_cache_data = {
//             
//         };
//    }
    if (!dictCache) {
        $.ajax({
            url: dictionaryMapDataGetUrl,
            async: false, //同步请求
            dataType: 'json',
            success: function (data) {
                dictCache = topWin.static_dict_cache_data = data;
            }
        });
    }
    return dictCache;
}

/**
 * 清除对应url缓存
 * @author : iamkarl@163.com
 * Date: 2013-05-20
 * @param {type} url
 */
function cleanDataCacheAsync(url) {
    var topWin = getTopWindow();
    var dataCache = topWin.static_cache_data;
    if (!dataCache) {
         dataCache = topWin.static_cache_data = {};
    }
   dataCache[url] = null;
}
/**
 *同步请求得到自定义combobox缓存
 * @param url 远程数据url
 * @author : iamkarl@163.com
 * Date: 2013-05-20
 */
function getDataCacheAsync(url) {
    var topWin = getTopWindow();
    var dataCache = topWin.static_cache_data;
    if (!dataCache) {
         dataCache = topWin.static_cache_data = {};
    }
    if (!dataCache[url]) {
        $.ajax({
            url: url,
            async: false, //同步请求
            dataType: 'json',
            success: function (data) {
                dataCache[url] = data;
            }
        });
    }
    return dataCache[url];
}

/**
 *从全局缓存转换字典key为text
 *@param dictType :类型key
 *@param key :字典key
 *@author : iamiamkarl@163.com@163.com
 * Date: 2013-05-20
 */
function convertDictKey2Text(dictType, key) {
    var dictCache = getDictCacheAsync();
    var dict = dictCache[dictType];
    if (!dict)
        return key;
    if (!dict.kvMap) {
        dict.kvMap = {};
        for (var i = 0; i < dict.length; i++) {
            var item = dict[i];
            dict.kvMap[item.code] = item.text;
        }
    }
    if (dict.kvMap[key]) {
        return dict.kvMap[key];
    } else
        return key;
}