JS對於下拉框資料量大的解決方案

1.1 版本

1.2 問題描述

在使用下拉框時，若遇到下拉框中資料量很大時，比如有上萬條選項，雖然使用模糊搜尋功能但仍無法在下拉框中載入全部項，怎麼解決使之在資料量大時能夠展示全部項呢？

1.3 實現思路

在主範本中使用下拉框，點選一個按鈕時，引用一個 JS，使其彈出一個對話框，對話框中嵌入下拉項的範本（因範本中的資料量是不受限制的），在此範本中進行模糊搜尋，列出的所有下拉項中全部的相關選項，點選需要查詢的資料傳回到主範本的正文框中進行查詢。效果如下圖所示：

2.1 報表設計

建立資料集 ds1：SELECT * FROM STSCORE ，將所有欄位拖曳到 A2-F2，按照如下樣式設計範本，如下圖所示：

2.2 設定範本參數

建立範本參數，名稱為 p1 ，編輯參數面板，選擇全部新增，重新整理增一個按鈕類型元件，並將按鈕命名為選擇記錄， 新增點選事件，寫入如下 JS 語句，如下圖所示：

JS 程式碼如下：

var url = encodeURI(encodeURI("${servletURL}?viewlet=doc/Parameter/下拉框資料量大-參數介面子模版.cpt"));
var $iframe = $("<iframe id='inp' name='inp' width='100%' height='100%' scrolling='no' frameborder='0'>");
$iframe.attr("src", url);
var o = {
        title: "請選擇記錄項",
        width: 700,
        height: 400
};
FR.showDialog(o.title, o.width, o.height, $iframe, o);

2.3 設定過濾條件

雙擊 A2 儲存格，新增過濾條件，NAME 欄位用 $p1 過濾，如下圖所示：

2.4 儲存範本

點選儲存，範本命名為下拉框資料量大-參數介面主範本。

3.1 報表設計

建立普通報表，建立資料集 ds1 ：SELECT * FROM STSCORE where name like '%${if(len(id)=0,"error",id)}%' ，將 NAME 欄位拖至 A1 儲存格，如下圖所示：

3.2 設定參數

編輯參數面板，選擇全部新增，元件值為模糊查詢欄位：，元件類型分別選擇正文元件，如下圖所示：

3.3 設定正文元件

選擇 A1 儲存格，元件設定為正文元件，元件名稱為 record ，選擇超級連結，增加 JS 腳本，新增參數 val ，值選擇插入公式 $$$ ，如下圖所示：

JS 程式碼如下：

parent._g().getParameterContainer().getWidgetByName("p1").setValue(val);
//給父視窗參數面板的正文元件p1指派
window.parent.FR.closeDialog();
//關閉對話框
window.parent.FR.destroyDialog();

3.4 設定過濾條件

雙擊 A1 儲存格，選擇過濾，可選列為 NAME ，運算子為包含，選擇參數 $id，如下圖所示：

3.5 儲存範本

點選儲存，範本命名為下拉框資料量大 - 參數介面子範本。

4.1 PC 端

主範本中選擇「分頁預覽」，預覽效果如本文 1.2 節所示。

4.2 行動端

不支援行動端。

1）主模版

已完成範本可參見：%FR_HOME%\webroot\WEB-INF\reportlets\doc\Parameter\下拉框資料量大-參數介面主範本.cpt

點選下載範本：下拉框資料量大-參數介面主範本.cpt

2）子模版

已完成範本可參見：%FR_HOME%\webroot\WEB-INF\reportlets\doc\Parameter\下拉框資料量大-參數介面子範本.cpt

點選下載範本：下拉框資料量大-參數介面子範本.cpt