决策报表新自适应_JS使用

安装决策报表新自适应插件后，由于新自适应的前端采用新的 Canvas 进行绘制实现，不同于老自适应的渲染方式，决策报表支持的 JS 接口有所变化。

安装插件后，新自适应前端除了支持之前的一些接口外，又新增了一些接口，本文将列举新自适应支持的 JS 接口。

若您在使用中，发现所涉及到的决策报表 JS 接口在本文中未覆盖，可下方评论区留言或联系我司技术支持。

注1：新自适应下添加 JS 事件时，获取不到通过动态参数方式传递过来的参数值。

注2：新自适应获取组件时，推荐使用 _g().getWidgetByName('Component') 的方法获取。

2.1 获取组件

获取控件有两种方法，_g().getWidgetByName('Component') 和 this.options.form.getWidgetByName('Component')

前者能获取到报表中所有地方的组件，后者仅能获取当前容器内的组件。

如 this.options.form.getWidgetByName 写在参数面板里，就只能获取参数面板里的组件， 写在 body 里，就只能获取body 里的组件。

所以，推荐使用 _g().getWidgetByName('Component')。

1）获取当前容器内的组件

2）获取到报表中所有地方的控件

2.2 控件

2.2.1 获取控件

如何获取控件可参考 2.1 节内容。

2.2.2 控件方法

获取控件后，可对控件进行一些设置。对控件可执行的方法如下表，Widget 为获取的控件。

2.3 报表块和图表块

2.3.1 获取图表块或报表块

如何获取图表块和报表块可参考 2.1 节内容。

2.3.2 方法

2.4 Tab块

2.4.1 获取 tabpane 块

如何获取 tabpane 块可参考 2.1 节内容。

2.4.2 方法

2.5 刷新

2.6 其他

以下 JavaScript 语法相关的内容，可结合帆软提供的接口用在报表开发中。

利用_g().getWidgetByName('report1')获取到报表块后，即可对报表块内容做设置，如下为新增的控件方法。

3.1 单元格颜色变化

3.2 单元格所在行颜色变化

3.3 改变单元格所在行字体样式

3.4 改变单元格字体样式

3.5 报表块跑马灯

注：如果按照方案未实现跑马灯效果，可能是数据量未超过报表块高度导致的，可以将报表块高度调小。

3.6 隐藏报表块滚动条

注：如果按照方案未实现跑马灯效果，可能是数据量未超过报表块高度导致的，可以将报表块高度调小。

3.7 获取报表块当前页码数

3.8 获取报表块总页码数

3.9 隐藏 Tab 块的标题

3.10 隐藏参数面板

3.11 获取视图树叶子节点

3.12 鼠标悬浮显示提示框

3.13 跳转到指定组件位置

3.14 获取单元格值

3.15 给单元格赋值

3.16 隐藏某个 Tab 块

3.17 点击跳转超链接

3.18 视图树赋值时自动展开有值节点

3.19 获取控件

4.1 JS 隐藏决策报表块组件

报表中，通过点击按钮控件，实现隐藏和显示报表块或者图表块，详细内容可参考：JS实现隐藏决策报表组件

4.2 JS 实现改变控件透明度

报表中控件颜色和报表背景不一致时，可以设置控件的透明度，使控件能够融入背景。详细内容可参考：JS实现改变控件透明度

4.3 JS 实现鼠标滑过时报表块单元格行样式改变

决策报表中，当鼠标滑过报表块单元格行时，可以显示不同的样式，如鼠标滑过时单元格行字体变红。新自适应提供了鼠标滑动时单元格样式变化的接口，可参考 3.1-3.2 节接口内容，给报表块添加「初始化后」事件实现。

点击下载示例：（新）JS实现决策报表报表块鼠标所在单元格或行的样式.frm

4.4 JS 隐藏报表块滚动条

当报表块内容过多时，会出现滚动条，如何隐藏不美观的滚动条，且可以通过鼠标滚轮上下滚动内容呢？

新自适应提供了全新的隐藏滚动条的接口，可参考 3.6 节接口内容，为报表块添加「初始化后」事件实现。

点击下载示例：（新）JS实现报表块隐藏滚动条.frm

4.5 JS 实现决策报表中滚屏/跑马灯效果

报表页面上放置很多图表时，由于内容过多，超出了浏览器窗口的大小导致内容展示不全，这时可以使用滚屏或跑马灯来实现内容全部展示。

新自适应提供了全新的跑马灯接口，可参考 3.5 节接口内容，为报表块添加「初始化后」事件实现。

点击下载示例：（新）报表块实现跑马灯效果.frm   （新）鼠标悬停实现多个报表块跑马灯停止滚动.frm

4.6 JS 实现决策报表中点击标题排序

点击某一列标题改变排序、多列动态排序 文档中实现了报表动态排序，即根据参数值的不同来决定报表按某列升序还是降序排列，也可以利用 JS 来实现此效果。详细内容可参考：JS实现决策报表中点击标题排序

4.7 自动轮播数据点提示时联动其他图表

地图自动播放数据点提示时，可以联动其他图表。详细内容可参考：自动轮播数据点提示时联动其他图表

4.8 JS 实现点击跳转页面和定时跳转页面

报表制作中，点击一个报表块时跳转到另一个报表，甚至携带参数的跳转，如何实现呢？详细内容可参考：JS实现点击跳转页面和定时跳转页面

4.9 JS 实现决策报表中网页框相互刷新

决策报表中添加两个网页框后，对其中一个网页框中的报表操作，可以刷新另一个网页框中的报表，比如点击A网页框报表中的按钮，可以刷新B网页框中报表。详细内容可参考：JS实现决策报表中网页框相互刷新

注：示例  2.1 节中，如下代码不适用于新自适应。

var parent = window.parent;
var iframe = parent.document.getElementById('RHIFRAME1');//RHIFRAME1是决策报表中需要刷新的网页框名称的大写
iframe.contentWindow.location.reload(true);

4.10 JS 实现决策报表定时刷新

用决策报表做的大屏或板，展示时需要定时刷新的效果。该如何实现呢？详细内容可参考：JS实现决策报表定时刷新

4.11 JS 实现暂停和继续轮播报表

在大屏上展示报表时，有时会让多张大屏报表轮播，在特定的情况下停止轮播。如两张报表轮播，当鼠标移入报表时，停止轮播。详细内容可参考：JS实现暂停和继续轮播报表

4.12 JS 实现点击报表全屏显示

鼠标点击决策报表主体，报表全屏显示；再点击，恢复为原来的样子，和键盘按 F11 让报表达到全屏的效果一致。详细内容可参考：JS实现点击报表实现全屏效果

4.13 JS 实现点击查询后停留在当前查询的 Tab 页

决策报表中多 Tab 时，点击查询后，不自动跳转到第一个 Tab 页，还是在用户当前选定 Tab 页。详细内容可参考：JS 实现点击查询后停留在当前查询的 Tab 页

4.15 JS 实现报表按钮获取报表块的页码

决策报表中添加报表块，报表块内容分页时，如何获取到报表块中的页码数呢。新自适应提供了获取报表块当前页码的接口，可参考 3.7 节接口内容，通过添加事件实现。如为按钮控件添加「点击」事件，从而实现点击按钮获取报表块当前页码。

点击下载示例：（新）JS实现报表按钮获取报表块的页码数.frm

4.16 JS 实现点击超链切换 Tab 块

用户通过点击报表块单元格的超级链接，实现 Tab 块的切换。给单元格添加「超级链接>JavaScript 脚本」实现。

点击下载示例：（新）JS实现点击超链切换TAB页.frm

4.17 JS实现倒计时特效

地产、零售、电子商务等大屏制作时，经常会有倒计时的需求，例如：营销作战倒计时，零售促销倒计时等，要如何实现呢？详细内容可参考：JS实现倒计时特效

4.18 JS实现隐藏 Tab 块标题

自定义设置 Tab 块的展现与隐藏，如设计界面有 3 个 Tab 块，预览时隐藏一个 Tab块 ，只展示 2 个 Tab块，该如何实现呢？可以通过给 tabpane 块添加「初始化后」事件实现。

点击下载示例：（新）JS实现隐藏全部tab块标题-示例一.frm （新）JS实现隐藏部分tab块标题-示例二.frm

4.19 JS 实现报表按钮控件取到其他控件值

在使用决策报表的过程中，可能会遇到添加一个按钮，然后需要这个按钮取到其他的值，该如何实现呢？通过给按钮控件添加「点击」事件实现。

点击可下载示例：（新）JS获取和设置报表块单元格的值.frm

4.20 JS 实现获取参数面板控件值

在设计决策报表时，需要通过决策报表主体的按钮控件或者报表块的超链接获取参数面板的控件值，该如何实现呢？详细内容可参考：JS实现获取参数面板控件值

4.21 JS 实现决策报表中 Tab 块轮播

对于多 Tab 的决策报表，实现固定时间间隔内自动循环跳转，可以使用 Tab 轮播功能，也可以通过添加 JS 实现。详细内容可参考：JS实现决策报表中Tab块轮播

4.22 JS 隐藏正在加载图标与文字

决策报表定时刷新时、我们可以通过添加 JS 来实现刷新效果。刷新过程中，不显示加载图标，要如何实现呢？通过给 body 添加「初始化后」事件实现。详细内容可参考：JS隐藏正在加载图标与文字

4.23 JS 实现报表块数据变化后刷新联动的图表块

决策报表中同时具有报表块和图表块时，图表块数据来源于报表块，如果想要实现报表块数据发生变化后，联动的图表块也会自动刷新，要怎么做呢？给图表块添加 JS，使用 c.dataRefresh() 图表刷新接口，实现报表块数据改变后刷新图表。详细内容可参考：JS实现报表块数据变化后刷新联动的图表块

4.24 JS 实现切换 Tab 后显示/隐藏参数面板上的控件

决策报表中具有多个 Tab 和参数面板时，当需要切换至某个 Tab 块时，参数面板中的部分参数要隐藏，该如何实现呢？可以通过给 tabpane 块添加「Tab切换事件」实现。

点击下载模板：（新）JS实现切换tab显示或隐藏参数面板上的控件.frm

4.25 JS 实现决策报表参数界面自动查询

决策报表中添加参数面板后，实现控件选择或编辑值后不点击按钮直接查询数据，呈现报表。详细内容可参考：JS实现决策报表参数界面自动查询

4.26 JS 实现在参数界面获取控件的值

使用决策报表的时候，有时会用到在决策报表参数面板获取报表控件的值，那么该如何实现呢？详细内容可参考：JS实现在报表参数界面获取控件的值

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

在决策报表中，通过点击按钮给报表中报表块或图表块传递参数，类似于在普通报表单元格中添加「超链接>动态参数」实现的效果。详细内容可参考：JS 实现点击按钮实现超链接功能

4.28 日历组件增加翻页功能

帆软商城中的日历组件只能显示当前月的日期，实际应用中需要有一个翻页的效果，来实现自由选择日期。详细内容可参考：日历组件增加翻页功能

4.29 JS 实现控件融入背景

决策报表深色背景下，控件原本的白色显得很刺眼，如何将控件背景修改成与主体背景颜色一致呢，效果如下图所示：

1）新建模板，添加控件，设计好背景。

2）新建 CSS 文件 style1.css，放置在报表工程 %FR_HOME%\webapps\webroot\help\css 下。

点击下载 style1.css 文件：style1.css

3）引用 CSS 文件，为 body 添加「初始化后」事件，事件内容为：

$('<link rel="stylesheet" type="text/css" href="/webroot/help/css/style1.css"/>').appendTo('head');

4）保存模板，点击预览。

点击下载模板：（新）控件融入背景.frm

5）如上示例为控件和弹窗设置的背景不统一，若控件和弹窗背景需要设置统一，CSS 文件为：custom.css

点击下载模板：（新）控件融入背景（控件和弹窗一起）.frm

4.30 决策报表按钮查询最近日期的数据

决策报表查询指定区间日期数据时，希望可以通过点击按钮( 不在参数面板 )查询到最近的数据，例如：近7天、近14天等等。详细内容可参考：决策报表按钮查询最近日期的数据

4.31 决策报表控件实现点击查询按钮后才能查询

决策报表 body 中添加一个按钮控件，设置成查询按钮，点击后才能触发查询。详细内容可参考：决策报表按钮查询最近日期的数据

注：新自适应，参考文档内容添加事件时，需要将事件类型改成「编辑结束」事件。

点击下载模板：（新）决策报表控件实现点击查询按钮后才能查询.frm

4.32 JS 实现大屏旋转星空背景

大屏场景下给决策报表添加一个酷炫的旋转星空效果，效果可参考：JS实现大屏旋转星空背景。新自适应需要修改 JS 代码，代码内容为：

function background() {
	$(".content-container").append('<canvas id="canvas"></canvas>');
	//在body中插入canvas画布，并置于底层
	var canvas = document.getElementById('canvas'),
		ctx = canvas.getContext('2d'),
		w = canvas.width = window.innerWidth,
		h = canvas.height = window.innerHeight,
		hue = 217,
		stars = [],
		count = 0,
		maxStars = 1000;
	//设置星星数量
	var canvas2 = document.createElement('canvas'),
	ctx2 = canvas2.getContext('2d');
	canvas2.width = 100;
	canvas2.height = 100;
	var half = canvas2.width / 2,
        gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);
	gradient2.addColorStop(0.025, '#fff');
	gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');
	gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');
	gradient2.addColorStop(1, 'transparent');
	ctx2.fillStyle = gradient2;
	ctx2.beginPath();
	ctx2.arc(half, half, half, 0, Math.PI * 2);
	ctx2.fill();

	function random(min, max) {
		if (arguments.length < 2) {
			max = min;
			min = 0;
		}
		if (min > max) {
			var hold = max;
			max = min;
			min = hold;
		}
		return Math.floor(Math.random() * (max - min + 1)) + min;
	}

	var Star = function() {
		this.orbitRadius = random(w / 2 - 50);
		this.radius = random(100, this.orbitRadius) / 10;
		this.orbitX = w / 2;
		this.orbitY = h / 2;
		this.timePassed = random(0, maxStars);
		this.speed = random(this.orbitRadius) / 200000;
		//设置旋转速度
		this.alpha = random(2, 10) / 10;
		count++;
		stars[count] = this;
	}

	Star.prototype.draw = function() {
		var x = Math.sin(this.timePassed + 1) * this.orbitRadius + this.orbitX,
			y = Math.cos(this.timePassed) * this.orbitRadius / 2 + this.orbitY,
			twinkle = random(10);
		if (twinkle === 1 && this.alpha > 0) {
			this.alpha -= 0.05;
		} else if (twinkle === 2 && this.alpha < 1) {
			this.alpha += 0.05;
		}
		ctx.globalAlpha = this.alpha;
		ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);
		this.timePassed += this.speed;
	}
	for (var i = 0; i < maxStars; i++) {
		new Star();
	}

	function animation() {
		ctx.globalCompositeOperation = 'source-over';
		ctx.globalAlpha = 0.8;
		ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 1)';
		ctx.fillRect(0, 0, w, h)
		ctx.globalCompositeOperation = 'lighter';
		for (var i = 1, l = stars.length; i < l; i++) {
			stars[i].draw();
		};
		window.requestAnimationFrame(animation);
	}
	animation();
}
background();
$(window).resize(function() {
	background();
})

点击可下载模板：大屏旋转星空背景图.frm

4.33 JS实现参数面板自动隐藏与显示

报表自带的参数面板默认是显示的，如果想隐藏，需要点击参数面板下面的小三角图标，如何实现在初始化时自动隐藏参数面板，鼠标移动在参数面板上时恢复参数面板。

可参考 3.10 节接口，给参数面板添加「初始化后」事件实现。

点击下载模板：（新）JS隐藏参数面板.frm

4.34 JS 实现清空控件内容

在使用查询控件时，有时希望能够快捷重置控件的内容，或者重置所有控件的内容，效果如：JS实现清空控件内容 所示。

决策报表中按钮控件「点击」事件内容如下：

$.each(this.options.form.name_widgets, function(i, item) {
if(item.options.xtype !== 'label')

{ item.setValue(""); //item.setText(""); //item.reset(); }

});

/*
//移动端
this.options.form.getWidgetByName("categoryID").reset(); //重置产品类别
this.options.form.getWidgetByName("supplierID").reset(); //重置供应商
this.options.form.getWidgetByName("pay").reset(); //重置订单支付状态
this.options.form.getWidgetByName("start").reset(); //重置起始日期
this.options.form.getWidgetByName("end").reset(); //重置结束日期
*/

点击下载模板：（新）JS清空(重置)条件-示例二.frm

4.35 JS 实现决策报表内报表块局部刷新/翻页

刷新报表里的报表块，报表里的报表块实现跳转到指定页，可通过给报表块添加 JS 事件实现，详细内容可参考：JS实现决策报表内报表块局部刷新/翻页

4.36 JS 实现根据日周月切换日期控件查询格式

FineReport 中日期控件只能以「年月日」这样的顺序来选择某一个具体日期。可以通过 JS 代码实现切换日期控件的查询方式进而快速查询。如下图所示：

1）新建模板，添加三个按钮控件，四个日期控件，一个标签控件，一个查询按钮控件。

2）控件设置默认值，详细内容见模板。

3）给日报、周报、月报和查询按钮分别添加点击事件，事件内容见模板。

4）设置报表样式，保存后预览效果。

点击下载模板：（新）JS实现根据日周月切换日期控件查询格式.frm

4.37 JS 实现动态隐藏参数以及控制参数面板高度

当参数面板中参数控件较多时，可以对一些不常用、不需要展现出来的的控件进行隐藏，当需要展示的时候再使其展示出来。详细内容可参考：JS 实现动态隐藏参数以及控制参数面板高度 

点击可下载决策报表模板：21-JS实现动态隐藏参数以及控制参数面板高度.frm

4.38 JS 实现自定义导出文件名称

FR 虽然有内置的导出按钮，但是导出名称不能自定义，如果想要自定义导出文件名称，那么该如何实现呢？详细内容可参考：JS实现自定义导出文件名称

点击可下载决策报表模板：

11-JS实现自定义导出文件名称-方法二.frm 11-JS实现自定义导出文件名称-方法一.frm

4.39 JS 实现参数控件赋值

参数界面中，通过一个控件给另一个控件赋值。详细内容可参考：JS实现参数控件赋值

点击可下载决策报表模板：15-JS实现参数控件赋值.frm

4.40 JS 根据条件控制参数控件是否显示/可用

参数界面中，部分参数控件在没满足条件时不显示，满足条件后再显示。详细内容可参考：JS根据条件控制参数控件是否显示/可用

点击可下载决策报表模板：16-JS根据条件控制参数控件是否显示(可用).frm

4.41 JS 实现日期控件校验

参数查询时，可以对控件值做一些简单校验，当需要一些复杂校验时，设计器自带的校验规则就无法满足了。可通过添加 JS实现。详细内容可参考：JS实现日期控件校验

点击可下载决策报表模板：18-JS实现日期控件校验.frm

4.42 自定义导出按钮

FineReport 支持多种不同的导出方式，但是在 Web 页面集成 中，用户往往只想将报表内容嵌入到 iframe 中，而工具栏以及工具栏上的按钮都会隐藏掉，用户可以通过 Web 页面自定义按钮实现导出。详细内容可参考：自定义导出按钮

4.43 JS 实现一些炫酷背景

大屏场景下，可以通过 JS 给报表添加一些炫酷背景。如星空、旋转、网格等，详细可参考以下内容：JS实现粒子漩涡背景、

JS实现粒子穿梭背景、JS实现动态波浪背景、JS实现粒子上浮背景

4.44 JS实现一些特殊效果

决策报表中，可以通过 JS 实现一些特殊的效果，如时钟、旋转木马等。详细内容可参考：JS实现时钟效果、利用JS制作旋转木马效果

点击可下载决策报表模板：js实现时钟效果.frm