历史版本5 :借用浏览器功能写JS语句 返回文档
编辑时间:
内容长度:图片数:目录数:
修改原因:
1. 描述编辑
报表中很多个性化功能的实现,大多是使用js来实现的。
那么我们如何能零基础写js来实现功能呢?
2. 解决方法编辑
我们可以通过浏览器中的审查元素来快速编辑js语句,从而实现功能。
这里以设计器自带的“超级链接”功能为例,实现点击自定义按钮来触发弹出一个“对话框”页面的功能。实现效果如下图:
3. 示例编辑
3.1 模板设置
我们先使用设计器自带的超级链接功能,实现弹出"对话框”页面。
新建一张普通报表,选中A1单元格,右键选择“超级链接”菜单,如下图所示:
添加一个网络报表,任意选择一个模板,如GettingStarted.cpt,链接打开于对话框,如下图所示:
3.2 模板预览
保存后,点击预览,效果如下:
3.3 获取功能代码
在浏览器中按下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\":\"/WebReport/ReportServer?reportlet=%2FGettingStarted.cpt\",\"target\":\"_dialog\"})}, this, as)","name":"网络报表1"}], true)">测试用超级链接</span>
3.4 整理所得代码
对上述代码进行整理,将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\":\"/WebReport/ReportServer?reportlet=%2FGettingStarted.cpt\",\"target\":\"_dialog\"})}, this, as)","name":"网络报表1"}], true)
3.5 对浏览器代码进行转义
由于浏览器解析需要,会将“双引号”转义为“"”,我们需要替换回来。得到代码:
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\":\"/WebReport/ReportServer?reportlet=%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\":\"/WebReport/ReportServer?reportlet=%2FGettingStarted.cpt\",\"target\":\"_dialog\"})}, this, as)","name":"网络报表1"}], true)
3.6 自定义按钮控件
弹出“对话框”的功能代码已获取到,下面自定义按钮来测试实现此功能。如下:
添加点击事件,将处理好到的js代码放进去。如下:
4. 保存预览编辑
保存模板,选择填报预览。
点击按钮,也可实现超级链接弹出对话框的效果。效果如上图。