历史版本4 :JS实现控件和报表块联动 返回文档
编辑时间:
内容长度:图片数:目录数:
修改原因:
1. 描述编辑
用户想通过点击按钮实现单元格中超链接-动态参数的效果：
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": "华北" //参数area传递值“华北” }, 'T');
超链接-当前表单对象图表使用下面的js代码：
FR.Chart.WebUtils.changeParameter(
'chart0', {
"area": "华北" //参数area传递值“华北”
}
);
3. 示例一：超链接-动态参数编辑
3.1 添加数据集查询
新建一个决策报表，添加数据集ds1：
3.2 设计决策报表
在body中添加两个按钮控件，控件名称分别为华东、华北，添加一个报表块控件，将ds1数据集字段拖入单元格中，模板设计界面如下：
3.3 添加点击事件
选中华东按钮button0控件，添加点击事件，在点击事件的右上角添加两个参数：session和area，值分别为公式：sessionID、字符串：华东，如下图：
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的值改为华北。
保存模板，预览报表即可。
4. 示例二：超链接-当前表单对象编辑
4.1 添加数据集查询
新建一个决策报表，添加数据集ds1：
4.2 设计决策报表
在body中添加两个按钮控件button0、button1，控件名称分别为超链接-报表块、超链接-图表，添加一个报表块控件、一个饼图图表，将ds1数据集字段拖入单元格中，模板设计界面如下：
饼图设置如下：
4.3 添加点击事件
选中超链接-报表块按钮button0控件，添加点击事件，在点击事件的右上角添加参数：area，值为字符串：华北，如下图：
js代码如下：
_g().getWidgetByName('report0').gotoPage(1, {
"area": area
}, 'T');
选中超链接-图表按钮button1控件，添加点击事件，在点击事件的右上角添加参数：area，值为字符串：华北，如下图：
js代码如下：
FR.Chart.WebUtils.changeParameter(
'chart0', {
"area": area,
}
);
保存模板，预览报表即可。
5. 预览效果编辑
5.1 PC端预览效果
1）示例一：超链接-动态参数
2）示例二：超链接-当前报表对象
5.2 移动端预览效果
不支持移动端
6. 已完成模板编辑
已完成的模板，可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\28-js实现超链接-动态参数.frm