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

  • 文档创建者:cherishdqy
  • 编辑次数:9次
  • 最近更新:Carly 于 2019-10-10
  • 1. 概述

    1.1 问题描述

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

    222

    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. 示例一:超链接-动态参数

    2.1 添加数据集查询

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

    222

    2.2 设计决策报表

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

    222

    2.3 添加点击事件

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


    参数
    sessionsessionID
    area华东


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

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

    参数
    sessionsessionID
    area华东

    222

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

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

    3.1 添加数据集查询

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

    222

    3.2 设计决策报表

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

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

    222

    饼图设置如下:

    222

    3.3 添加点击事件

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

    222
    JS 代码如下:

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

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

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

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

    4. 预览效果

    4.1 PC 端预览效果

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

    222

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

    222


    4.2 移动端预览效果

    不支持移动端

    5. 已完成模板

    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

    附件列表


    主题: 二次开发
    • 有帮助
    • 没帮助
    • 只是浏览