1.1 问题描述

用户如何通过点击按钮实现单元格中超链接-动态参数的效果，如下图所示：

1.2 思路

1.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();
}
});

1.2.2 超链接-当前决策报表对象

超链接-当前决策报表对象报表块使用下面的 JS 代码：

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

超链接-当前决策报表对象图表块使用下面的 JS 代码：

FR.Chart.WebUtils.changeParameter(
'chart0', {
"area": "华北" //参数area传递值“华北”
}
);

2.1 添加数据集查询

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

2.2 设计决策报表

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

2.3 添加点击事件

选中华东按钮 button0 控件，添加点击事件。在点击事件的右上角添加两个参数，如下图所示：

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();
}
});

同理，选中华北按钮控件，添加点击事件。在点击事件的右上角添加两个参数，如下图所示：

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

3.1 添加数据集查询

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

3.2 设计决策报表

在 body 中添加两个按钮控件 button0、button1，控件名称分别为超链接-报表块、超链接-图表。

在 body 中添加一个报表块控件、一个饼图图表，将 ds1 数据集字段拖入单元格中，模板设计界面如下图所示：

饼图设置如下：

3.3 添加点击事件

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

JS 代码如下：

_g().getWidgetByName('report0').gotoPage(1, {
"area": area
}, 'T');

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

JS 代码如下：

FR.Chart.WebUtils.changeParameter(
'chart0', {
"area": area,
}
);

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

4.1 PC 端预览效果

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

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

4.2 移动端预览效果

不支持移动端

5.1 示例一

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

点击下载模板：28-js实现超链接-动态参数.frm

5.2 示例二

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

点击下载模板：28-js实现超链接-当前表单对象.frm