如何通過報表單元格右鍵控制報表跳轉到不同鏈接地址
【摘要】
報表中支持超鏈接操作，可以在瀏覽器中點擊單元格跳到指定位置實現鑽取操作，在一些特殊需求中，一個單元格要求可以跳轉到多個地址，點擊 如何通過報表單元格右鍵控制報表跳轉到不同鏈接地址查看如何實現該需求
需求說明：
潤乾報表的單元格中支持超鏈接屬性，用戶可以通過設置該屬性，實現在瀏覽器端用鼠標點擊某個單元格跳轉到指定頁面，並且還能夠傳遞所需要的參數，從而實現數據的鑽取（詳見《玩轉報表超鏈接》）。不過這種超鏈接的設置方式只能跳轉到單一的指定頁面，在一些特殊的業務要求中，用戶可能需要基於一個單元格查看不同的明細信息。比如，用戶在訪問一個地區列表時，既想經由該頁面查看某地區的銷售收入情況，又想查看該地區的其他信息。這樣，在原有方式下就需要增加多個超鏈接按鈕，每個按鈕設置不同的超鏈接，而這種做法不一定能符合用戶的頁面樣式需要或者操作習慣。下面，通過一個實際例子來介紹一下，如何在頁面中增加右鍵操作，點擊右鍵時先彈出可鑽取的列表，選擇後跳轉到不同的頁面。
一：設置報表格式
按照實際需求，開發報表模板，如下圖：
報表格式比較簡單，是一個比較普通的分組報表，A2 單元格按照國家進行分組，B2 單元格按照省份進行分組，C2 單元格顯示出對應的城市名稱，報表展現結果如下：
現在要求，在城市列增加右鍵操作，右鍵時彈出地址選擇列表。
報表單元格有個屬性爲 HTML 事件屬性，可以在該屬性中設置 html 觸發事件，如在 C2 單元格的 HTML 事件屬性表達式中寫入：「οncοntextmenu=popMenu(\’」+C2+「\’) onClick=hidemenu()」，該表達式含義爲，設置點擊右鍵時調用 popMenu 函數，並將 C2 單元格的值傳入進行，這樣報表中設置了 C2 單元格的右鍵操作，只需要在顯示報表的 jsp 中實現 popMenu 這個 js 函數以及相關操作即可。
二：頁面 javascript 設置
在顯示報表的 jsp 的 javascript 中實現相應操作，首先，因爲頁面中要右鍵操作，所以要先屏蔽掉瀏覽器本身的右鍵，在 js 中加入如下代碼：
function disClick(){
return false;
}
document.οncοntextmenu=disClick;
接下來的話就是要實現報表中指定的右鍵操作，整體的js代碼如下：
<SCRIPT>
function disClick(){
return false;
}
document.οncοntextmenu=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('http://www.baidu.com/s?wd="+cb+"','_self')\\">查「"+cb+"」的所有客戶(百度)</div>";
SubstrMenu += "<div class=\\"menuitems\\" onClick=\\"window.open('http://www.baidu.com/s?wd="+cb+"','_self')\\">查「"+cb+"」的重點客戶(百度)</a></div>";
SubstrMenu += "<hr>";
SubstrMenu += "<div class=\\"menuitems\\" onClick='hidemenu()'>隱藏此菜單</a></div>";
menu.innerHTML = SubstrMenu;
showmenu();
return false;
}
</SCRIPT>
另外，爲了更好的顯示效果，還可以增加css樣式來進行控制，將如下樣式同樣加入到jsp頁面中：
<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事件屬性實現了單元格的右鍵跳轉到不同的鏈接地址，報表中除了右鍵屬性外，還支持其他的一些觸發事件操作，具體可以參考報表幫助文檔：http://doc.raqsoft.com.cn/report/preference/cfsj170.html