如何通过报表单元格右键控制报表跳转到不同链接地址

简介: 报表个性化,HTML事件,自定义js

需求说明:
润乾报表的单元格中支持超链接属性,用户可以通过设置该属性,实现在浏览器端用鼠标点击某个单元格跳转到指定页面,并且还能够传递所需要的参数,从而实现数据的钻取(详见《玩转报表超链接》)。不过这种超链接的设置方式只能跳转到单一的指定页面,在一些特殊的业务要求中,用户可能需要基于一个单元格查看不同的明细信息。比如,用户在访问一个地区列表时,既想经由该页面查看某地区的销售收入情况,又想查看该地区的其他信息。这样,在原有方式下就需要增加多个超链接按钮,每个按钮设置不同的超链接,而这种做法不一定能符合用户的页面样式需要或者操作习惯。下面,通过一个实际例子来介绍一下,如何在页面中增加右键操作,点击右键时先弹出可钻取的列表,选择后跳转到不同的页面。
一:设置报表格式
按照实际需求,开发报表模板,如下图:

报表格式比较简单,是一个比较普通的分组报表,A2 单元格按照国家进行分组,B2 单元格按照省份进行分组,C2 单元格显示出对应的城市名称,报表展现结果如下:

现在要求,在城市列增加右键操作,右键时弹出地址选择列表。
报表单元格有个属性为 HTML 事件属性,可以在该属性中设置 html 触发事件,如在 C2 单元格的 HTML 事件属性表达式中写入:“oncontextmenu=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>

这样,在浏览器端就能够实现在单元格上鼠标右键跳转到不同的链接地址:


![3jpg](http://img.raqsoft.com.cn/file/2019/02/5f5eee9a5bdd40e69b56d4e45254f31d_3.jpg)


注:本例链接地址设置到了百度,实际中跳转可以自行根据实际需求在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>

这样,在浏览器端就能够实现在单元格上鼠标右键跳转到不同的链接地址:

3jpg

注:本例链接地址设置到了百度,实际中跳转可以自行根据实际需求在js中进行设置。

总结:

本例中通过报表的HTML事件属性实现了单元格的右键跳转到不同的链接地址,报表中除了右键属性外,还支持其他的一些触发事件操作,具体可以参考报表帮助文档:doc.raqsoft.com.cn/report/preference/cfsj170.html

目录
相关文章
|
7月前
|
缓存 JavaScript 前端开发
mapbox没有token/token失效,地图闪烁后变空白,报错Error: A valid Mapbox access token is required to use Mapbox GL JS.
本博客介绍了mapbox如何去除token验证,暴力破解mapbox的token验证机制。一劳永逸解决mapbox地图闪现一下然后变成空白,报错Error: A valid Mapbox access token is required to use Mapbox GL JS.的方法,还介绍了类似问题的具体解决思路。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
JSON JavaScript 测试技术
全网最全httpruner自动化测试教程 全是干货
全网最全httpruner自动化测试教程 全是干货
|
SQL 存储 关系型数据库
MySQL怎样优化千万级数据
MySQL在处理千万级数据时可能存在性能挑战。本文介绍了几个优化策略来改善查询效率
535 2
|
监控 安全 网络安全
边界防护
【8月更文挑战第18天】
592 2
|
12月前
|
监控 自动驾驶 5G
|
12月前
|
物联网
物联网:NB卡是否支持2/3/4G网络
在讨论“NB卡是否支持2/3/4G网络”的问题时,我们首先需要明确“NB卡”指的是什么。在通信领域中,“NB卡”通常指的是支持NB-IoT(Narrowband Internet of Things,窄带物联网)技术的SIM卡或模块。NB-IoT是一种专为物联网设计的窄带无线通信技术,它基于现有的蜂窝网络进行构建,但专注于低功耗广域网(LPWAN)应用。
|
12月前
|
物联网 vr&ar 数据安全/隐私保护
移动应用开发的未来:挑战与机遇
本文将深入分析当前移动应用开发的技术趋势和面临的挑战,同时探讨移动操作系统的最新发展。我们将从技术、市场和用户体验三个角度,全面评估移动应用开发的现状和未来方向。通过具体案例和数据分析,帮助开发者和企业更好地理解如何在竞争激烈的市场中保持领先地位。
|
监控 安全 大数据
关于微信支付相关安全性问题
关于微信支付相关安全性问题
关于微信支付相关安全性问题
|
SQL 数据采集 JSON
MaxCompute中的JSON数据处理
MaxCompute中的JSON数据处理
3915 0
|
API C语言 图形学
EasyX图形库学习(一、窗口创建函数initgraph、背景颜色设置setbkcolor、图形绘制函数)
EasyX图形库学习(一、窗口创建函数initgraph、背景颜色设置setbkcolor、图形绘制函数)