反馈已提交

网络繁忙

自定义JS事件中快速选择指定DOM

  • 文档创建者:jiangsr
  • 历史版本:6
  • 最近更新:Fay 于 2022-10-24
  • 1. 概述

    Finereport 中控件的「事件」功能非常强大,用户可通过自定义 JS 做出想要的效果。但是 JS 对于大多数非专业报表开发者较为陌生,需要额外的学习成本,尤其是 jQuery 选择器。而报表设计中,自定义 JS 事件又非常需要获取指定的 DOM 修改属性,本文将帮助你快速选择指定 DOM,完整自定义 JS 的设计。

    请选择 Chrome 浏览器使用,最好是最新版本或者符合当前报表系统浏览需求的版本。

    2. 示例

    2.1 准备示例模板

    准备一个内置模板:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\GettingStarted

    打开模板,预览模板。如下图所示:

    2.2 进入开发者工具窗口

    Chrome 浏览器预览模板,在 Chrome 浏览器中通过 F12 键或者 Ctrl+Shift+I 快捷键或「设置>更多工具>开发者工具」中打开 「开发者工具」窗口,如下图所示:

    2.3 进入 DOM 选定状态

    在「开发者工具」窗口,点击 ELements,切换至 Elements 界面,然后点击「选择元素」 图标,进入 DOM 选择状态。

    在此状态下,鼠标悬浮在页面中的元素上时,会在鼠标所在位置上方显示该元素的一些信息,比如上图中,鼠标悬浮在「 查询按钮」上,显示了这个元素的类属性和大小。

    如下图所示:

     

    2.4 获取 DOM 所对应的选择器

    1)在需要获取的 DOM上单击之后,Elements 中自动选中了该 DOM 。如下图所示:

    2)鼠标移至 Elements 中被选中的 DOM。在其上面右键,选择「Copy > Copy selector」,点击 Copy selector时,该 DOM 的选择器已经复制到剪贴板中,在设计器 JavaScript 脚本编辑器中进行粘贴 就可以使用了。如下图所示:

    我选中的 「按钮控件」DOM 选择器是 #fr-btn-WIDGET3 > div

    3. 注意事项

    1)获取到的一些选择器很长,但是是非常准确的,对于无太多 JavaScript 知识的模板制作者来说,这个是很合适的。

    2)由于是通过 Chrome 帮助获取的。因此在主流的浏览器上预览是没有问题的,但是在 一些低版本 IE 上面可能会出现问题,请谨慎使用该方法。

    附件列表


    主题: 二次开发
    • 有帮助
    • 没帮助
    • 只是浏览
    中文(简体)

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    10s后关闭

    联系我们
    在线支持
    获取专业技术支持,快速帮助您解决问题
    工作日9:00-12:00,13:30-17:30在线
    页面反馈
    针对当前网页的建议、问题反馈
    售前咨询
    采购需求/获取报价/预约演示
    或拨打: 400-811-8890 转1
    qr
    热线电话
    咨询/故障救援热线:400-811-8890转2
    总裁办24H投诉:17312781526
    提交页面反馈
    仅适用于当前网页的意见收集,帆软产品问题请在 问答板块提问前往服务平台 获取技术支持