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

需求描述：审批表单页面由我的待办工作中打开，办理完毕后希望关闭该页面并且实现我待办表格的实时刷新;同时该需求也同样适用于从某些工作流管理模块中需要发起审批的情况，比如招聘需求模块中发起录用流程;我的绩效管理中审批绩效等。

我们先来看看之前的实现，该逻辑实现的功能是，从我待办列表中发起审批，审批结束后直接在当前页面，也就是审批页面跳转至一个新的oa主页面，并且打开我的工作-我待办的页签，实现方法如下：

1. $("#but_back").bind("click", function() { 
2.         window.top.opener=null; 
3.         var url = window.location.href; 
4.         var isoa=url.indexOf('phicomm.com'); 
5.         //var isoatest=url.indexOf('oatest.phicomm.com'); 
6.         var curWwwPath=window.document.location.href;  
7.         var pathName=window.document.location.pathname;  
8.         var pos=curWwwPath.indexOf(pathName);  
9.         var localhostPaht=curWwwPath.substring(0,pos);  
10.         var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1); 
11.         if(isoa>0){ 
12.             window.top.open(localhostPaht+'/main/index.action?tableName=mywork','_self'); 
13.         }else{ 
14.             window.top.open(localhostPaht+projectName+'/main/index.action?tableName=mywork','_self'); 
15.         } 
16.     }); 

桌面js的处理逻辑：

1. $(document).ready(function($){ 
2.     // 初始化图标 
3.     initModules(initMenus()); 
4.       
5.     refixAppPos(); 
6.     // 注册事件 
7.     regClick(); 
8.       
9.     sortable(); 
10.    initIcoRemove(); 
11.       
12.     initAppManager(); 
13.     //解析当前URL判断是否需要跳转制定Table 
14.     gotoTable(); 
15. }); 
16.   
17. //跳转制定Table 
18. function gotoTable(){ 
19.     var tableName = request("tableName"); 
20.     if(""!=tableName&&null!=tableName&&'undefined'!=tableName){ 
21.         openUrl($("#desktop_content_icon_"+tableName)); 
22.     } 
23. } 

以上方法虽然实现了办理结束后跳至我的待办的功能，但有以下缺陷：

跳转是在新页面中，并非在调用页面，这样就形成了调用和跳转页面两个相同的桌面;

新的页面并非与原调用页面完全一致，调用页面如打开多个页签，新打开的页面相当于将除我的待办外的其他页签关闭，并不符合用户的需求;

用户体验不友好

我们使用js callback的实现如下，当前页面的调用页面非空且未关闭时，我们就直接调用页面中的js方法实现其局部的刷新。

1. /** 刷新父窗口关闭弹出窗口 */ 
2.     function refreshAndClose(){ 
3.         var jscallback = $.trim($("#jscallback").val()); 
4.         var type = $.trim($("#type").val()); 
5.         if (window.opener  && !window.opener.closed && jscallback!=null && jscallback!="") { 
6.             if(!type){ 
7.                 //本页面的调用页面执行其嵌入或调用的js方法 
8.                 eval("window.opener."+jscallback+"();"); 
9.             } 
10.             window.close();//当前页面关闭 
11.         } else { 
12.             window.top.opener=null; 
13.             var url = window.location.href; 
14.             var isoa=url.indexOf('phicomm.com'); 
15.               
16.             var curWwwPath=window.document.location.href;  
17.             var pathName=window.document.location.pathname;  
18.             var pos=curWwwPath.indexOf(pathName);  
19.             var localhostPaht=curWwwPath.substring(0,pos);  
20.             var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1); 
21.             if(isoa>0){ 
22.                   
23.                 window.top.open(localhostPaht+'/main/index.action?tableName=mywork','_self'); 
24.             }else{ 
25.                 window.top.open(localhostPaht+projectName+'/main/index.action?tableName=mywork','_self'); 
26.             } 
27.         } 
28.     }

调用页面js：grid即为需要局部刷新的表格。

1. function openUrl(url){ 
2.     url=url+"&jscallback=callsus" 
3.          window.open(url,'_blank');    
4. } 
5. function callsus(){ 
6.     $('#performanceDataGrid').reload(); 
7. }

通过js callback实现了调用页面的局部刷新，并对其他应用的类似功能具有一定的指导和参考意义。

作者：佚名

来源：51CTO