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.contentPane; //拿取當前頁面的父窗口（即獲取填報界面）
var Widget = form.parameterEl.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=數據回填_彈窗.cpt&ref_t=design&op=view&ref_c=9e2cfd00-e8b1-4f7a-b870-bd0574f39811"); 
//childtest.cpt爲點擊查詢時，對話框中顯示的子報表
var o = {
title : "篩選所需數據并返回",
width : 600,//調整對話框寬度
height: 300//調整對話框高度
};
FR.showDialog(o.title, o.width, o.height, $iframe,o); //彈出對話框

4）保存報表，重命名爲數據回填_回填.cpt。

2.3 效果預覽

打開模板數據回填_回填.cpt，選擇數據分析預覽，點擊打開彈窗按鈕，選擇餅幹所在數據行，将餅幹對應的類别ID回填到文本框中，點擊查詢按鈕即可查看和餅幹同類别的其他産品。

注：分頁預覽、填報預覽、數據分析都可以，但不支持移動端。

已完成模板可參見：

%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 操作符的效果實現查詢功能。

例如，當參數默認值爲“油”時，彈窗的内容會顯示産品名稱中所有包含“油”這個字符的産品信息，字符串同理，如下圖所示：