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

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

创新互联建站专注于企业成都营销网站建设、网站重做改版、洛隆网站定制设计、自适应品牌网站建设、成都h5网站建设、成都商城网站开发、集团公司官网建设、成都外贸网站制作、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为洛隆等各大城市提供网站开发制作服务。

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

分享标题：使用js callback机制实现调用页面局部刷新
转载源于：http://www.36103.cn/qtweb/news33/8133.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容