使用jscallback机制实现调用页面局部刷新

我们先来看看之前的实现，该逻辑实现的功能是，从我待办列表中发起审批，审批结束后直接在当前页面，也就是审批页面跳转至一个新的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中文网！