如何通过报表单元格右键控制报表跳转到不同链接地址 ...
需求说明：
润乾报表的单元格中支持超链接属性，用户可以通过设置该属性，实现在浏览器端用鼠标点击某个单元格跳转到指定页面，并且还能够传递所需要的参数，从而实现数据的钻取（详见《玩转报表超链接》）。不过这种超链接的设置方式只能跳转到单一的指定页面，在一些特殊的业务要求中，用户可能需要基于一个单元格查看不同的明细信息。比如，用户在访问一个地区列表时，既想经由该页面查看某地区的销售收入情况，又想查看该地区的其他信息。这样，在原有方式下就需要增加多个超链接按钮，每个按钮设置不同的超链接，而这种做法不一定能符合用户的页面样式需要或者操作习惯。下面，通过一个实际例子来介绍一下，如何在页面中增加右键操作，点击右键时先弹出可钻取的列表，选择后跳转到不同的页面。
一：设置报表格式
按照实际需求，开发报表模板，如下图：
报表格式比较简单，是一个比较普通的分组报表，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.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('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.htmlfunction 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('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事件属性实现了单元格的右键跳转到不同的链接地址，报表中除了右键属性外，还支持其他的一些触发事件操作，具体可以参考报表帮助文档：doc.raqsoft.com.cn/report/preference/cfsj170.html