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

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

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


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

 

1. 描述

 

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

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": "华北" }, 'T'); //参数area传递值“华北”

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

FR.Chart.WebUtils.changeParameter(

               'chart0', {

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

               }

);

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

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

 

 

3.1 添加数据集查询

 

新建一个决策报表,添加数据集ds1:

JS 实现点击按钮实现超链接功能_第2张图片

 

3.2 设计决策报表

 

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

JS 实现点击按钮实现超链接功能_第3张图片

3.3 添加点击事件

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

 

JS 实现点击按钮实现超链接功能_第4张图片
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的值改为华北。
JS 实现点击按钮实现超链接功能_第5张图片

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

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

 

 

4.1 添加数据集查询

 

新建一个决策报表,添加数据集ds1:

JS 实现点击按钮实现超链接功能_第6张图片

 

4.2 设计决策报表

 

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

JS 实现点击按钮实现超链接功能_第7张图片

饼图设置如下:

JS 实现点击按钮实现超链接功能_第8张图片

4.3 添加点击事件

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

JS 实现点击按钮实现超链接功能_第9张图片
js代码如下:

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

               "area": area

}, 'T');

选中超链接-图表按钮button1控件,添加点击事件,在点击事件的右上角添加参数:area,值为字符串:华北,如下图:
JS 实现点击按钮实现超链接功能_第10张图片
js代码如下:

FR.Chart.WebUtils.changeParameter(

               'chart0', {

                               "area": area,

               }

);

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

 

5. 预览效果

 

 

5.1 PC端预览效果

 

1)示例一:超链接-动态参数

JS 实现点击按钮实现超链接功能_第11张图片

2)示例二:超链接-当前报表对象

JS 实现点击按钮实现超链接功能_第12张图片

 

5.2 移动端预览效果

 

不支持移动端

 

6. 已完成模板

示例一:

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

右击存储模板 

示例二:

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

右击存储模板

 

标签: 暂无标签 编辑/添加标签

 

你可能感兴趣的:(帆软,帆软,超链接,JS)