JS Mark the Modified Cells When Data Entry-FineReport Help Document

Last update： 2020-12-15

I. Overview

1.1 Problem description

Scene description: In the Data Entry Preview, after editing the cell, there is a red mark in the upper left corner, but it is inconspicuous, which is difficult for users to notice. Is there any good way to make obvious special marking for the cell after operation, which is convenient for users to notice?

As shown in the figure, after operating the cell, mark the cell with background color and bold text.

1.2 Implementation ideas

Change the cell style after editing the current cell.

Note: Do not set to direct display widgets

You will learn
Examples Method 1: Modify the cell style after editing Method 2: Directly modify the CSS style after value change Preview Download the template

II. Examples

Open the report %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Form\RowForm\Simple_Row-based_Form.cpt

2.1 Method 1: Modify the cell style after editing

Modify the cell style in the widget edit end event, select the cells B3:K3 to be set, right-click widget Settings > Event Editing, and add an edit end event:

The JS code is as follows:

var location = this.options.location; 
//Get the position of the widget
var cr = FR.cellStr2ColumnRow(location);
//Cell column number
var col = cr.col;
//Cell row number
var ro = cr.row;
//Set the background color of the cell: grass green 
$("tr[tridx="+ro+"]").find("td[col="+col+"]").css("background-color","rgb(153,204,0)");
//set the content of the cell: bold
$("tr[tridx="+ro+"]").find("td[col="+col+"]").css("font-weight","bold");

You can directly use the following JS code, which is simpler:

var $td=$(arguments[0]);
//Current cell being edited
$td.css("background-color","rgb(153,204,0)");
//Set the cell content: color
$td.css("font-weight","bold");
//set the content of the cell: bold

2.2 Method 2: Directly modify the CSS style after value change

If the above method is used, the edit end event must be set once for all the Data Entry widgets. If there are many Data Entry widgets in the template and they are not successional, the setting workload is relatively large and the efficiency is relatively low. In fact, when the value of each cell changes during data entry, the internal value change event will be triggered, and a small red triangle will be added to the upper left corner of the cell, as shown below:

The corresponding CSS class is a dirty class, so you only need to modify the style of this dirty class in CSS by adding a background color or bold style. After the cell value is changed, this dirty class will be automatically used, and this style is called for all widgets whose values is changed in the report with data entry. It is very simple and applicable. The method is as follows

Add a loading end event, as shown below:

The code is as follows:

contentPane.on("cellselect", function (td){      
  $('.dirty').css('background-color',"rgb(153,204,0)");  
  //Set the background color of the dirty class
  $('.dirty').css('font-weight',"bold");  
  //Set the font of the dirty class to be bold
});

After using this method, you only need to write the code once in the loading end event of the data entry template, and do not need to write the code separately in the edit end event of each widget

2.3. Preview

Save the template, and select the data entry preview, and the effect is shown below:

Note: In order to make the effect more obvious, you can uncheck the background setting of the current editing row in the setting of the data entry page.

Note: In our testing, the mobile terminal and H5 do not support this effect.