JS Text Control Displays Style After Editing

1.1 Problem description

The use of conditional formatting allows cells or text widgets to display different styles, such as font size, color, etc., according to the conditional formatting during initialization. However, after editing the cell widget, the value changed, and the display style remained the original initialized style, without changing the style according to the edited value.

For example, the display style of scores is controlled by the conditional formatting, and scores less than 60 are displayed in red while scores greater than or equal to 60 are displayed in black. During initialization, the cell style will be displayed according to the setting of the conditional formatting, but if the value in the text widget is modified, the text will not be displayed according to the setting of the conditional formatting.

1.2 Implementation ideas

Use the widget edit end event and JS to get the cell value, get the cell text box widget, and then judge separately according to the expected conditions and set the style.

2.1 Template style

Add text widgets in cells B3 and B4, set the value of cell B3 as 59 and the value of cell B4 as 90. Set the conditional formatting, and those less than 60 are displayed in red while those greater than or equal to 60 are displayed in black, as shown below:

2.2 Add a post-edit event

Add edited events to the text widgets of B3 and B4, as shown below:

The JS code is as follows:

var td = $(arguments[0]);//get the current cell
var value = this.getValue();//get the value
if (value < 60) {
    td.css({
        "color": "red"//set the font to be red
    });
    td.css({
        "font-weight": "bold" //set bold
    });
} else {
    td.css({
        "color": "black"//set the font back to black
    });
    td.css({
        "font-weight": "normal"//set to normal
    });
}

Note: The purpose of using edit end events instead of post-edit events is to reduce repeated judgments during editing and avoid multiple calculations of the template.

2.3. Preview

Save the template, select Data Entry Preview, and the implementation effect on PC terminal is shown below:

It can be seen that after editing the cell widget, the display style changes according to the edited value, achieving the expected effect.

Note: This JS function does not support use on the mobile terminal. 

Click Download Template:

JS text widget changes style according to conditions.cpt

 https://help.fanruan.com/finereport/doc-view-1818.html