Finereport怎么加JS？，实现步骤有哪些？

Finereport 中 JavaScript 的常见应用场景

FineReport 是一款强大的报表工具，开放了丰富的 JavaScript 接口，可以通过 JS 实现参数联动、动态控制控件、图表交互、自定义事件等功能，下面从几个主要方向详细介绍。

参数界面与控件操作

在参数面板中,通过 JS 可以动态获取、设置控件值，切换可见性，改变控件样式，甚至实现复杂的联动逻辑。

• 获取控件值：this.options.form.getWidgetByName("控件名").getValue()
• 设置控件值：this.options.form.getWidgetByName("控件名").setValue("新值")
• 控件可见性：this.options.form.getWidgetByName("控件名").setVisible(true/false)
• 控件可用性：this.options.form.getWidgetByName("控件名").setEnabled(true/false)

示例：级联下拉框

假设有两个下拉框“省份”和“城市”，当省份改变时，城市的内容动态更新，可以在“省份”控件的“编辑后事件”中写入 JS：

var province = this.getValue(); // 根据省份值动态设置城市数据字典 var cityWidget = this.options.form.getWidgetByName("城市"); if (province == "广东") { cityWidget.setOptions(["广州", "深圳", "珠海"]); } else if (province == "浙江") { cityWidget.setOptions(["杭州", "宁波", "温州"]); } else { cityWidget.setOptions([]); }

报表块交互

在报表块（cpt）或决策报表（frm）的单元格中，可以绑定事件（如点击、双击、鼠标移入等），通过 JS 实现单元格内容的动态变化、弹出对话框、跳转其他页面等。

• 单元格点击事件：在单元格属性-事件-点击事件中编写 JS。
• 获取当前单元格值：var val = this.getValue();
• 获取单元格对象：var cr = this.options.location; 或使用 FR.cellPrinter 等 API。

  高亮示例

  在单元格的“点击事件”中，实现行列背景色变化：

var cr = this.options.location; // 获取当前行所有单元格并设置背景色 for (var i = 0; i < cr.colCount; i++) { var cell = cr.getCell(i); cell.setBackground("#FFFF00"); }

图表交互与自定义

FineReport 图表支持通过 JS 绑定事件，例如点击柱状图弹出明细、动态改变图表数据、切换图表类型等。

• 图表点击事件：在图表数据点-超链接-事件中写入 JS（或通过图表属性-特效-交互事件）。
• 获取图表对象：var chart = FR.Chart.WebUtils.getChart("chart0").getChart();
• 刷新图表数据：chart.setSeriesData(newData);

图表点击钻取示例

在柱状图数据点点击事件中，传递点击的系列名称和分类名称到另一张报表或执行 JS 查询：

var seriesName = this.seriesName; var categoryName = this.categoryName; // 打开新标签页，传递参数 window.open("/report?format=pdf&series=" + seriesName + "&category=" + categoryName);

使用超链接与 JS 事件

FineReport 的超链接支持“JavaScript 脚本”，可以执行任意 JS 代码，常用于控制报表跳转、自定义弹窗、调用外部系统等。

• 普通超链接 JS：在单元格或图表中设置超链接类型为“JavaScript 脚本”，写入代码。
• 参数传递：通过 _g 或 FR 对象获取当前报表参数。

弹出信息框示例：

FR.showMsg("提示信息", "操作成功！");

打开新窗口传递参数：

var value = _g().getParameter("参数名"); window.open("http://www.baidu.com?param=" + value);

报表加载完成与事件

在报表加载完成后,可以执行初始化 JS，例如设置默认值、隐藏某些元素、调用外部接口等。

• 事件位置：在决策报表的“报表块”或“组件”的“初始化后”事件；在普通报表的“报表属性-事件-加载结束”事件。
• 常用 API：_g().getWidgetByName("控件名")、FR.Chart.WebUtils.getChart("chart0")。

示例：报表加载后自动隐藏某一列：

setTimeout(function() { // 隐藏列索引为2的列（第三列） _g().setColWidth(2, 0); }, 100);

常用 JS API 表格

注意事项与调试

• JS 执行环境：FineReport 的 JS 运行在浏览器端，所有 API 需在报表加载完成后才可用，setTimeout 或 setInterval 常用于延时执行。
• 调试方法：在浏览器开发者工具中，使用 console.log() 输出变量，或使用 alert() 简化调试。
• 版本差异：不同 FineReport 版本（如 10.0、11.0）部分 API 有变化，应参考对应版本的帮助文档。

相关问题与解答

在 FineReport 参数面板中，如何通过 JS 实现多个下拉框的联动，且联动过程中不触发报表查询？

解答：

在第一个下拉框的“编辑后事件”中写入 JS，动态设置第二个下拉框的选项，并在设置完成后使用 setTimeout 延迟执行，避免立即查询，可以在第二个下拉框的“初始化后事件”中设置初始值，关键代码：

// 省份下拉框编辑后事件 var province = this.getValue(); var cityWidget = this.options.form.getWidgetByName("城市"); cityWidget.setOptions(["选项A", "选项B", "选项C"]); // 避免自动查询，需要将参数面板的“点击查询前不自动查询”选项勾选（或设置延迟） // 如果需要阻止自动查询，可以设置一个全局变量标识

在参数面板的属性中,将“点击查询前不自动查询”勾选，这样手动点击“查询”按钮才会触发报表数据刷新。

如何在 FineReport 图表中通过 JS 实现，点击柱状图时弹出一个包含该柱状图详细信息的对话框？

解答：

在图表数据点的“点击事件”中（或通过超链接-JavaScript脚本），编写如下代码：

var seriesName = this.seriesName; // 系列名 var categoryName = this.categoryName; // 分类名 var value = this.value; // 当前值 var detail = "系列：" + seriesName + "n分类：" + categoryName + "n数值：" + value; FR.showMsg("详细数据", detail);

如果需要更复杂的对话框,可以使用 FR.confirm 或自定义弹窗，注意：图表事件中的 this 指向当前数据点对象，包含系列名、分类名、值等属性。