JS實現自訂選項彈窗

1.1 版本

1.2 預期效果

對於資料量較大的報表，可以採用文字元件、按鈕元件、儲存格複選框自訂一個選項彈窗進行查詢，如下圖所示，點選選擇按鈕，彈出資料選擇視窗來處理記錄。

適用於使用元件時，下拉選項較多，不能全部載入出來的場景。

1.3 實現思路

透過 JS 傳遞參數值實現。

2.1 準備主範本

2.1.1 資料準備

建立普通報表，建立資料集 ds1，SQL 語句為：SELECT * FROM S訂單，如下圖所示：

2.1.2 設計表格

1） 如下圖設計表格，將欄位拖入到對應儲存格中：

2）A3 儲存格屬性設定「形態>資料字典>資料庫表」，選擇內建資料庫「FRDemoTW」的「S 客戶」表，實際值為「客戶ID」，顯示值為「公司名稱」，步驟如下圖所示：

3）設定前兩列重複與凍結，操作步驟如下圖所示：

2.1.3 新增範本參數

點選「範本>範本參數」，新增文字類型參數，重新命名為「公司名稱」，步驟如下圖所示：

2.1.4 設定儲存格過濾

A3 儲存格元素增加過濾條件：資料列選擇「客戶ID」，運算子選擇「包含於」，選擇「參數」為「$公司名稱」。操作步驟如下圖所示：

2.1.5 設定參數面板

1）編輯參數面板，點選右側組件設定上方的「全部新增」，生成參數元件，刪除「公司名稱」標籤元件，點選參數框，選擇「文字元件」，操作步驟如下圖所示：

2）拖動「按鈕元件」到參數面板，設定按鈕名稱為「...」，操作步驟如下圖所示：

3）點選「按鈕元件」，新增「點擊事件」，步驟如下圖所示：

JavaScript 程式碼如下：

window.form = this.options.form;//當前的form指派給全局變數
var $iframe = $("<iframe id='inp' name='inp' width='100%' height='100%' scrolling='no' frameborder='0'>");
$iframe.attr("src", "${servletURL}?viewlet=demotw%252Fparameter%252F%25E6%2589%25B9%25E9%2587%258F%25E8%2599%2595%25E7%2590%2586%25E8%25B3%2587%25E6%2596%2599.cpt&op=write&__showtoolbar__=false");
var o = {title : "客戶資訊選擇",width : 800,height: 300};FR.showDialog(o.title, o.width, o.height, $iframe,o);

注：其中「?viewlet=demotw%252Fparameter%252F%25E6%2589%25B9%25E9%2587%258F%25E8%2599%2595%25E7%2590%2586%25E8%25B3%2587%25E6%2596%2599.cpt為「子範本」填報預覽時 URL 中「?viewlet=」的後半部分，其中 &op=write 代表子範本為填報預覽。

2.2 準備子範本

2.2.1 資料準備

建立普通報表，建立資料集 ds1，SQL 語句為：SELECT * FROM 客戶，如下圖所示：

2.2.2 設計表格

1）將 A1 儲存格與 B1 儲存格合併，第二欄縮減列高保留，A3 儲存格與 B3 儲存格合併，A4 儲存格保留新增「複選按鈕元件」 ，然後將欄位拖入到 B4~H4 對應的儲存格中，設計如下圖所示表格：

2）B4 儲存格屬性設定「形態>資料字典>資料查詢」，選擇資料集 ds1 ，實際值為「客戶ID」，顯示值為「公司名稱」，步驟如下圖所示：

3）設定前兩列重複與凍結，操作步驟如下圖所示：

2.2.3 新增按鈕元件

1）A1 儲存格新增「按鈕元件」，按鈕名稱設定為「處理已選中記錄」。如下圖所示：

2）「按鈕元件」新增「初始化後」事件，操作步驟如下圖所示：

JavaScript 程式碼如下：

window.ceshi=[];

3）「按鈕元件」新增「點擊」事件，操作步驟如下圖所示：

JavaScript 程式碼如下：

window.parent.form.getWidgetByName("公司名稱").setValue(ceshi);//給主範本的參數指派 
window.parent.FR.closeDialog();//確定獲取值後，關閉取消父視窗的對話框 
window.parent.FR.destroyDialog();

注：指派參數的名稱必須與主範本的參數名稱一致。

2.2.4 新增複選按鈕元件

A4 儲存格新增「複選按鈕元件」，新增「狀態改變」事件，設定參數 a ，值為公式=B4，操作步驟如下圖所示：

JavaScript 程式碼如下：

var value = this.getValue();//獲取當前參數的值 
if (value == true) {
 ceshi.push(a);//將選中的參數aput 命令視窗 
} 
else if (value==false){
 ceshi.splice($.inArray(a,ceshi),1); 
}

2.3 效果預覽

2.3.1 PC 端

分別儲存主範本和子範本，主範本點選「分頁預覽」，效果如下圖所示：

2.3.2 行動端

不支援行動端。

3.1 主範本

點選下載範本：大數據量查詢.cpt

3.2 子範本

點選下載範本：批量處理資料.cpt

文中「主範本」使用的是儲存格過濾，「子模版」傳回的參數類型為「陣列」。若直接使用 SQL 語句進行參數過濾，不設定儲存格過濾，「子模版」需要傳回用','分隔的「字串」，否則無法進行多值查詢。

1）將「主範本」資料庫查詢語句修改為：SELECT * FROM S訂單 where 1=1 ${if(len(公司名稱)=0,""," and 客戶ID in ('"+公司名稱+"')")} 。參數設定不變，如下圖所示：

2）修改「子模版」 A1 儲存格「點選」事件的 JS 程式碼，將 setValue(ceshi) 修改為 setValue(ceshi.join("','"))  。如下圖所示：

3）分別儲存範本，主範本點選「分頁預覽」，效果如下圖所示：