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

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

高洛峰
풀어 주다: 2016-12-17 15:51:31
원래의
1966명이 탐색했습니다.

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

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

$("#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 처리 로직:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

$(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 메소드를 직접 호출하여 부분 새로 고침을 수행합니다.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

/** 刷新父窗口关闭弹出窗口 */

    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 페이지를 호출합니다. 그리드는 부분적으로 새로 고쳐야 하는 테이블입니다.

1

2

3

4

5

6

7

function openUrl(url){

    url=url+"&jscallback=callsus"

         window.open(url,'_blank');   

}

function callsus(){

    $('#performanceDataGrid').reload();

}

로그인 후 복사

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



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

관련 라벨:
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿