當前為10.0版本文檔,更多實例內容將在最新幫助文檔中展現,點選跳轉至 最新版幫助文檔

下拉框控件簡介

1. 概述

下拉框控件可應用於填報、參數等場景中,本文将介紹下拉框控件的屬性及應用。

2. 添加控件

2.1 填報應用

普通報表:

選中單元格後,點擊右側屬性面板的「控件設置」,選擇控件處下拉選擇「下拉框控件」,如下圖所示:

3.png

決策報表:

将「下拉框控件」拖入到決策報表中,如下圖所示:

4.png

2.2 參數應用

普通報表:

将「下拉框控件」拖入到參數面板中,如下圖所示:

6.png

決策報表:

先将參數界面拖入 body 界面,再将「下拉框控件」拖入參數面板中,如下圖所示:

7.png

3. 控件介紹

3.1 控件屬性

3.1.1 填報應用

下拉框控件的屬性設置界面如下圖所示:

2020-06-10_22-22-06.png

各屬性設置項的詳細介紹如下:

屬性簡介
控件名

通常與參數結合使用

通過控件名可以獲得該控件,從而獲得控件值傳遞給對應參數 

或者通過控件名獲得控件後通過 JS 設置控件的屬性

可用

勾選後,填報時可正常輸入文本信息 

不勾選,填報時控件灰化,不可編輯

可見

勾選後,填報時控件可見

不勾選,填報時控件不可見

水印

填報時控件内會顯示淺灰色水印文字,以提示用戶需要輸入的信息

當點擊控件編輯區域後,水印消失

數據字典

數據字典可以定義下拉框實際值與顯示值

詳細内容參見文檔:數據字典

允許爲空

勾選後,允許控件爲空值

不勾選,填報校驗和提交時會提示:不能爲空

錯誤提示用戶可自定義不允許爲空的提示信息
允許直接編輯勾選後,用戶可以直接輸入值,實現模糊查詢
允許自定義值

勾選後,用戶手動輸入的值可以不包含在下拉菜單選項中

不勾選,用戶手動輸入的值必須是下拉菜單選項中的值,若輸入的值不屬於下拉菜單選中,查詢時,會提示:值不在下拉列表内

3.1.2 參數應用

下拉框控件的屬性設置界面如下圖所示:

1599018194627280.png

各屬性設置項的詳細介紹如下:

屬性簡介
控件名稱

通常與參數結合使用

通過控件名可以獲得該控件,從而獲得控件值傳遞給對應參數 

或者通過控件名獲得控件後通過 JS 設置控件的屬性

可用

勾選後,預覽時可正常輸入文本信息

不勾選,預覽時控件灰化,不可編輯

可見勾選後,預覽時控件可見;不勾選,預覽時控件不可見
标簽名稱标簽名稱的作用就是用來彌補參數界面中标簽控件不支持的問題
控件值控件默認顯示的值,詳細内容參見文檔:控件默認值
數據字典數據字典可以定義下拉框實際值與顯示值,詳細内容參見文檔:數據字典
去除重複項

勾選後,會将下拉菜單中相同的項合并

不勾選,會保留下拉菜單中重複的選項

水印

控件内會顯示淺灰色水印文字,以提示用戶需要輸入的信息

當點擊控件編輯區域後,水印消失

字體大小文本框中輸入字體的大小
允許爲空

勾選後,允許控件爲空值

不勾選,查詢時會提示:不能爲空

錯誤提示用戶可自定義不允許爲空的提示信息
允許直接編輯勾選後,用戶可以直接輸入值,實現模糊查詢
允許自定義值

勾選後,用戶手動輸入的值可以不包含在下拉菜單選項中

不勾選,用戶手動輸入的值必須是下拉菜單選項中的值,若輸入的值不屬於下拉菜單選中,查詢時,會提示:值不在下拉列表内

控件位置調整控件在參數面板中的位置
控件大小調整控件的大小

3.2 填寫規則

1)允許爲空

勾選後,會在下拉菜單中顯示「不選」選項;不勾選,下拉菜單中不顯示「不選」選項,如下圖所示:

2020-06-01_22-57-25.png

2)允許直接編輯

下拉框控件的編輯框裏面允許直接輸入值,并實現模糊查詢,主要用於在下拉框中快速查找,如下圖所示:

2020-06-11_11-37-18.jpg

3)允許自定義值

勾選允許自定義值,這個值可以不包含在下拉菜單選項中;不勾選允許自定義值,下拉框控件的編輯框裏允許用戶手動輸入值,但是必須是下拉菜單選項中的值,若輸入的值不屬於下拉菜單選中,查詢時,會提示"值不在下拉列表内",如下圖所示:

2020-06-11_11-37-41.jpg

3.3 高級

1)數據字典

通過 數據字典 來定義下拉框實際值與顯示值,如下圖所示:

2020-06-11_11-26-38.jpg

  • 下拉框實現的是異步加載功能,即每次加載 500 條數據,因此若是大數據量的表就不會出現下拉框一直處在正在加載的情況了。同樣下拉複選框與下拉樹也是異步加載數據。

  • 若下拉框數據量大且重複數據多的話,建議在定義下拉框數據字典時,在數據集或者公式處直接取出不重複的數據,以提高性能。

2)去除重複項

勾選去除重複項,會将下拉菜單中相同的項合并;不勾選去除重複項,會保留重複的選項,如下圖所示:

2020-06-11_11-29-14.jpg

  • 去除重複項不會影響下拉菜單數據的生成,只是在生成下拉數據後對相同項進行合并。

  • 下拉選項可以通過上下鍵切換,Tab 鍵确認,不采用 Enter 鍵是因爲考慮到 Enter 會觸發查詢按鈕。

4. 控件應用

下拉框控件的應用,用戶可參見以下文檔:

應用場景實際效果

場景描述:

當控件中參數值爲空,點擊查詢後,會顯示報表中的全部數據

參考文檔:

下拉框參數爲空選擇全部

9.png

場景描述:

有時候報表數據量大、不分頁顯示,查看靠後的數據非常麻煩。希望能通過指定的數字快速定位到對應的行數

參考文檔:

報表添加錨點實現跳轉到指定行

2.gif

場景描述:

圖表可以跟随參數聯動

參考文檔:

下拉框和圖表聯動

3.gif

場景描述:

利用決策報表的自動查詢功能,實現決策報表主體的下拉控件與圖表之間的自動查詢

參考文檔:

決策報表示例之圖表自動查詢

6.gif

場景描述:

用戶希望下拉列表中的數據較爲完整,例如多列顯示

參考文檔:

下拉框顯示多列

10.png

場景描述:

多個下拉框可以實現填報聯動

參考文檔:

填報下拉框聯動

7.gif

場景描述:

在實現填報聯動的基礎上,選擇第一個控件值後,其他聯動控件可以跟随選擇可選範圍内的第一個值

參考文檔:

JS實現填報聯動自動生成默認值

12.gif

場景描述:

在設計報表的過程中,有部分需求需要使用填報控件來實現查詢的功能

參考文檔:

JS使用填報頁面的控件查詢

13.gif

場景描述:

在進行填報時,使用下拉框控件根據顯示值進行填報,控件失去焦點後,顯示其對應的顯示值,而不是實際值

參考文檔:

下拉框填報完成之後顯示爲顯示值

21.gif

場景描述:

在制作參數界面時,希望下拉控件的數據是動态的

參考文檔:

下拉框動态數據來源

12.png

場景描述:

後面一個參數下拉框的值會根據前一個參數的值的改變而改變

參考文檔:

下拉框參數聯動

13.png

場景描述:

參數面板中後面的下拉框根據前面下拉框中選擇的值,默認顯示列表中第一個值

參考文檔:

下拉框聯動之默認選擇列表中第1個值

14.gif

場景描述:

參數界面中,往往需要在一個控件中動态的控制其他控件的值

參考文檔:

JS實現參數控件賦值

15.gif

場景描述:

參數聯動查詢時,希望下拉框選擇後,複選框可以跟着選中全部所有參數值

參考文檔:

下拉框選擇後複選框默認全選

16.gif

場景描述:

查詢面板可以通過比較符号,如大於号>或小於号<,定義無窮區間查詢

參考文檔:

無窮區間參數查詢

18.gif

場景描述:

在報表預覽頁面實現通過參數可以查詢數據連接下的數據庫表信息

參考文檔:

參數查詢任意數據連接下的任意表

19.gif

場景描述:

在使用參數控件時,有時我們希望部分參數控件在沒滿足條件時不顯示,滿足條件後再顯示

參考文檔:

JS根據條件控制參數控件是否顯示(可用)

20.gif

場景描述:

點擊任意位置,都可以展開下拉框選項

參考文檔:

點擊任意位置展現下拉框列表

22.gif

場景描述:

在下拉框中輸入字符後,能夠精确匹配結果

參考文檔:

下拉框模糊搜索精确匹配方案

23.gif

場景描述:

下拉框控件在中文輸入中,會主動識别漢語拼音,希望不識别拼音,只識别中文字,減少查詢性能的浪費

參考文檔:

只支持中文搜索的下拉框控件插件

24.gif

5. 注意事項

勾選了「允許直接編輯」,移動端預覽時不支持直接編輯下拉框,如下圖所示:

Snag_42f8041a.png

附件列表


主題: 原簡體文檔
已經是第一篇
已經是最後一篇
  • 有幫助
  • 沒幫助
  • 只是瀏覽

文 檔回 饋

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

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

不再提示

9s後關閉

反饋已提交

網絡繁忙