反馈已提交

网络繁忙

借用浏览器功能写JS语句

  • 文档创建者:flyingsnake
  • 编辑次数:17次
  • 最近更新:RosieY 于 2021-03-05
  • 1. 概述

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

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

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


    2. 示例

    2.1 准备模板

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

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

    2)保存模板,点击「分页预览」。效果如下图所示:

    2.2 获取代码

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


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

    2021-03-05_10-19-00.gif

    复制的代码如下:

    <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, [{&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)

    2)由于浏览器解析需要,会将“双引号”转义为“&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)

    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 效果预览

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

    附件列表


    主题: 二次开发
    • 有帮助
    • 没帮助
    • 只是浏览

    售前咨询电话

    400-811-8890转1

    在线技术支持

    请前往「服务平台」,选择「在线支持」

    热线电话:400-811-8890转2

    总裁办24H投诉

    热线电话:173-1278-1526

    文 档反 馈

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    10s后关闭