借用浏览器功能写JS语句

编辑
  • 文档创建者:flyingsnake
  • 浏览次数:13853次
  • 编辑次数:8次
  • 最近更新:17857024676 于 2019-05-28
  • 1. 描述


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

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


    2. 解决方法

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

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




    3. 示例


    3.1 模板设置


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

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


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


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


    3.2 模板预览

    保存后,点击预览,效果如下:





    3.3 获取功能代码


    在浏览器中按下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>

    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 自定义按钮控件


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


    添加点击事件,将处理好到的JavaScrip代码放进去。如下:




    4. 保存预览


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

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

    附件列表


    主题: 二次开发
    标签: 暂无标签 编辑/添加标签
    如果您认为本文档还有待完善,请编辑

    文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
    关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
    若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

    此页面有帮助吗?只是浏览 [ 去社区提问 ]