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


    需求说明:

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

    一:设置报表格式

    按照实际需求,开发报表模板,如下图:

    报表格式比较简单,是一个比较普通的分组报表,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页面中:
    ```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>
    
    总结:

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

  • 相关阅读:
    aria2服务器
    小米路由器mini刷openwrt系统
    为玩客云或树莓派安装LNMP和PhpMyAdmin
    在玩客云或树莓派上通过ffmpeg将视频推流到直播平台
    阿里云盘+OneManager+Heroku+CFWorkers实现阿里云盘网络挂载
    ProBuilder操作一览表
    ProBuilder快速原型开发技术 ---操作基础
    VisualEffectGraph概述
    ProBuilder快速原型开发技术 ---进阶功能操作
    ProBuilder快速原型开发技术 ---模型精细化操作
  • 原文地址:https://www.cnblogs.com/shiGuangShiYi/p/12114637.html
Copyright © 2020-2023  润新知