需求描述：審批表單頁面由我的待辦工作中打開，辦理完畢后希望關閉該頁面并且實現我待辦表格的實時刷新;同時該需求也同樣適用于從某些工作流管理模塊中需要發起審批的情況，比如招聘需求模塊中發起錄用流程;我的績效管理中審批績效等。

我們先來看看之前的實現，該邏輯實現的功能是，從我待辦列表中發起審批，審批結束后直接在當前頁面，也就是審批頁面跳轉至一個新的oa主頁面，并且打開我的工作-我待辦的頁簽，實現方法如下：

$("#but_back").bind("click", function() { 
        window.top.opener=null; 
        var url = window.location.href; 
        var isoa=url.indexOf('phicomm.com'); 
        //var isoatest=url.indexOf('oatest.phicomm.com'); 
        var curWwwPath=window.document.location.href;  
        var pathName=window.document.location.pathname;  
        var pos=curWwwPath.indexOf(pathName);  
        var localhostPaht=curWwwPath.substring(0,pos);  
        var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1); 
        if(isoa>0){ 
            window.top.open(localhostPaht+'/main/index.action?tableName=mywork','_self'); 
        }else{ 
            window.top.open(localhostPaht+projectName+'/main/index.action?tableName=mywork','_self'); 
        } 
    }); 

桌面js的處理邏輯：

$(document).ready(function($){ 
    // 初始化圖標 
    initModules(initMenus()); 
      
    refixAppPos(); 
    // 注冊事件 
    regClick(); 
      
    sortable(); 
   initIcoRemove(); 
      
    initAppManager(); 
    //解析當前URL判斷是否需要跳轉制定Table 
    gotoTable(); 
}); 
  
//跳轉制定Table 
function gotoTable(){ 
    var tableName = request("tableName"); 
    if(""!=tableName&&null!=tableName&&'undefined'!=tableName){ 
        openUrl($("#desktop_content_icon_"+tableName)); 
    } 
} 

 以上方法雖然實現了辦理結束后跳至我的待辦的功能，但有以下缺陷：

跳轉是在新頁面中，并非在調用頁面，這樣就形成了調用和跳轉頁面兩個相同的桌面;

新的頁面并非與原調用頁面完全一致，調用頁面如打開多個頁簽，新打開的頁面相當于將除我的待辦外的其他頁簽關閉，并不符合用戶的需求;

用戶體驗不友好

我們使用js callback的實現如下，當前頁面的調用頁面非空且未關閉時，我們就直接調用頁面中的js方法實現其局部的刷新。

/** 刷新父窗口關閉彈出窗口 */ 
    function refreshAndClose(){ 
        var jscallback = $.trim($("#jscallback").val()); 
        var type = $.trim($("#type").val()); 
        if (window.opener  && !window.opener.closed && jscallback!=null && jscallback!="") { 
            if(!type){ 
                //本頁面的調用頁面執行其嵌入或調用的js方法 
                eval("window.opener."+jscallback+"();"); 
            } 
            window.close();//當前頁面關閉 
        } else { 
            window.top.opener=null; 
            var url = window.location.href; 
            var isoa=url.indexOf('phicomm.com'); 
              
            var curWwwPath=window.document.location.href;  
            var pathName=window.document.location.pathname;  
            var pos=curWwwPath.indexOf(pathName);  
            var localhostPaht=curWwwPath.substring(0,pos);  
            var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1); 
            if(isoa>0){ 
                  
                window.top.open(localhostPaht+'/main/index.action?tableName=mywork','_self'); 
            }else{ 
                window.top.open(localhostPaht+projectName+'/main/index.action?tableName=mywork','_self'); 
            } 
        } 
    } 

調用頁面js：grid即為需要局部刷新的表格。 

function openUrl(url){ 
    url=url+"&jscallback=callsus" 
         window.open(url,'_blank');    
} 
function callsus(){ 
    $('#performanceDataGrid').reload(); 
} 

通過js callback實現了調用頁面的局部刷新，并對其他應用的類似功能具有一定的指導和參考意義。

本文出自 “南湖礦工技術空間” 博客，請務必保留此出處http://jncumter.blog.51cto.com/812546/1623739