>  기사  >  웹 프론트엔드  >  js 콜백 메커니즘을 사용하여 호출 페이지의 부분 새로 고침 구현

js 콜백 메커니즘을 사용하여 호출 페이지의 부분 새로 고침 구현

高洛峰
高洛峰원래의
2016-12-17 15:51:311894검색

요구 사항 설명: 처리가 완료된 후 페이지를 닫고 동시에 할 일 양식을 실시간으로 새로 고칠 수 있기를 바랍니다. 요구사항은 채용 요구사항 모듈에서 채용 프로세스를 시작하는 등 승인이 시작되어야 하는 특정 워크플로우 관리 모듈에도 적용됩니다.

js 콜백 메커니즘을 사용하여 호출 페이지의 부분 새로 고침 구현

먼저 이전 구현을 살펴보겠습니다. 이 논리 구현의 기능은 승인이 완료된 후 승인을 시작하는 것입니다. 즉, 승인 페이지가 새로운 oa 메인 페이지로 이동하고 My Work-My To-Do 탭이 열립니다. 구현 방법은 다음과 같습니다.

$("#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'); 
        } 
    });

Desktop 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)); 
    } 
}

위 메소드는 처리가 완료된 후 내 할일로 점프하는 기능을 구현하지만 다음과 같은 결함이 있습니다.

점프가 새 작업에 있습니다. 호출 페이지가 아니라 호출을 형성하고 두 개의 동일한 데스크톱으로 페이지를 이동합니다.

새 페이지는 원래 호출 페이지와 정확히 동일하지 않습니다. 열린 페이지는 My To-Do를 제외한 다른 페이지를 추가하는 것과 같습니다. 탭을 닫는 것이 사용자의 요구 사항을 충족하지 않습니다.

사용자 경험이 친숙하지 않습니다

js 콜백을 사용하여 다음과 같이 구현합니다. . 현재 페이지의 호출 페이지가 비어 있지 않고 닫히지 않은 경우 페이지에서 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 페이지를 호출합니다. 그리드는 부분적으로 새로 고쳐야 하는 테이블입니다.

function openUrl(url){ 
    url=url+"&jscallback=callsus" 
         window.open(url,'_blank');    
} 
function callsus(){ 
    $('#performanceDataGrid').reload(); 
}

js 콜백을 통해 호출 페이지의 부분 새로 고침을 구현하며 다른 애플리케이션의 유사한 기능에 대한 특정 지침 및 참조 의미가 있습니다.



호출 페이지를 부분적으로 새로 고치기 위해 js 콜백 메커니즘을 사용하는 관련 기사를 더 보려면 PHP 중국어 웹사이트를 참고하세요. !

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.