JS实现鼠标点击行变色

  • 文档创建者:印然
  • 编辑次数:19次
  • 最近更新:Wendy123456 于 2020-04-15
  • 1. 概述

    1.1 预期效果

    在预览模板时,由于数据比较多,希望鼠标点击某行时该行高亮显示,效果如下图所示,那么如何实现呢?

    1.2 实现思路

    给模板增加加载结束事件,设置当鼠标点击当前行时,当前行为红色。

    2. 示例

    2.1 示例一:鼠标点击行变色

    2.1.1 打开模板

    打开模板:%FR_HOME%\webroot\WEB-INF\reportlets\demo\NewbieGuide\行式报表.cpt

    2.1.2 添加事件

    菜单栏点击模板>模板 Web 属性>分页预览设置,选择为该模板单独设置,然后添加加载结束事件,如下图所示:

    1586941029740829.png

     JavaScript 代码如下:

    contentPane.makeHighlight('red'); //使点击的行变成红色

    2.1.3 效果预览

    保存报表,点击分页预览,效果如下图所示:

    2D6DB307-E693-413B-87F1-33D21365A2E4.GIF

    注:不支持移动端。

    2.1.4 模板下载

    已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\分页预览JS实例\鼠标点击行变色.cpt

    点击下载模板:鼠标点击行变色.cpt

    2.2 示例二:鼠标悬浮行变色

    2.2.1 打开模板

    打开模板:%FR_HOME%\webroot\WEB-INF\reportlets\demo\NewbieGuide\行式报表.cpt

    2.2.2 添加事件

    菜单栏点击模板>模板 Web 属性>分页预览设置,选择为该模板单独设置,然后添加加载结束事件,如下图所示:

    Snag_14ac0ea9.png

     JavaScript 代码如下:

    contentPane.makeHighlight('red','mouseover');

    2.2.3 效果预览

    保存报表,点击分页预览,效果如下图所示:

    9BC69689-9088-462D-A9A4-8C20FD1600E1.GIF

    注:不支持移动端。

    2.2.4 模板下载

    已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\分页预览JS实例\鼠标悬浮行变色.cpt

    点击下载模板:鼠标悬浮行变色.cpt

    2.3 示例三:隔行变色模板鼠标点击行变色

    如果使用了条件属性中的 隔行显示不同的背景色,还要实现鼠标点击该行高亮显示,那么 JavaScript 语句需要修改。

    2.3.1 打开模板

    打开模板:%FR_HOME%\webroot\WEB-INF\reportlets\demo\NewbieGuide\条件属性.cpt

    2.3.2 添加事件

    菜单栏点击模板>模板 Web 属性>分页预览设置,选择为该模板单独设置,然后添加加载结束事件,如下图所示:

    Snag_14b64fa9.png

    JavaScript 代码如下:

    contentPane.makeHighlight('red', '' ,true);

    2.3.3 效果预览

    保存报表,点击分页预览,效果如下图所示:

    8A414B19-6E61-4C86-80CB-127F1CCD1D16.GIF

    注:不支持移动端。

    2.3.4 模板下载

    已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\分页预览JS实例\隔行变色模板鼠标点击行变色.cpt

    点击下载模板:隔行变色模板鼠标点击行变色.cpt

    附件列表


    主题: 二次开发
    • 有帮助
    • 没帮助
    • 只是浏览
    • 评价文档,奖励 1 ~ 100 随机 F 豆!