Custom Buttons for Row Insertion and Deletion by JS

Expected Effect

You can use the Insert Row and Delete Row buttons for each row. For data entry reports with large data volumes, excessive buttons may result in slow template loading.

How to use only one Insert Row button and one Delete Row button to insert or delete the corresponding data of the row where you hover the cursor? The following figure shows the effect.

Implementation Method

You can add button widgets in templates, customize the buttons as the Insert Row and Delete Row buttons, and add Click events for the custom buttons to realize the effect. For details about the API description, see Exclusive API for Data Entry Preview.

Template Preparation

Open the built-in template LineForm1.cpt in %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Form\LineForm.

Alternatively, download the template LineForm1.cpt.

Open the template and design the report as shown in the following figure.

Button Widget Adding

Add Button Widget for cells J1 and K1, respectively, and set Button Type to Common separately, as shown in the following figure.

Modify the button name in cell J1 to Insert Row, and modify the button name in cell K1 to Delete Row. The following figure shows the effect.

Event Adding for Buttons

1. Add a Click event for the Insert Row button in cell J1 and enter the corresponding JavaScript code, as shown in the following figure. With the setting, you can click the button to add a row.

The JavaScript code is as follows:

_g().appendReportRC(1);//Click the button to add a row.

2. Similarly, add a Click event for the Delete Row button in cell K1. With the setting, you can click the button to delete a row. The JavaScript code is as follows:

_g().deleteReportRC();//Click the button to delete a row.

Effect Display

Save the template and click Data Entry Preview. The effect is the same as that shown in section "Expected Effect."

Note:

The effect cannot be previewed on mobile terminals.

For details, you can download the template Adding and Deletion.cpt.