行式填報批量删除

1.1 應用場景

行式報表填報删除時，如果需要删除的内容較多，一個個點擊删除比較麻煩，如何實現下圖所示的批量删除操作呢？

1.2 實現思路

本文提供兩種實現方法，但是思路是一緻的，都是将所有勾選了複選按鈕所在行的行号寫進字符串數組，然後進行批量删除。

2.1 準備數據

新建普通報表，新建數據集 ds1，SQL 查詢語句爲：SELECT * FROM Sales

2.2 設計表格

A2 單元格添加「按鈕控件」，按鈕名字設置爲「删除勾選」。

A3 單元格添加「複選按鈕控件」，左父格設置爲 B3 。

B3~G3 單元格添加「文本控件」。

表格效果如下圖所示：

2.3 設置填報屬性

設計器菜單欄選擇模板>報表填報屬性，新增「内置 SQL」提交，具體設置如下圖所示：

2.4 方法一

1）選中 A3 單元格，右邊屬性面板選擇控件設置>事件，點擊「添加事件」，給複選按鈕添加一個「初始化後事件」，如下圖所示：

JavaScript 代碼如下：

if (!window.lineboxes) {
    window.lineboxes = [];//初始化數組
}
lineboxes[lineboxes.length] = this

2）選中 A2 單元格，右邊屬性面板選擇控件設置>事件，點擊「添加事件」，給複選按鈕添加一個「點擊事件」，如下圖所示：

JavaScript 代碼如下：

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);                              
}

2.5 方法二

選中 A2 單元格，右邊屬性面板選擇控件設置>事件，點擊「添加事件」，給複選按鈕添加一個「點擊事件」，如下圖所示：

JavaScript 代碼如下：

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);                    //增加延時函數，保證在删除勾選事件執行完後，才執行填報事件）

2.6 效果預覽

保存報表，點擊「填報預覽」或「新填報預覽」，效果如下圖所示：

注：不支持移動端。

1）方法一

已完成模板可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Form\LineForm\行式填報批量删除-方法一.cpt

點擊下載模板：行式填報批量删除-方法一.cpt

2）方法二

已完成模板可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Form\LineForm\行式填報批量删除-方法二.cpt。

點擊下載模板：行式填報批量删除-方法二.cpt