借用浏览器功能写JS语句

1. 描述

报表中很多个性化功能的实现，大多是使用js来实现的。

那么我们如何能零基础写js来实现功能呢？

2. 解决方法

我们可以通过浏览器中的审查元素来快速编辑js语句，从而实现功能。

这里以设计器自带的“超级链接”功能为例，实现点击自定义按钮来触发弹出一个“对话框”页面的功能。实现效果如下图：

3. 示例

3.1 模板设置

我们先使用设计器自带的超级链接功能，实现弹出"对话框”页面。

新建一张普通报表，选中A1单元格，右键选择“超级链接”菜单，如下图所示：

添加一个网络报表，任意选择一个模板，如GettingStarted.cpt，链接打开于对话框，如下图所示：

注：自2018.12.27及之后版本，对话框还可以自定义标题及位置。如下图所示：

3.2 模板预览

保存后，点击预览，效果如下：

3.3 获取功能代码

在浏览器中按下F12或是右键选择“审查元素”就可以看到网页各个元素的代码了。如下：

我们通过选择抓取到这个超链对应的代码，并复制所查找到的代码。

得到如下代码：

<span class="linkspan" style="cursor:pointer;" οnclick="FR.doHyperlink(event||window.event, [{&quot;data&quot;:&quot;var as=arguments; return FR.tc(function(){FR.doHyperlinkByGet4Reportlet({\&quot;para\&quot;:{\&quot;__pi__\&quot;:true},\&quot;feature\&quot;:\&quot;width=600,height=400,\&quot;,\&quot;title\&quot;:\&quot;网络报表1\&quot;,\&quot;url\&quot;:\&quot;/webroot/decision/view/report?viewlet=%2FGettingStarted.cpt\&quot;,\&quot;target\&quot;:\&quot;_dialog\&quot;})}, this, as)&quot;,&quot;name&quot;:&quot;网络报表1&quot;}], true)">测试超级链接功能</span>

3.4 整理所得代码

对上述代码进行整理，将onclick动作需要执行的部分复制出来。

FR.doHyperlink(event||window.event, [{&quot;data&quot;:&quot;var as=arguments; return FR.tc(function(){FR.doHyperlinkByGet4Reportlet({\&quot;para\&quot;:{\&quot;__pi__\&quot;:true},\&quot;feature\&quot;:\&quot;width=600,height=400,\&quot;,\&quot;title\&quot;:\&quot;网络报表1\&quot;,\&quot;url\&quot;:\&quot;/webroot/decision/view/report?viewlet=%2FGettingStarted.cpt\&quot;,\&quot;target\&quot;:\&quot;_dialog\&quot;})}, this, as)&quot;,&quot;name&quot;:&quot;网络报表1&quot;}], true)

3.5 对浏览器代码进行转义

由于浏览器解析需要，会将“双引号”转义为“&quot;”，我们需要替换回来。得到代码：

FR.doHyperlink(event||window.event, [{"data":"var as=arguments; return FR.tc(function(){FR.doHyperlinkByGet4Reportlet({\"para\":{\"__pi__\":true},\"feature\":\"width=600,height=400,\",\"title\":\"网络报表1\",\"url\":\"/webroot/decision/view/report?viewlet=%2FGettingStarted.cpt\",\"target\":\"_dialog\"})}, this, as)","name":"网络报表1"}], true)

注：个别浏览器预览会报错：event is not defined，如下图，这时把event||删掉就可以了。

得到最终代码：

FR.doHyperlink(window.event, [{"data":"var as=arguments; return FR.tc(function(){FR.doHyperlinkByGet4Reportlet({\"para\":{\"__pi__\":true},\"feature\":\"width=600,height=400,\",\"title\":\"网络报表1\",\"url\":\"/webroot/decision/view/report?viewlet=%2FGettingStarted.cpt\",\"target\":\"_dialog\"})}, this, as)","name":"网络报表1"}], true)

3.6 自定义按钮控件

弹出“对话框”的功能代码已获取到，下面自定义按钮来测试实现此功能。如下：

添加点击事件，将处理好到的js代码放进去。如下：

4. 保存预览

保存模板，选择填报预览。

点击按钮，也可实现超级链接弹出对话框的效果。效果如上图。

主题： 二次开发

标签： js 代码 浏览器 编写 功能 已验证 编辑/添加标签