1 Overview
1.1 Application scenarios
When the line report is filled and deleted, if there are many contents to be deleted, it is troublesome to click to delete one by one. How to realize the batch delete operation as shown in the figure below?
1.2 Implementation ideas
This article provides two implementation methods, but the idea is the same, both of which are to write all the line numbers of the line where the check button is checked into a string array, and then delete them in batches.
2. Example
2.1 Prepare data
Create a new ordinary report, create a new data set ds1, the SQL query statement is: SELECT * FROM Sales
2.2 Design table
Add "Button Control" to cell A2, and set the button name to "Delete Check".
Add "check button control" to cell A3, and set the left parent cell to B3.
Add "Text Control" to cells B3~G3.
The table effect is shown in the figure below:
2.3 Set reporting properties
In the designer menu bar, select Template>Report Filling Properties, and add "Built-in SQL" submission. The specific settings are shown in the figure below:
2.4 Method One
1) Select cell A3, select Control Settings>Events in the property panel on the right, click "Add Event", and add an "Event after Initialization" to the check button, as shown in the figure below:
The JavaScript code is as follows:
if (!window.lineboxes) {
window.lineboxes = [];//初始化数组
}
lineboxes[lineboxes.length] = this
2) Select cell A2, select Control Settings>Events in the property panel on the right, click "Add Event", and add a "click event" to the check button, as shown in the figure below:
The JavaScript code is as follows:
if(window.lineboxes) {
var cells = [];//建立空数组用于搜集勾选行号
for (var i = 0; i < lineboxes.length; i++) {
if (lineboxes[i].selected()) {//若复选框被勾选则执行以下
//将第1个勾选行号写入数组0位置，将第2个勾选行号写入数组1位置……
cells[cells.length] = lineboxes[i].options.location;
}
}
contentPane.deleteRows(cells); //批量删除选中的记录
setTimeout(function() {
contentPane.writeReport(); //保存到数据库，实现的是工具栏中提交的操作
}, 1000);
}
Display code
2.5 Method two
Select cell A2, select Control Settings>Events in the property panel on the right, click "Add Event", and add a "click event" to the check button, as shown in the figure below:
The JavaScript code is as follows:
var $span = $('.fr-checkbox-checkon'); //获取选中的复选框
var darray = []; //新建一个数组用来存放选中的单元格所在的行号
var $tds = $("td").has($span); //获取选中复选框所在的单元格，即选中的单元格
for (var i = 0, len = $tds.length; i < len; i ++) { //遍历选中的单元格
var id = $($tds[i]).attr("id"); //获取选中的单元格所在的行号
if (id) {
darray.push(id); //将选中的单元格所在的行号放入到数组中
}
}
contentPane.deleteReportRC(null,darray); //第二个参数为行号
setTimeout(function() { //增加延时函数（功能：需要删除的列较多时，复选框上面的删除
contentPane.writeReport(); //勾选还未执行完成，就执行填报事件，填报时找不到行号，就会报错。
}, 1000); //增加延时函数，保证在删除勾选事件执行完后，才执行填报事件）
Display code
Note: The JS code of this method does not support "New Filling Preview".
2.6 Effect preview
Save the report, click "Preview of Filling In" or "Preview of New Filling", the effect is as shown in the figure below:
Note: Mobile terminal is not supported.
3. Template download
1) Method one
For the completed template, please refer to: %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Form\LineForm\Line-filling batch deletion-method one.cpt
Click to download the template: line-filling batch delete-method one.cpt
2) Method two
For the completed template, please refer to: %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Form\LineForm\Line-filling batch deletion-method two.cpt.
Click to download the template: Line fill in batch delete-method two.cpt