I. Overview
1. Expected effect
Use the insert and delete button, each row has a button, when the amount of data is too large, too many buttons will cause the template to load slowly. How to use only one insert and delete row button to insert a row of data or delete a row of data at the row position where the mouse is clicking? Effect as shown below:
2. Realization idea
Add buttons to the template and customize them as insert and delete buttons, which are realized by adding "click" events to buttons.
II. Example
1. Prepare template
Open the built-in template: %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Form\RowForm\Simple_Row-based_Form.cpt
2. Add button widget
Add "Button" widget to cell J1 and cell K1, select "Common" as the button type, change the name of the button in cell J1 to "Insert a row", and change the name of the button in cell K1 to "Delete a row". As shown below:
3. Add button event
1) Add a click event for the button in cell J1 to realize the function of adding a row when the button is clicked, as shown in the following figure:
The JavaScript code is as follows:
contentPane.appendReportRC(1);//Click the button to insert a row
2) In the same way, add a click event to the button in cell K1 to realize the function of deleting a row when the button is clicked. The JavaScript code is as follows:
contentPane.deleteReportRC();//Click the button to delete a row
4. Preview effect
Save the template, click "Data Entry Preview", the effect is shown in section I.1.
Note: Mobile terminal is not supported.
III. Download template
Refer to the completed template: %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\DataEntey\DataEntryApplication\AddDelete.cpt
Click to download: