Row-based Data Entry Batch Deletion-FineReport Help Document

Last update： 2021-01-11

I. Overview

1. Application scenarios

When deleting a line in data entry report, if there are many contents to be deleted, it will be troublesome to click delete one by one. How to realize the batch deletion operation as shown in the figure below?

Kapture 2021-01-11 at 11.49.01.gif

2. Implementation ideas

This paper provides two implementation methods, but the idea is the same, all the lines where the check button is checked are written into the string array, and then batch deleted.

II. Examples

1. Data preparation

New normal report, new data set DS1, SQL query statement: select * from ordersdetail

截屏2021-01-11 上午11.14.00.png

2. Design form

Add button widget to cell A2, and set the button name to "delete selected".

A check box widget is added to cell A3, and the left parent cell is set to B3.

Add text widget to cells B3 ~ E3.

The effect of the table is shown in the following figure:

截屏2021-01-11 上午11.23.11.png

3. Setting data entry attributes

In the designer menu bar, select template > data entry attribute to add "built in SQL" submission. The specific settings are as follows:

Note: the column name cannot contain space.

2.3.png

4. Method 1

1) Select cell A3, select widget settings > event in the right property panel, and click add event to add a after initialization event to the check box button, as shown in the following figure:

The JavaScript code is as follows:

if (! window.lineboxes {
window.lineboxes =[]; //initialize array
}
lineboxes[ lineboxes.length ] = this

2) Select cell A2, select widget settings > event in the right property panel, and click add event to add a click event to the check button, as shown in the following figure:

The JavaScript code is as follows:

If ( window.lineboxes {
Var cells = []; // create an empty array to collect the checked line numbers
for (var i = 0; i < lineboxes.length ; i++) {
If (lineboxes [i]. Selected()) {// if the check box is checked, perform the following steps 
//Write the first check line number to array 0, and the second check line number to array 1
cells[ cells.length ] = lineboxes[i]. options.location ;
}
}
contentPane.deleteRows (cells); // batch delete the selected records
setTimeout(function() {
contentPane.writeReport (); // save to the database to implement the submit operation in the toolbar
}, 1000);
}

5. Method 2

Select cell A2, select widget settings > event in the right property panel, and click add event to add a click event to the check button, as shown in the following figure:

2.51.png

The JavaScript code is as follows:

Var $span = $('. Fr checkbox checkon'); // get the selected check box
Var darray = []; // create a new array to store the row number of the selected cell
Var $TDS = $("TD"). Has ($span); // get the cell where the check box is selected, that is, the selected cell
for (var i = 0, len = $ tds.length ; I < len; I + +) {// traverses the selected cell
Var id = $($TDS [i]). Attr ("Id"); // gets the line number of the selected cell
if (id) {
darray.push (ID); // put the line number of the selected cell into the array
}
}
contentPane.deleteReportRC (null, darray); // the second parameter is the line number
SetTimeout (function() {// add a delay function (function: when there are many columns to delete, delete them above the check box)
contentPane.writeReport (); // check to execute the filling event before the execution is completed. If the line number cannot be found during filling, an error will be reported.
}, 1000); // add a delay function to ensure that the filling event will not be executed until the deletion of the checked event is completed.)

Note: the JS code of this method does not support "new report preview".