JS實現批量選擇資料並列印

1.1 問題描述

填報時希望將選中的資料以自訂的樣式列印出來，效果如下圖所示：

前端填報時複選幾筆資料：

點選列印按鈕後，資料展示為自訂的樣式：

1.2 實現思路

可以設計另外一個有固定格式的範本，此範本設定 ID 參數，用於接收填報範本複選的資料。

給填報範本的列印按鈕新增點選事件，將選中的值以參數的形式傳到固定格式的範本中進行列印。

注：不支援報表凍結。

2.1 建立固定格式範本

1）建立資料庫查詢資料集 ds1，SQL 語句為：SELECT * FROM 產品 where 產品ID in (${ID})

2）設計表格樣式，將資料集欄位拖到對於儲存格中，如下圖所示：

3）將 B2 儲存格的左父格設定成無，如下圖所示：

4）並將其餘儲存格的左父格設定為B2，如下圖所示：

5）設定 B3 儲存格的形態，前端展示時該儲存格可以顯示供應商的公司名稱，如下圖所示：

6）設定 D3 儲存格的形態，前端展示時該儲存格可以顯示產品的類別名稱，如下圖所示：

7）將範本重新命名為：PrintCol.cpt，儲存範本，儲存路徑為：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Form\FormFAQ\PrintCol.cpt

2.2 設計填報範本

1）開啟設計器內建範本：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Form\LineForm\LineForm7.cpt。

2）選中 B2 儲存格的按鈕元件，將按鈕名稱修改為列印，並修改按鈕的點選事件，如下圖所示：

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");  //給選中的儲存格增加id屬性
var idn = id.replace("A","B"); //將複選框所在的A列換成客戶編號所在的B列
var vv=document.getElementById(idn).innerHTML;    //獲取被選儲存格所在B列的資料
  darray.push(vv);  
}
FR.doURLPDFPrint("${sevletURL}report?viewlet=/doc/Form/FormFAQ/PrintCol.cpt&ID="+darray);  //呼叫列印方法，URL為之前做好的範本路徑

注：若獲取的 vv 值為字串，要將其put 命令陣列中則需要修改成 darray.push("'"+vv+"'")。

3）將範本重新命名為：PrintOtherStyle.cpt，儲存範本。

2.3 效果預覽

填報預覽PrintOtherStyle.cpt，複選幾筆資料後，點選列印按鈕，列印出來的效果如 1.1問題描述 中所示。

注：行動端不支援各種列印和匯出方式。

已完成範本可參見：

%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Form\FormFAQ\PrintCol.cpt

%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Form\FormFAQ\PrintOtherStyle.cpt

點選下載範本：

PrintCol.cpt

PrintOtherStyle.cpt