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

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

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

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

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

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