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

1. 描述

帆软报表中控件的事件功能非常强大，能够通过自定义 js 做出非常匠心独具的效果，在本文档中搜索 “JS实现” 就可以看到通过自定义 js 可以获得非凡的扩展性。

2. 问题

但是 js 对于大多数非程序员或者报表制作业务人员来说是不熟悉的，需要额外的学习成本，尤其是 jQuery 选择器。而报表设计制作中的自定义 js 事件，又非常需要获取指定的 dom 完成绑定事件或者修改属性的操作。因此，本文档帮助你快速选择指定 dom，完整自定义 js 的设计。

3. 准备

设计器和 Chrome 浏览器(最好是最新版本或者符合当前报表系统浏览需求的版本)。

4. 步骤

为了能有具体情况说明，我们拿这个 JS实现切换tab显示/隐藏参数面板上的控件例子作为说明。

4.1 报表设计

依据 JS实现切换tab显示/隐藏参数面板上的控件中的操作，并制作完成其中3.2报表设计中的1，2，3 步。

4.2 JS 脚本中快速获取相关dom

1）通过上文准备好的 Chrome 浏览器预览模板，在 Chrome 浏览器中通过 F12 键或者 Ctrl+Shift+I 快捷键或者设置中更多工具>开发者工具中打开开发者工具窗口，如下图所示。

2）进入 dom 选定状态

首先点击上图中 A 框中的 ELements，切换成 Elements 界面，然后点击图中 B 框中的图标，进入 do'm 选择状态。在此状态下，鼠标悬浮在页面中的元素上时，会在鼠标所在位置上方显示改元素的一些信息，比如上图中，鼠标悬浮在 “修理厂” 这个 tab 按钮上，在“修理厂”上方，显示了这个元素是 div, 他的类属性 class 是 fr-widget-click , 大小时 57 x 31。

3）在需要获取的 dom 上单击

在需要获取的 dom 上单击之后，Elements 中自动选中了该dom 。如下图红框部分所示。

注：也可以直接在 Elements 上下选择，通过观察元素是否被选中来当前选中的 dom 节点是否是需要的。(推荐)

4）获取 dom 所对应的选择器

鼠标移至Elements 中被选中的 dom。在其上面右键，选择Copy > Copy selector，点击 Copy selector. 这时，该 dom 的选择器已经复制到剪贴板中，在设计器 js 脚本编辑器中进行粘贴就可以使用了。如下图：

在这个示例中，我选中的dom 即 “修理厂” 的选择器是

body > div.content-container.fr-quick-border-layout.ui-state-enabled > div > div > div > div.fr-quick-border-layout.ui-state-enabled > div.fr-horizontalboxlayout.ui-state-enabled > div:nth-child(2) > div

注：虽然它很长，但是它是非常精确的，是可以使用的。

通过

$('body > div.content-container.fr-quick-border-layout.ui-state-enabled > div > div > div > div.fr-quick-border-layout.ui-state-enabled > div.fr-horizontalboxlayout.ui-state-enabled > div:nth-child(2) > div')

就可以使用他了。

通过同样的方式，我们可以完成 JS实现切换tab显示/隐藏参数面板上的控件中 js 的编写。

最终得到：

setTimeout(function () {
    $("body > div.content-container.fr-quick-border-layout.ui-state-enabled > div > div > div > div.fr-quick-border-layout.ui-state-enabled > div.fr-horizontalboxlayout.ui-state-enabled > div:nth-child(2) > div")
        .bind("click", function () {
            $('body > div.para-container.fr-quick-border-layout.ui-state-enabled > div:nth-child(2) > div > div:nth-child(2)').show();
            $('body > div.para-container.fr-quick-border-layout.ui-state-enabled > div:nth-child(2) > div > div:nth-child(3)').show();
        });
    $("body > div.content-container.fr-quick-border-layout.ui-state-enabled > div > div > div > div.fr-quick-border-layout.ui-state-enabled > div.fr-horizontalboxlayout.ui-state-enabled > div:nth-child(1) > div").bind("click", function () {
        $('body > div.para-container.fr-quick-border-layout.ui-state-enabled > div:nth-child(2) > div > div:nth-child(2)').hide();
        $('body > div.para-container.fr-quick-border-layout.ui-state-enabled > div:nth-child(2) > div > div:nth-child(3)').hide();
    });
}, 100);

由于得到的 js 代码是比较长的，因此最好事先在文本编辑器中进行编辑，然后复制粘贴到设计器的 js 脚本编辑器中。

5. 注意事项

1）获取得到选择器很长

虽然很长，但是是非常准确的，对于无太多 js 知识的模板制作者来说，这个是很合适的。

而且，由于不清楚预览后生成的具体 dom 信息规律，因此，这种方式非常简单直接。

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

主题： 二次开发