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 上面可能会出现问题,请谨慎使用该方法。