網站前端_jQuery-基礎入門
需求描述:審批表單頁面由我的待辦工作中開啟,辦理完畢後希望關閉該頁面並且實現我待辦表格的實時重新整理;同時該需求也同樣適用於從某些工作流管理模組中需要發起審批的情況,比如招聘需求模組中發起錄用流程;我的績效管理中審批績效等。
我們先來看看之前的實現,該邏輯實現的功能是,從我待辦列表中發起審批,審批結束後直接在當前頁面,也就是審批頁面跳轉至一個新的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/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- JQuery-入門jQuery
- 前端基礎入門四(JavaScript基礎)前端JavaScript
- 前端基礎入門一(HTML)前端HTML
- 前端入門3-CSS基礎前端CSS
- 前端基礎入門六(JQuery進階)前端jQuery
- 前端零基礎入門學習!前端真簡單前端
- 一站到底 ---前端基礎之網路前端
- 零基礎入門前端的修煉之道前端
- 前端 – 百度地圖 API 基礎入門前端地圖API
- CTF入門學習5-> 前端JavaScript基礎前端JavaScript
- 新手入門前端,需要學習的基礎內容。前端
- HTML 基礎入門HTML
- Maven入門基礎Maven
- Java 入門基礎Java
- Redis入門基礎Redis
- goalng 基礎入門Go
- sqlServer 基礎入門SQLServer
- Ansible 基礎入門
- shell入門基礎
- mongodb基礎入門MongoDB
- MySQL 基礎入門MySql
- RabbitMQ基礎入門MQ
- JavaScript入門基礎JavaScript
- SpringCloud基礎入門SpringGCCloud
- ZooKeeper 基礎入門
- Bootstrap基礎入門boot
- Html基礎入門HTML
- Vim 入門:基礎
- ElasticSearch基礎入門Elasticsearch
- Dart 基礎入門Dart
- Elasticsearch 基礎入門Elasticsearch
- 【FastAPI】入門基礎ASTAPI
- Linux基礎入門Linux
- go基礎入門Go
- Zookeeper基礎入門
- Nginx 基礎入門Nginx
- SQL入門基礎SQL
- Kubernetes 入門基礎