封装的EasyUI Dialog插件

关注

原创最新推荐文章于 2026-09-27 10:37:14 发布 2.5k 阅读 AI 写同款· GEO 优化 ›

轻松掌握easyUI：从零开始构建企业级前端界面本文是easyUI的快速入门指南，旨在帮助开发者从零开始构建企业级前端界面。文章详细介绍了easyUI作为基于jQuery的前端框架，如何通过声明式与编程式两种方式快速搭建包含布局、导航、数据表格和表单的管理后台。内容涵盖环境配置、核心组件实战及性能优化技巧，特别适合需要高效开发内部系统的团队。阅读详情

封装思路：
弹出：在调用时向系统主界面或父窗口页面插入一个嵌了iframe的div，然后动态渲染生成EasyUI的Dialog窗口（iframe用于url加载页面）。
关闭：获取父窗口对象，然后使用EasuUI Dialog的close方法。
返回值：通过向系统主界面或父窗口插入隐藏域hidden来存储窗口返回值，获取返回值时直接使用系统主界面或父窗口对象加上ID得到隐藏域存储的值。
具体代码见CommonMethod.js文件。
使用方式：
1、界面引用/cmb_adtmgr/common/CommonMethod.js
2、弹出窗口方法：
function openEditWindow(title, url, width, height, callBackFun){
CommonMethod.showDialog(windowId, title, url, width, height, {
showMainPage: true, //是否在系统主界面显示
draggable:false, //拖动
resizable:false, //改变大小
modal: true, //后台页面可编辑
closed: false, //是否关闭？
minimizable: false,//最小化按钮
maximizable: false,//最大化按钮
closable: true, //关闭按钮
collapsible: false //收缩按钮
}, callBackFun);
}
3、弹出窗口调用：
var url = basePath + "/lossPropertyMatterAction.do?ExeMethod=loadIndexPage&billId="+ billId +"&actCode="+ actCode +"&actInstId="+ actInstId
+"&sxlb="+ sxlb +"&wflx="+ wflx +"&childWfCode="+ childWfCode +"&qyname="+ deptName +"&isHistory=N&exeFlag="+ exeFlag;
openEditWindow("呆账核销备案", url, 1024, 700, function(){
//获取返回值
if(CommonMethod.getDialogReturnValue(windowId) == "SUSSESS"){
shExecInfoList(); //加载代办事项列表
shControlInfoList(); //加载监控事项列表
}
});
//设置Dialog对话框的返回值
CommonMethod.setDialogReturnValue(windowId, "SUSSESS"); //注意：windowId要和调用弹出窗口时的一致
//关闭Dialog对话框
CommonMethod.closeDialog(windowId);
//Dialgg对话框关闭事件绑定
CommonMethod.addCloseDialogEvent(windowId, function); //function：方法名
4、效果图：

5、插件源码：
CommonMethod = {
/**
* 弹出对话框
* @param {Object} dialogId:对话框ID
* @param {Object} title:标题
* @param {Object} width:宽度
* @param {Object} height：高度
* @param {Object} options: {
* modal:是否模式窗口,
* draggable:是否可拖动,
* resizable:是否可改变大小,
* minimizable:是否显示最小化按钮,
* maximizable:是否显示最大化按钮,
* closable:是否显示关闭按钮,
* inline:是否内部窗口,
* toolbar:工具条对象,
* buttons:按钮对象,
* showMainPage:是否在系统主界面显示
* }
* @param {Object} callBackFun:关闭后回调方法
*/
showDialog: function(dialogId, title, url, width, height, options, callBackFun){
var opts = {
id: dialogId,
title: title,
url: url,
width: width,
height: height,
inline: true,
onClose: function(){
opts.baseWin.$("#" + opts.id).dialog("destroy");
if(callBackFun && callBackFun != null && typeof(callBackFun) != "undefined"){
callBackFun.call(this);
}
}
};
if(options){
for(var key in options){
opts[key] = options[key];
}
}
if(opts.showMainPage && $.trim(opts.showMainPage) == "true"){
opts.baseWin = window.top; //系统主窗口界面
}else{
opts.baseWin = window;
}
var div = opts.baseWin.document.createElement("div");
div.id = opts.id;
if(opts.url){
div.innerHTML = '<iframe scrolling="no" frameborder="0" src="'+ opts.url
+'" style="width:100%;height:100%;overflow:hidden;border:0px;"></iframe>';
}
opts.baseWin.document.body.appendChild(div);
var baseWinHeight = $(opts.baseWin).height();
var baseWinWidth = $(opts.baseWin).width();
if(opts.height >= baseWinHeight){
opts.height = baseWinHeight - 2;
}
if(opts.width >= baseWinWidth){
opts.width = baseWinWidth - 2;
}
opts.top = ($(opts.baseWin).height() - opts.height) / 2;
opts.left = ($(opts.baseWin).width() - opts.width) / 2;
opts.baseWin.$(div).dialog(opts);

//删除以前的返回值
$(window.top.document.body, window.top.document).find("#returnValue_" + opts.id).remove();
},
/**
* 关闭对话框
* @param {Object} dialogId
*/
closeDialog: function(dialogId){
if(window.frameElement){ //当前窗体所在的iframe
if(window.parent.$("#" + dialogId).parent().hasClass("panel")){ //EasyUI 弹出框
window.parent.$("#" + dialogId).dialog("close");
}else{
if(!window.top.closed){
window.opener.top.opener = null;
window.top.open("", "_self");
window.top.close();
}
}
}else{ //IE 弹出框
if(!window.closed){
window.opener = null;
window.open("", "_self");
window.close();
}
}
},
/**
* 关闭对话框事件处理
* @param dialogId
* @param callBackFun
*/
addCloseDialogEvent: function(dialogId, callBackFun){
if(window.frameElement){ //当前窗体所在的iframe
if(window.parent.$("#" + dialogId).parent().hasClass("panel")){ //EasyUI 弹出框
var closeObj = window.parent.$("#" + dialogId).parent().find("div.panel-tool-close");
closeObj.unbind("click").bind("click", function(){
if(callBackFun && callBackFun != null && typeof(callBackFun) != "undefined"){
callBackFun.call(this);
}
});
}
}
},
/**
* 设置对话框的返回值
* @param {Object} dialogId
* @param {Object} returnValue
*/
setDialogReturnValue: function(dialogId, returnValue){
if(window.frameElement){ //当前窗体所在的iframe
if(window.parent.$("#" + dialogId).parent().hasClass("panel")){ //EasyUI 弹出框
$(window.top.document.body, window.top.document)
.prepend('<input type="hidden" id="returnValue_' + dialogId + '" value=""/>');
$(window.top.document.body, window.top.document).find("#returnValue_" + dialogId).val(returnValue);
}
}else{ //IE 弹出框
window.returnValue = returnValue;
}
},
/**
* 获取对话框的返回值
* @param {Object} dialogId
* @return {TypeName}
*/
getDialogReturnValue: function(dialogId){
var returnValue = $.trim($(window.top.document.body, window.top.document).find("#returnValue_" + dialogId).val());
return returnValue;
}
}

收录于