如何透過報表單元格右鍵控制報表跳轉到不同連結地址

需求說明：

潤乾報表的單元格中支援超連結屬性，使用者可以透過設定該屬性，實現在瀏覽器端用滑鼠點選某個單元格跳轉到指定頁面，並且還能夠傳遞所需要的引數，從而實現資料的鑽取（詳見 ）。不過這種超連結的設定方式只能跳轉到單一的指定頁面，在一些特殊的業務要求中，使用者可能需要基於一個單元格檢視不同的明細資訊。比如，使用者在訪問一個地區列表時，既想經由該頁面檢視某地區的銷售收入情況，又想檢視該地區的其他資訊。這樣，在原有方式下就需要增加多個超連結按鈕，每個按鈕設定不同的超連結，而這種做法不一定能符合使用者的頁面樣式需要或者操作習慣。下面，透過一個實際例子來介紹一下，如何在頁面中增加右鍵操作，點選右鍵時先彈出可鑽取的列表，選擇後跳轉到不同的頁面。

一：設定報表格式

按照實際需求，開發報表模板，如下圖：

報表格式比較簡單，是一個比較普通的分組報表，A2 單元格按照國家進行分組，B2 單元格按照省份進行分組，C2 單元格顯示出對應的城市名稱，報表展現結果如下：

現在要求，在城市列增加右鍵操作，右鍵時彈出地址選擇列表。

報表單元格有個屬性為 HTML 事件屬性，可以在該屬性中設定 html 觸發事件，如在 C2 單元格的 HTML 事件屬性表示式中寫入：“popMenu 函式，並將 C2 單元格的值傳入進行，這樣報表中設定了 C2 單元格的右鍵操作，只需要在顯示報表的 jsp 中實現 popMenu 這個 js 函式以及相關操作即可。

二：頁面 javascript 設定

在顯示報表的 jsp 的 javascript 中實現相應操作，首先，因為頁面中要右鍵操作，所以要先遮蔽掉瀏覽器本身的右鍵，在 js 中加入如下程式碼：

function disClick(){
 return false;
}
document.oncontextmenu=disClick;
接下來的話就是要實現報表中指定的右鍵操作，整體的js程式碼如下：
<SCRIPT>
function disClick(){
 return false;
}
document.oncontextmenu=disClick;
var strMenu = "<div id=\\"menu\\" class=\\"clsMenu\\" onMouseover=\\"highlight()\\" onMouseout=\\"lowlight()\\">"
strMenu += "</div>"
// 判斷客戶端瀏覽器
function showmenu(){
 var rightedge=document.body.clientWidth-event.clientX
 var bottomedge=document.body.clientHeight-event.clientY
 if (rightedge<menu.offsetWidth)
 menu.style.left=document.body.scrollLeft+event.clientX-menu.offsetWidth
 else
 menu.style.left=document.body.scrollLeft+event.clientX
 if (bottomedge<menu.offsetHeight)
 menu.style.top=document.body.scrollTop+event.clientY-menu.offsetHeight
 else
 menu.style.top=document.body.scrollTop+event.clientY
 menu.style.visibility="visible"
 return false
}
function sysMenu(){
 return false
}
// 隱藏選單
function hidemenu(){
 menu.style.visibility="hidden"
}
// 選單項獲得焦點時加亮顯示
function highlight(){
 if (event.srcElement.className=="menuitems"){
 event.srcElement.style.backgroundColor="highlight"
 event.srcElement.style.color="highlighttext"
}
}
// 選單項失去焦點
function lowlight(){
 if (event.srcElement.className=="menuitems"){
 event.srcElement.style.backgroundColor=""
 event.srcElement.style.color="menutext"
}
}
function openNewWindow(winhref,winstyle){
  var objNewWindow = window.open(winhref,"",winstyle);
 objNewWindow.focus();
}
 document.write(strMenu);
 function popMenu(cb) {
 var SubstrMenu = "<div class=\\"menuitems\\" onClick=\\"window.open(')\\">查“"+cb+"”的所有客戶(百度)</div>";
 SubstrMenu += "<div class=\\"menuitems\\" onClick=\\"window.open(')\\">查“"+cb+"”的重點客戶(百度)</a></div>";
 SubstrMenu += "<hr>";
 SubstrMenu += "<div class=\\"menuitems\\" onClick='hidemenu()'>隱藏此選單</a></div>";
 menu.innerHTML = SubstrMenu;
 showmenu();
 return false;
 }
</SCRIPT>
另外，為了更好的顯示效果，還可以增加css樣式來進行控制，將如下樣式同樣加入到jsp頁面中：
```java
<STYLE>.clsMenu {
 BORDER-RIGHT: buttonhighlight 2px outset; BORDER-TOP: buttonhighlight 2px outset; VISIBILITY: hidden; BORDER-LEFT: buttonhighlight 2px outset; WIDTH: 200px; CURSOR: default; COLOR: menutext; BORDER-BOTTOM: buttonhighlight 2px outset; POSITION: absolute; BACKGROUND-COLOR: menu
}
.menuitems {
 PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FONT-SIZE: 12px; COLOR: #000000; LINE-HEIGHT: 18px
}
</STYLE>function disClick(){ return false;
}
document.oncontextmenu=disClick;
接下來的話就是要實現報表中指定的右鍵操作，整體的js程式碼如下：
<SCRIPT>function disClick(){ return false;
}
document.oncontextmenu=disClick;
var strMenu = "<div id=\\"menu\\" class=\\"clsMenu\\" onMouseover=\\"highlight()\\" onMouseout=\\"lowlight()\\">"strMenu += "</div>"// 判斷客戶端瀏覽器function showmenu(){
 var rightedge=document.body.clientWidth-event.clientX
 var bottomedge=document.body.clientHeight-event.clientY if (rightedge<menu.offsetWidth)
 menu.style.left=document.body.scrollLeft+event.clientX-menu.offsetWidth else
 menu.style.left=document.body.scrollLeft+event.clientX if (bottomedge<menu.offsetHeight)
 menu.style.top=document.body.scrollTop+event.clientY-menu.offsetHeight else
 menu.style.top=document.body.scrollTop+event.clientY
 menu.style.visibility="visible"
 return false}function sysMenu(){ return false}// 隱藏選單function hidemenu(){
 menu.style.visibility="hidden"}// 選單項獲得焦點時加亮顯示function highlight(){ if (event.srcElement.className=="menuitems"){
 event.srcElement.style.backgroundColor="highlight"
 event.srcElement.style.color="highlighttext"}
}// 選單項失去焦點function lowlight(){ if (event.srcElement.className=="menuitems"){
 event.srcElement.style.backgroundColor=""
 event.srcElement.style.color="menutext"}
}function openNewWindow(winhref,winstyle){
  var objNewWindow = window.open(winhref,"",winstyle);
 objNewWindow.focus();
}
 document.write(strMenu); function popMenu(cb) {
 var SubstrMenu = "<div class=\\"menuitems\\" onClick=\\"window.open(')\\">查“"+cb+"”的所有客戶(百度)</div>";
 SubstrMenu += "<div class=\\"menuitems\\" onClick=\\"window.open(')\\">查“"+cb+"”的重點客戶(百度)</a></div>";
 SubstrMenu += "<hr>";
 SubstrMenu += "<div class=\\"menuitems\\" onClick='hidemenu()'>隱藏此選單</a></div>";
 menu.innerHTML = SubstrMenu;
 showmenu(); return false;
 }
</SCRIPT>
另外，為了更好的顯示效果，還可以增加css樣式來進行控制，將如下樣式同樣加入到jsp頁面中：
```java
<STYLE>.clsMenu {
 BORDER-RIGHT: buttonhighlight 2px outset; BORDER-TOP: buttonhighlight 2px outset; VISIBILITY: hidden; BORDER-LEFT: buttonhighlight 2px outset; WIDTH: 200px; CURSOR: default; COLOR: menutext; BORDER-BOTTOM: buttonhighlight 2px outset; POSITION: absolute; BACKGROUND-COLOR: menu
}
.menuitems {
 PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FONT-SIZE: 12px; COLOR: #000000; LINE-HEIGHT: 18px
}
</STYLE>

這樣，在瀏覽器端就能夠實現在單元格上滑鼠右鍵跳轉到不同的連結地址：

注：本例連結地址設定到了百度，實際中跳轉可以自行根據實際需求在 js 中進行設定。

總結：

本例中透過報表的 HTML 事件屬性實現了單元格的右鍵跳轉到不同的連結地址，報表中除了右鍵屬性外，還支援其他的一些觸發事件操作，具體可以參考報表幫助文件：