API for Modifying Cell Background-FineReport Help Document

Last update：February 10, 2022

addEffect

Method	addEffect(type, opts)	When the mouse is clicked or hovered, the background color of the cell or row and column changes
Parameter	type: string, opts: { color: string, trigger: string， single: boolean }	type：Color change type, string highlightRow：The row of the cell changes color when the mouse is clicked/hovered highlightCol：The column of the cell changes color when the mouse is clicked/hovered highlightCross：The row and column of the cell changes color when the mouse is clicked/hovered highlightCell：The cell changes color when the mouse is clicked/hovered opts：Changes attributes，json format 1）color: Changing colors, color codes, strings 2）trigger: Mouse operation, string, default is mouse hover mouseover ：Mouse hover mousedown：Mouse click 3）single：Restore logic, boolean, default true true：Restored when the mouse clicks/hovers elsewhere false：Restore when the mouse clicks/hovers this position again
Return value	void
Example	Refer to example chapter
Application example	When the mouse hovers over the cell, the row is displayed in red, and it is restored when the mouse leaves: See the Examples section for more examples.
Mobile	Support mobile terminal

The following content is an example of the interface, divided into the color of the row of the cell changes, the color of the column of the cell changes, the color of the row and column of the cell changes, and the color of the cell changes, which correspond to the four values of the type parameter respectively.

I. The color of the row of the cell changes

When the value of the first parameter type of addEffect is highlightRow, the mouse clicks or hovers the cell, and the background color of the row where the cell is located changes.

1. Code example

Example 1: If the obtained report object is defined as report , the background of the row where the mouse hovers over the cell is displayed in red, and it is restored when left.

report.addEffect('highlightRow',{
	color: 'red',
	trigger: 'mouseover',
});

Example 2: If the obtained report object is defined as report , the background of the row where the mouse clicks on the cell is displayed in red, click again to restore.

report.addEffect('highlightRow',{
	color: 'red',
	trigger: 'mousedown',
	single:false
});

Example 3: In a general report, when the mouse hovers over a cell, the background of the row is displayed in red, and it is restored when left.

_g().addEffect('highlightRow', {
	color: 'red',
	trigger: 'mouseover',
});

Example 4: In a general report, when the mouse clicks on a cell, the background of the row is displayed in red, click again to restore.

_g().addEffect('highlightRow',{
	color: 'red',
	trigger: 'mousedown',
	single:false
});

Example 5: In the dashboard, when the mouse hovers the report0 report block cell, the background of the row is displayed in red, and it is restored when left.

_g().getWidgetByName('report0').addEffect('highlightRow', {
	color: 'red',
	trigger: 'mouseover',
});

Example 6: In the dashboard, when the mouse clicks the report0 report block cell, the background of the row is displayed in red, click again to restore.

_g().getWidgetByName('report0').addEffect('highlightRow', {
	color: 'red',
	trigger: 'mousedown',
	single: false
});

2. Application example

Example 1: When the mouse hovers over the cell, the background color of the row is displayed in red, and it is restored when left。

Click to download the template:

The color of the row of the cell changes.cpt

Example 2: When the mouse clicks on the cell, the background color of the row is displayed in red, click again to restore。

Click to download the template:

The row where the cell is located changes color and clicks to restore.cpt

II. The color of the column of the cell changes

When the first parameter type value of addEffect is highlightCross, the mouse clicks or hovers the cell, and the background color of the column where the cell is located changes.

1. Code example

Example 1: If the obtained report object is defined as report , the background color of the column where the mouse is hovering over the cell is displayed in red, and restored when leaving the cell.

report.addEffect('highlightCol',{
	color: 'red',
	trigger: 'mouseover',
});

Example 2: If the obtained report object is defined as report , the background color of the column where the mouse is clicked on the cell is displayed in red, and click again to restore.

report.addEffect('highlightCol',{
	color: 'red',
	trigger: 'mousedown',
	single:false
});

Example 3: In a general report, when the mouse hovers over a cell, the background color of the column where it is located is displayed in red, and it is restored when left.

_g().addEffect('highlightCol', {
	color: 'red',
	trigger: 'mouseover',
});

Example 4: In a general report, when the mouse clicks on a cell, the background color of the column is displayed in red, click again to restore.

_g().addEffect('highlightCol',{
	color: 'red',
	trigger: 'mousedown',
	single:false
});

Example 5: In the dashboard, when the mouse hovers the report0 report block cell, the background color of the column where it is located is displayed in red, and it is restored when left

_g().getWidgetByName('report0').addEffect('highlightCol', {
	color: 'red',
	trigger: 'mouseover',
});

Example 6: In the dashboard, when the mouse clicks the report0 report block cell, the background color of the column is displayed in red, click again to restore.

_g().getWidgetByName('report0').addEffect('highlightCol', {
	color: 'red',
	trigger: 'mousedown',
	single: false
});

2. Application example

Example 1: When the mouse hovers over a cell, the background color of the column where it is located is displayed in red, and it is restored when leaving it.

Click to download the template:

The color of the column of the cell changes.cpt

Example 2: When the mouse clicks on the cell, the background color of the column is displayed in red, click again to restore.

Click to download the template:

The column where the cell is located changes color and clicks to restore.cpt

III. The color of the row and column of the cell changes

When the first parameter type value of addEffect is highlightCross, the mouse clicks or hovers the cell, and the background color of the row and column where the cell is located changes.

1. Code example

Example 1: If the obtained report object is defined as report , the background color of the row and column where the mouse is hovering over the cell is displayed in red, and restored when leaving the cell.

report.addEffect('highlightCross',{
	color: 'red',
	trigger: 'mouseover',
});

Example 2: If the obtained report object is defined as report , the background color of the row and column where the mouse is clicked on the cell is displayed in red, click again to restore.

report.addEffect('highlightCross',{
	color: 'red',
	trigger: 'mousedown',
	single:false
});

Example 3: In a general report, when the mouse hovers over a cell, the background color of the row and column where it is located is displayed in red, and it is restored when left.

_g().addEffect('highlightCross', {
	color: 'red',
	trigger: 'mouseover',
});

Example 4: In a general report, when the mouse clicks on a cell, the background color of the row and column is displayed in red, click again to restore.

_g().addEffect('highlightCross',{
	color: 'red',
	trigger: 'mousedown',
	single:false
});

Example 5: In the dashboard, when the mouse hovers the report0 report block cell, the background color of the row and column where it is located is displayed in red, and it is restored when left.

_g().getWidgetByName('report0').addEffect('highlightCross', {
	color: 'red',
	trigger: 'mouseover',
});

Example 6: In the dashboard, when the mouse clicks the report0 report block cell, the background color of the row and column is displayed in red, click again to restore.

_g().getWidgetByName('report0').addEffect('highlightCross', {
	color: 'red',
	trigger: 'mousedown',
	single: false
});

2. Application example

Example 1: When the mouse hovers over a cell, the background color of the row and column where it is located is displayed in red, and it is restored when left.

Click to download the template:

The color of the row and column of the cell changes.cpt

Example 2: When the mouse clicks on the cell, the background color of the row and column is displayed in red, click again to restore.

Click to download the template:

The row and column where the cell is located changes color and clicks to restore.cpt

IV. The color of the cell changes

When the first parameter type value of addEffect is highlightCell, the background color of the cell changes when the mouse clicks or hovers over the cell.

1. Code example

Example 1: If the obtained report object is defined as report , the background color of the cell is displayed as red when the mouse hovers over the cell, and it is restored when left.

report.addEffect('highlightCell',{
	color: 'red',
	trigger: 'mouseover',
});

Example 2: If the obtained report object is defined as report , when the mouse clicks the cell, the background color of the cell is displayed in red, and click again to restore.

report.addEffect('highlightCell',{
	color: 'red',
	trigger: 'mousedown',
	single:false
});

Example 3: In a general report, the background color of the cell is displayed in red when the mouse hovers over the cell, and it is restored when left.

_g().addEffect('highlightCell', {
	color: 'red',
	trigger: 'mouseover',
});

Example 4: In a general report, when the mouse clicks on the cell, the background color of the cell is displayed in red, and click again to restore.

_g().addEffect('highlightCell',{
	color: 'red',
	trigger: 'mousedown',
	single:false
});

Example 5: In the dashboard, when the mouse hovers the report0 report block cell, the background color of the cell is displayed in red, and it is restored when left.

_g().getWidgetByName('report0').addEffect('highlightCell', {
	color: 'red',
	trigger: 'mouseover',
});

Example 6: In the dashboard, when the mouse clicks the report0 report block cell, the cell background color is displayed in red, click again to restore.

_g().getWidgetByName('report0').addEffect('highlightCell', {
	color: 'red',
	trigger: 'mousedown',
	single: false
});

2. Application example

Example 1: The background color of the cell is displayed in red when the mouse hovers over the cell, and it is restored when left.

Click to download the template:

The color of the cell changes and restore when mouse left.cpt

Example 2: When the mouse clicks on the cell, the background color of the cell is displayed in red, click again to restore.

Click to download the template:

The color of the cell changes and restore when mouse click.cpt

Previous：API for Hiding Scroll Bar

Next：Marquee API

Helpful
Not helpful
Only read

中文（简体）中文（繁體）日本語

English

API for Modifying Cell Background

addEffect

I. The color of the row of the cell changes

1. Code example

2. Application example

II. The color of the column of the cell changes

1. Code example

2. Application example

III. The color of the row and column of the cell changes

1. Code example

2. Application example

IV. The color of the cell changes

1. Code example

2. Application example

Attachment List