JS實現彈窗後資料回填

1.1 預期效果

所謂資料回填指的是將查詢出來的資料傳回給顯示的文字框。當使用者需要透過彈窗查詢資料並進行回填時，可以使用該方法來實現。

例如下圖範例中的效果：當想要查看某個產品對應的類別 ID 下還有哪些其他產品時，可以透過彈窗查詢並傳回類別 ID。

1.2 實現思路

設計兩張範本，一張主範本，一張子範本，點選主範本中按鈕可以跳出子範本彈窗，子範本中選擇值後將值傳給主範本。

2.1 準備子範本

1）資料準備

建立資料集 ds1，sql 語句為：select * from 產品 where  產品名稱 like '%${產品名稱}%' order by 產品ID

程式碼中的參數產品名稱使用了 like 運算子，作為查詢功能使用，下面設計的回填範本點開彈窗後，會根據參數產品名稱設定好的預設值顯示資料。詳細內容可參閱下面注意事項的說明。

2）表格設計

如下圖設計表格樣式，A2~D2 儲存格拖入對應標題名稱的資料欄。

選中 E2 儲存格，右邊屬性面板選擇「元件設定>選擇元件」，下拉新增一個按鈕元件，如下圖設定好按鈕的類型、名稱和圖示。

給按鈕新增一個點選事件，JS 需要引入參數val，值為公式D2。如下圖所示：

JavaScript 程式碼如下：

var form = window.parent._g(); //拿取當前頁面的父視窗（即獲取填報介面）
var Widget = form.getParameterContainer().getWidgetByName('類別ID');
Widget.setValue(val);
//form.setCellValue($("div.fr-trigger-editor.ui-state-enabled[widgetname='SUPPLIERS_NO']"),val);
//指派的索引要做下處理，做對應
//form.setCellValue(col,row-1,va2); 
//給文字元件的儲存格（A2）指派val，0代表第一欄，1代表第2行
window.parent.FR.closeDialog(); //確定獲取值後，關閉取消父視窗的對話框
window.parent.FR.destroyDialog();

3）儲存報表，重新命名為資料回填_彈窗.cpt。

2.2 準備主範本

1）資料準備

建立資料集 ds1，sql 語句為：select * from 產品 where 類別ID  = '${類別ID}' order by 產品ID

上面彈窗範本中回填的內容就是類別 ID。

2）表格設計

如下圖設計表格樣式，B2~D2 儲存格拖入對應標題名稱的資料欄。

3）參數設定

將資料集參數類別 ID新增到參數面板，自訂元件選擇正文元件類型。並在正文元件右側拖入一個按鈕元件，點選該按鈕可以彈出彈窗，元件名稱為button0_c，並設定一個元件圖示。

給按鈕元件button0_c新增一個點選事件，如下圖所示：

JavaScript 程式碼如下：

注：程式碼中子範本的路徑和範本名稱請根據實際應用情況修改。

window.form = this.options.form; //當前的form指派給全局變數
var $iframe = $("<iframe id='inp' name='inp' width='100%' height='100%' scrolling='no' frameborder='0'>"); // iframe參數的命名及寬高等
$iframe.attr("src", "http://localhost:8075/webroot/decision/view/report?viewlet=/doc/JS/參數介面JS實體/資料回填_彈窗.cpt&ref_t=design&op=view&ref_c=9e2cfd00-e8b1-4f7a-b870-bd0574f39811"); //資料回填_彈窗.cpt為點選查詢時，對話框中顯示的子報表
var o = {
title : "篩選所需資料並傳回",
width : 600,//調整對話框寬度
height: 300//調整對話框高度
};
FR.showDialog(o.title, o.width, o.height, $iframe,o); //彈出對話框

4）儲存報表，重新命名為資料回填_回填.cpt。

2.3 效果預覽

開啟範本資料回填_回填.cpt，選擇資料分析預覽，點選開啟彈窗按鈕，選擇餅乾所在資料行，將餅乾對應的類別ID回填到文字框中，點選查詢按鈕即可查看和餅乾同類別的其他產品。

注：分頁預覽、填報預覽、資料分析都可以，但不支援行動端。

上述範例只支援 PC 端，不支援行動端。

若想在行動端實現同樣效果，可以在上述方案上做些修改。

1）子範本

子範本按鈕的 JS 程式碼修改為：

var form = _g().parent; //拿取當前頁面的父視窗（即獲取填報介面）
var Widget = form.getParameterContainer().getWidgetByName('類別ID');
Widget.setValue(val);
//form.setCellValue($("div.fr-trigger-editor.ui-state-enabled[widgetname='SUPPLIERS_NO']"),val);
//指派的索引要做下處理，做對應
//form.setCellValue(col,row-1,va2); 
//給正文元件的儲存格（A2）指派val，0代表第一欄，1代表第2行
FR.closeMobilePopup(); //關閉子範本彈窗

2）主範本

主範本的按鈕點選事件設定為行動端彈窗，詳情參見：[通用]行動端彈窗

3）效果預覽

已完成模板可参见：

%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\参数界面JS实例\数据回填_弹窗.cpt

%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\参数界面JS实例\数据回填_回填.cpt

點選下載範本：

資料回填_彈窗.cpt

資料回填_回填.cpt

彈窗的內容根據資料回填_彈窗.cpt的資料集參數產品名稱的預設值改變。

上面範例示範中，該參數的預設值為空，彈窗會顯示所有的產品資訊。也可以透過 like 運算子的效果實現查詢功能。

例如，當參數預設值為“油”時，彈窗的內容會顯示產品名稱中所有包含“油”這個字元的產品資訊，字串同理，如下圖所示：