1. 概述
报表中很多个性化功能的实现，大多是使用 JavaScript 来实现的，那么我们如何能零基础写 JavaScript 来实现功能呢？
我们可以通过浏览器中的「审查元素」，获取到报表中每个元素对应的代码，从而能据此快速编辑出需要的 JavaScript 语句添加在模板中，实现想要的功能。
这里以设计器自带的「超级链接」功能为例，通过浏览器获得添加超链接的 JavaScript 代码，修整后利用此代码实现点击自定义按钮后弹出一个「对话框」页面的功能。如下图所示：
2. 示例
2.1 准备模板
我们先使用设计器自带的超级链接功能，实现弹出「对话框」的功能。
1）新建一张普通报表，选中 A1 单元格，为其添加「超级链接」，超链接到内置模板 GettingStarted.cpt 。如下图所示：
2）保存模板，点击「分页预览」。效果如下图所示：
2.2 获取代码
预览报表时，在浏览器中按下 F12 或是右键选择「审查元素」，就可以看到网页中各个元素的代码。如下图所示：
鼠标选中超链接，右键选择「检查」，会跳转到该超链接对应的代码，这样就通过浏览器找到了实现超级链接功能的代码，复制代码。如下图所示：
复制的代码如下：
<span class="linkspan" style="cursor:pointer;" 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)">测试超级链接功能</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.5 效果预览
保存模板，选择「填报预览」，点击按钮，也可实现超级链接弹出对话框的效果。效果同第一章预览效果图。
