API for Modifying Cell Font-FineReport Help Document

Last update： 2022-02-11

addEffect

Method	addEffect(type, opts)	When the mouse is clicked or hovered, the font of the cell or row changes
Parameter	type: string, opts: { style: { bold: boolean， italic: boolean， fontFamily: string， strikeThrough: boolean， fontSize: number， subscript: boolean， underLine: { style: string， color: number }， textShadow: boolean， supscript: boolean， color: number }， trigger: string， single: boolean }	type：Changes range, string setCellFont：Cell font change on mouse click/hover setRowFont：The font of the row where the cell is located changes when the mouse is clicked/suspended opts：Changes attributes，json format 1）style: Font format，json format bold: Bold or not, true is bold, false is normal italic: Italic or not, true is italic, false is normal fontFamily: Font, string strikeThrough：Whether to have strikethrough, true yes, false no fontSize: Font size，number subscript: Whether to display on top, true yes, false no underLine: Underline style, json format style: Linetype, string, solid line, dashed dashed line color: Number color, hexadecimal color code textShadow: Whether the text has shadow effect, true is, false is not supscript: Whether to display down, true yes, false no color: Number font color, hexadecimal color code 2）trigger: Mouse operation, the default is mouse hover when not writing 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 font is displayed in red and bold 14, and it is restored when you leave: See the Examples section for more examples.
Mobile	Support mobile terminal

The following content is an example of the interface. The font change of the cell and the font change of the row where the cell is located correspond to the two values of the type parameter respectively.

I. Cell font change

When the first parameter type of addEffect is setCellFont, the cell font format changes when the mouse clicks or hovers over the cell.

1. Code example

Example 1: If the obtained report block object is defined as report , the font will be displayed in red and bold 14 when the mouse is hovered, and it will be restored when left.

report.addEffect('setCellFont', {
	style: {
		bold: true,
		fontSize: 14,
		color: 'red'
	},
	trigger: 'mouseover',
	single: true
});

Example 2: If the obtained report block object is defined as report , when the mouse clicks on the cell, the font will be displayed in red and bold 14, and it will be restored when clicked again.

report.addEffect('setCellFont', {
	style: {
		bold: true,
		fontSize: 14,
		color: 'red'
	},
	trigger: 'mousedown',
	single: false
});

Example 3: In a general report, when the mouse hovers over a cell, the font is displayed in red and bold 14, and it is restored when left.

_g().addEffect('setCellFont', {
	style: {
		bold: true,
		fontSize: 14,
		color: 'red'
	},
	trigger: 'mouseover',
	single: true
});

Example 4: In a general report, when the mouse clicks on a cell, the font is displayed in red and bold 14, and it is restored when clicked again.

_g().addEffect('setCellFont', {
	style: {
		bold: true,
		fontSize: 14,
		color: 'red'
	},
	trigger: 'mousedown',
	single: false
});

Example 5: In the dashboard, when the mouse hovers over the cell, the font is displayed in red and bold 14, and it is restored when left.

_g().getWidgetByName('report0').addEffect('setCellFont', {
	style: {
		bold: true,
		fontSize: 14,
		color: 'red'
	},
	trigger: 'mouseover',
	single: true
});

Example 6: In the dashboard, when the mouse clicks on the cell, the font is displayed in red and bold 14, and it is restored when clicked again.

_g().getWidgetByName('report0').addEffect('setCellFont', {
	style: {
		bold: true,
		fontSize: 14,
		color: 'red'
	},
	trigger: 'mousedown',
	single: false
});

2. Application example

Example 1: When the mouse clicks on the cell, the font is displayed in red and bold 14, and it is restored when lea。ving

Click to download the template:

Cell font changes when the mouse is hovered.cpt

Example 2: When the mouse clicks on the cell, the font is displayed in red and bold 14, and it is restored when clicked again.

Click to download the template:

Cell font changes when the mouse is clicked.cpt

II. The font of the row where the cell is located changes

When the type value of the first parameter of addEffect is setRowFont, the mouse clicks or hovers the cell, and the font format of the row where the cell is located changes.

1. Code example

Example 1: If the obtained report block object is defined as report , when the mouse hovers over the cell, the font of the row where it is located will be displayed in red and bold 14, move to another row to restore.

report.addEffect('setRowFont', {
	style: {
		bold: true,
		fontSize: 14,
		color: 'red'
	},
	trigger: 'mouseover',
	single: true
});

Example 2: If the obtained report block object is defined as report , when the mouse clicks on the cell, the font will be displayed in red and bold 14, and it will be restored when clicked again.

report.addEffect('setRowFont', {
	style: {
		bold: true,
		fontSize: 14,
		color: 'red'
	},
	trigger: 'mousedown',
	single: false
});

Example 3: In a general report, when the mouse hovers over a cell, the font is displayed in red and bold 14, and it is restored when left.

_g().addEffect('setRowFont', {
	style: {
		bold: true,
		fontSize: 14,
		color: 'red'
	},
	trigger: 'mouseover',
	single: true
});

Example 4: In a general report, when the mouse clicks on a cell, the font is displayed in red and bold 14, and it is restored when clicked again.

_g().addEffect('setRowFont', {
	style: {
		bold: true,
		fontSize: 14,
		color: 'red'
	},
	trigger: 'mousedown',
	single: false
});

Example 5: In the dashboard, when the mouse hovers over the cell, the font is displayed in red and bold 14, and it is restored when left.

_g().getWidgetByName('report0').addEffect('setRowFont', {
	style: {
		bold: true,
		fontSize: 14,
		color: 'red'
	},
	trigger: 'mouseover',
	single: true
});

Example 6: In the dashboard, when the mouse clicks on the cell, the font is displayed in red and bold 14, and it is restored when clicked again.

_g().getWidgetByName('report0').addEffect('setRowFont', {
	style: {
		bold: true,
		fontSize: 14,
		color: 'red'
	},
	trigger: 'mousedown',
	single: false
});

2. Application example

Example 1: When the mouse hovers over a cell, the font of the row where it is located is displayed in red and bold 14, move to another row to restore.

Click to download the template:

The row where the cell is located changes font when mouse is hovered.cpt

Example 2: When the mouse clicks on the cell, the font of the row is displayed in red and bold 14, click again to restore.

Click to download the template:

The row where the cell is located changes font when mouse is cilcked.cpt