網站前端_jQuery-基礎入門

20170405發表於2020-08-06

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

  我們先來看看之前的實現,該邏輯實現的功能是,從我待辦列表中發起審批,審批結束後直接在當前頁面,也就是審批頁面跳轉至一個新的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{   com/ 

  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實現了呼叫頁面的區域性重新整理,並對其他應用的類似功能具有一定的指導和參考意義。


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69979119/viewspace-2709663/,如需轉載,請註明出處,否則將追究法律責任。

相關文章