报表中很多个性化功能的实现，大多是使用 JavaScript 来实现的，那么我们如何能零基础写 JavaScript 来实现功能呢？

我们可以通过浏览器中的「审查元素」，获取到报表中每个元素对应的代码，从而能据此快速编辑出需要的 JavaScript 语句添加在模板中，实现想要的功能。

这里以设计器自带的「超级链接」功能为例，通过浏览器获得添加超链接的 JavaScript 代码，修整后利用此代码实现点击自定义按钮后弹出一个「对话框」页面的功能。如下图所示：

2.1 准备模板

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

1）新建一张普通报表，选中 A1 单元格，为其添加「超级链接」，超链接到内置模板 GettingStarted.cpt 。如下图所示：

2）保存模板，点击「分页预览」。效果如下图所示：

2.2 获取代码

预览报表时，在浏览器中按下 F12 或是右键选择「审查元素」，就可以看到网页中各个元素的代码。如下图所示：

鼠标选中超链接，右键选择「检查」，会跳转到该超链接对应的代码，这样就通过浏览器找到了实现超级链接功能的代码，复制代码。如下图所示：

复制的代码如下：

<span class="linkspan" style="cursor:pointer;" 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)">测试超级链接功能</span>

2.3 整理代码

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

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)

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

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)

3）此段代码添加为点击事件的内容后，部分浏览器预览会报错：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)

2.4 自定义按钮

弹出「对话框」的功能代码已获取到，下面通过「自定义按钮」来实现此功能。

1）新建模板，在模板中添加一个「按钮控件」，按钮类型为「普通」，按钮名称为「弹出对话框」。如下图所示：

2）为「按钮控件」添加一个「点击事件」，事件内容为 2.3节 处理好到的 JavaScript 代码。如下图所示：

2.4. 效果预览

保存模板，选择「填报预览」，点击按钮，也可实现超级链接弹出对话框的效果。效果同第一章预览效果图。