您的位置:首页 > 产品设计 > UI/UE

封装的EasyUI Dialog插件

2017-02-07 14:12 246 查看
封装思路:

弹出:  在调用时向系统主界面或父窗口页面插入一个嵌了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.le
4000
ft = ($(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;
}

}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  easyui 插件 js