JS 实现点击按钮实现超链接功能

我就是我 2022-01-10 11:07 1709阅读 0赞

url = '/webroot/decision/view/report?viewlet=InshipOutship/Outship.frm';

新窗口打开报表：window.open(FR.cjkEncode(url));

当前窗口打开报表：window.location = "$\{servletURL\}?viewlet=InshipOutship/consume2\_sub\_LTPS.frm" ;//在新标签页打开报表

1. 描述

用户想通过点击按钮实现单元格中超链接-动态参数的效果：

![https://help.finereport.com/uploads/201811/1542183686tbdPxQkM.gif][https_help.finereport.com_uploads_201811_1542183686tbdPxQkM.gif]

2. 思路

2.1 超链接-动态参数

按钮点击事件使用下面的js代码：

$.ajax(\{

url: '/webroot/decision/view/form?op=fr\_dialog&cmd=parameters\_d',

type: 'POST',

data: \{

"area": "华东" //参数area传递值“华东”

\},

headers: \{

sessionID: session // 参数session传递值sessionID

\},

complete: function(res, status) \{

if (window.FR && FR.Chart && FR.Chart.WebUtils) \{

FR.Chart.WebUtils.clearCharts();

\_g().loadContentPane();

\});

9.0使用下面的代码：

$.ajax(\{

url: '/WebReport/ReportServer?op=fr\_dialog&cmd=parameters\_d&sessionID=' + session, // 参数session传递值sessionID

type: 'POST',

data: \{

"area": "华东" //参数area传递值“华东”

\},

complete: function(res, status) \{

if (window.FR && FR.Chart && FR.Chart.WebUtils) \{

FR.Chart.WebUtils.clearCharts();

\_g().loadContentPane();

\});

2.2 超链接-当前表单对象

超链接-当前表单对象报表块使用下面的js代码：

\_g().getWidgetByName('REPORT1').gotoPage(1, \{ "area": "华北" \}, 'T'); //参数area传递值“华北”

超链接-当前表单对象图表使用下面的js代码：

FR.Chart.WebUtils.changeParameter(

'chart0', \{

"area": "华北" //参数area传递值“华北”

);

注：超链接-当前表单对象对报表块和图表和js代码不同，根据需要使用对应的代码即可。

3. 示例一：超链接-动态参数

3.1 添加数据集查询

新建一个决策报表，添加数据集ds1：

![https://help.finereport.com/uploads/201811/1542184572lNk0vnQj.png][https_help.finereport.com_uploads_201811_1542184572lNk0vnQj.png]

3.2 设计决策报表

在body中添加两个按钮控件，控件名称分别为华东、华北，添加一个报表块控件，将ds1数据集字段拖入单元格中，模板设计界面如下：

![https://help.finereport.com/uploads/201811/1542197772mxV7iobB.png][https_help.finereport.com_uploads_201811_1542197772mxV7iobB.png]

3.3 添加点击事件

选中华东按钮button0控件，添加点击事件，在点击事件的右上角添加两个参数：session和area，值分别为公式：sessionID、字符串：华东，如下图：

![https://help.finereport.com/uploads/201811/1542197981BFw1dPSy.png][https_help.finereport.com_uploads_201811_1542197981BFw1dPSy.png]  
js代码如下：

$.ajax(\{

url: '/webroot/decision/view/form?op=fr\_dialog&cmd=parameters\_d',

type: 'POST',

data: \{

"area": area //给area参数赋值

\},

headers: \{

sessionID: session

\},

complete: function(res, status) \{

if (window.FR && FR.Chart && FR.Chart.WebUtils) \{

FR.Chart.WebUtils.clearCharts();

\_g().loadContentPane();

\});

同理华北按钮同样添加点击事件，js代码一样，需将参数area的值改为华北。  
![https://help.finereport.com/uploads/201811/1542198493td8JRAjM.png][https_help.finereport.com_uploads_201811_1542198493td8JRAjM.png]

保存模板，预览报表即可。

4. 示例二：超链接-当前表单对象

4.1 添加数据集查询

新建一个决策报表，添加数据集ds1：

![https://help.finereport.com/uploads/201811/20181120162847\_8410.png][https_help.finereport.com_uploads_201811_20181120162847_8410.png]

4.2 设计决策报表

在body中添加两个按钮控件button0、button1，控件名称分别为超链接-报表块、超链接-图表，添加一个报表块控件、一个饼图图表，将ds1数据集字段拖入单元格中，模板设计界面如下：

![https://help.finereport.com/uploads/201811/1542701985r3yOgzva.png][https_help.finereport.com_uploads_201811_1542701985r3yOgzva.png]

饼图设置如下：

![https://help.finereport.com/uploads/201811/1542702003w5pN4SIG.png][https_help.finereport.com_uploads_201811_1542702003w5pN4SIG.png]

4.3 添加点击事件

选中超链接-报表块按钮button0控件，添加点击事件，在点击事件的右上角添加参数：area，值为字符串：华北，如下图：

![https://help.finereport.com/uploads/201811/1542702198VvbLV7Py.png][https_help.finereport.com_uploads_201811_1542702198VvbLV7Py.png]  
js代码如下：

\_g().getWidgetByName('report0').gotoPage(1, \{

"area": area

\}, 'T');

选中超链接-图表按钮button1控件，添加点击事件，在点击事件的右上角添加参数：area，值为字符串：华北，如下图：  
![https://help.finereport.com/uploads/201811/1542702333eXN5ICPP.png][https_help.finereport.com_uploads_201811_1542702333eXN5ICPP.png]  
js代码如下：

FR.Chart.WebUtils.changeParameter(

'chart0', \{

"area": area,

);

保存模板，预览报表即可。

5. 预览效果

5.1 PC端预览效果

1）示例一：超链接-动态参数

![https://help.finereport.com/uploads/201811/1542183730ledEREJ4.gif][https_help.finereport.com_uploads_201811_1542183730ledEREJ4.gif]

2）示例二：超链接-当前报表对象

![https://help.finereport.com/uploads/201811/1542702754L80bbvfU.gif][https_help.finereport.com_uploads_201811_1542702754L80bbvfU.gif]

5.2 移动端预览效果

不支持移动端

6. 已完成模板

示例一：

已完成的模板，可参见：%FR\_HOME%\\webapps\\webroot\\WEB-INF\\reportlets\\doc\\JS\\表单JS实例\\28-js实现超链接-动态参数.frm

[右击存储模板][Link 1]

示例二：

已完成的模板，可参见：%FR\_HOME%\\webapps\\webroot\\WEB-INF\\reportlets\\doc\\JS\\表单JS实例\\28-js实现超链接-当前表单对象.frm

[右击存储模板][Link 2]

**标签：** 暂无标签 **编辑/添加标签**

[https_help.finereport.com_uploads_201811_1542183686tbdPxQkM.gif]: /images/20220110/cbaedc31a4fb47628613ebb075333781.png
[https_help.finereport.com_uploads_201811_1542184572lNk0vnQj.png]: /images/20220110/f8615e533f4e42be873c4470d28b51d8.png
[https_help.finereport.com_uploads_201811_1542197772mxV7iobB.png]: /images/20220110/5a0088717f1341778d4724dfd2581ecf.png
[https_help.finereport.com_uploads_201811_1542197981BFw1dPSy.png]: /images/20220110/e2fe3faeafef4af28d33a9a8341404e1.png
[https_help.finereport.com_uploads_201811_1542198493td8JRAjM.png]: /images/20220110/f06fb27430904d53be2cf05b26d2823f.png
[https_help.finereport.com_uploads_201811_20181120162847_8410.png]: /images/20220110/77db0e354857480198d915a36d543781.png
[https_help.finereport.com_uploads_201811_1542701985r3yOgzva.png]: /images/20220110/0a0c342a9364485580216293aa5fd4cb.png
[https_help.finereport.com_uploads_201811_1542702003w5pN4SIG.png]: /images/20220110/83f432a33eb54acfaa93752223b1bc37.png
[https_help.finereport.com_uploads_201811_1542702198VvbLV7Py.png]: /images/20220110/b8a7861ec81e43ec85201cb6b8597fa7.png
[https_help.finereport.com_uploads_201811_1542702333eXN5ICPP.png]: /images/20220110/63a108efdd67425b867e0e884e9d05ac.png
[https_help.finereport.com_uploads_201811_1542183730ledEREJ4.gif]: /images/20220110/83623cb8c4c845f1aec4d5de3499a476.png
[https_help.finereport.com_uploads_201811_1542702754L80bbvfU.gif]: /images/20220110/69269994c72b40aaa7549d5b95ba6863.png
[Link 1]: http://www.finereporthelp.com:8021/download/FR10.0/10.0demo/doc/JS/%E8%A1%A8%E5%8D%95JS%E5%AE%9E%E4%BE%8B/28-js%E5%AE%9E%E7%8E%B0%E8%B6%85%E9%93%BE%E6%8E%A5-%E5%8A%A8%E6%80%81%E5%8F%82%E6%95%B0.frm
[Link 2]: http://www.finereporthelp.com:8021/download/FR10.0/10.0demo/doc/JS/%E8%A1%A8%E5%8D%95JS%E5%AE%9E%E4%BE%8B/28-js%E5%AE%9E%E7%8E%B0%E8%B6%85%E9%93%BE%E6%8E%A5-%E5%BD%93%E5%89%8D%E8%A1%A8%E5%8D%95%E5%AF%B9%E8%B1%A1.frm