使用js callback機制實作呼叫頁面局部刷新

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

我們先來看看之前的實現，該邏輯實現的功能是，從我待辦列表中發起審批，審批結束後直接在當前頁面，也就是審批頁面跳轉至一個新的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實現了呼叫頁面的局部刷新，並對其他應用程式的類似功能具有一定的指導和參考意義。

更多使用js callback機制實現調用頁面局部刷新相關文章請關注PHP中文網！