反饋已提交

網絡繁忙

JS實現彈窗後資料回填

1. 概述

1.1 預期效果

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

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

2023-11-11_17-47-11.gif

1.2 實現思路

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

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回填到文字框中,點選查詢按鈕即可查看和餅乾同類別的其他產品。

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

2023-11-11_17-47-11.gif

3. 範本下載

4. 注意事項

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

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

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

附件列表


主題: 參數應用
  • 有幫助
  • 沒幫助
  • 只是瀏覽
  • 圖片不清晰
  • 用語看不懂
  • 功能說明看不懂
  • 操作說明太簡單
  • 內容有錯誤
中文(繁體)

滑鼠選中內容,快速回饋問題

滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。

不再提示

10s後關閉

獲取幫助
線上支援
獲取專業技術支援,快速幫助您解決問題
工作日9:00-12:00,13:30-17:30在线
頁面反饋
針對當前網頁的建議、問題反饋
售前咨詢
業務咨詢
電話:0933-790886或 0989-092892
郵箱:taiwan@fanruan.com
頁面反饋
*問題分類
不能為空
問題描述
0/1000
不能為空

反馈已提交

网络繁忙