1. 程式人生 > >封裝的EasyUI Dialog外掛

封裝的EasyUI Dialog外掛

封裝思路:
彈出:  在呼叫時向系統主介面或父視窗頁面插入一個嵌了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;
}
}