1. 概述
下拉框控件可應用於填報、參數等場景中,本文将介紹下拉框控件的屬性及應用。
2. 添加控件
2.1 填報應用
普通報表:
選中單元格後,點擊右側屬性面板的「控件設置」,選擇控件處下拉選擇「下拉框控件」,如下圖所示:
決策報表:
将「下拉框控件」拖入到決策報表中,如下圖所示:
2.2 參數應用
普通報表:
将「下拉框控件」拖入到參數面板中,如下圖所示:
決策報表:
先将參數界面拖入 body 界面,再将「下拉框控件」拖入參數面板中,如下圖所示:
3. 控件介紹
3.1 控件屬性
3.1.1 填報應用
下拉框控件的屬性設置界面如下圖所示:
各屬性設置項的詳細介紹如下:
屬性 | 簡介 |
---|---|
控件名 | 通常與參數結合使用 通過控件名可以獲得該控件,從而獲得控件值傳遞給對應參數 或者通過控件名獲得控件後通過 JS 設置控件的屬性 |
可用 | 勾選後,填報時可正常輸入文本信息 不勾選,填報時控件灰化,不可編輯 |
可見 | 勾選後,填報時控件可見 不勾選,填報時控件不可見 |
水印 | 填報時控件内會顯示淺灰色水印文字,以提示用戶需要輸入的信息 當點擊控件編輯區域後,水印消失 |
數據字典 | 數據字典可以定義下拉框實際值與顯示值 詳細内容參見文檔:數據字典 |
允許爲空 | 勾選後,允許控件爲空值 不勾選,填報校驗和提交時會提示:不能爲空 |
錯誤提示 | 用戶可自定義不允許爲空的提示信息 |
允許直接編輯 | 勾選後,用戶可以直接輸入值,實現模糊查詢 |
允許自定義值 | 勾選後,用戶手動輸入的值可以不包含在下拉菜單選項中 不勾選,用戶手動輸入的值必須是下拉菜單選項中的值,若輸入的值不屬於下拉菜單選中,查詢時,會提示:值不在下拉列表内 |
3.1.2 參數應用
下拉框控件的屬性設置界面如下圖所示:
各屬性設置項的詳細介紹如下:
屬性 | 簡介 |
---|---|
控件名稱 | 通常與參數結合使用 通過控件名可以獲得該控件,從而獲得控件值傳遞給對應參數 或者通過控件名獲得控件後通過 JS 設置控件的屬性 |
可用 | 勾選後,預覽時可正常輸入文本信息 不勾選,預覽時控件灰化,不可編輯 |
可見 | 勾選後,預覽時控件可見;不勾選,預覽時控件不可見 |
标簽名稱 | 标簽名稱的作用就是用來彌補參數界面中标簽控件不支持的問題 |
控件值 | 控件默認顯示的值,詳細内容參見文檔:控件默認值 |
數據字典 | 數據字典可以定義下拉框實際值與顯示值,詳細内容參見文檔:數據字典 |
去除重複項 | 勾選後,會将下拉菜單中相同的項合并 不勾選,會保留下拉菜單中重複的選項 |
水印 | 控件内會顯示淺灰色水印文字,以提示用戶需要輸入的信息 當點擊控件編輯區域後,水印消失 |
字體大小 | 文本框中輸入字體的大小 |
允許爲空 | 勾選後,允許控件爲空值 不勾選,查詢時會提示:不能爲空 |
錯誤提示 | 用戶可自定義不允許爲空的提示信息 |
允許直接編輯 | 勾選後,用戶可以直接輸入值,實現模糊查詢 |
允許自定義值 | 勾選後,用戶手動輸入的值可以不包含在下拉菜單選項中 不勾選,用戶手動輸入的值必須是下拉菜單選項中的值,若輸入的值不屬於下拉菜單選中,查詢時,會提示:值不在下拉列表内 |
控件位置 | 調整控件在參數面板中的位置 |
控件大小 | 調整控件的大小 |
3.2 填寫規則
1)允許爲空
勾選後,會在下拉菜單中顯示「
選項;不勾選,下拉菜單中不顯示「不選」選項,如下圖所示:2)允許直接編輯
下拉框控件的編輯框裏面允許直接輸入值,并實現模糊查詢,主要用於在下拉框中快速查找,如下圖所示:
3)允許自定義值
勾選允許自定義值,這個值可以不包含在下拉菜單選項中;不勾選允許自定義值,下拉框控件的編輯框裏允許用戶手動輸入值,但是必須是下拉菜單選項中的值,若輸入的值不屬於下拉菜單選中,查詢時,會提示"值不在下拉列表内",如下圖所示:
3.3 高級
1)數據字典
通過 數據字典 來定義下拉框實際值與顯示值,如下圖所示:
下拉框實現的是異步加載功能,即每次加載 500 條數據,因此若是大數據量的表就不會出現下拉框一直處在正在加載的情況了。同樣下拉複選框與下拉樹也是異步加載數據。
若下拉框數據量大且重複數據多的話,建議在定義下拉框數據字典時,在數據集或者公式處直接取出不重複的數據,以提高性能。
2)去除重複項
勾選去除重複項,會将下拉菜單中相同的項合并;不勾選去除重複項,會保留重複的選項,如下圖所示:
去除重複項不會影響下拉菜單數據的生成,只是在生成下拉數據後對相同項進行合并。
下拉選項可以通過上下鍵切換,Tab 鍵确認,不采用 Enter 鍵是因爲考慮到 Enter 會觸發查詢按鈕。
4. 控件應用
下拉框控件的應用,用戶可參見以下文檔:
應用場景 | 實際效果 |
---|---|
場景描述: 當控件中參數值爲空,點擊查詢後,會顯示報表中的全部數據 參考文檔: | ![]() |
場景描述: 有時候報表數據量大、不分頁顯示,查看靠後的數據非常麻煩。希望能通過指定的數字快速定位到對應的行數 參考文檔: | ![]() |
場景描述: 圖表可以跟随參數聯動 參考文檔: | ![]() |
場景描述: 利用決策報表的自動查詢功能,實現決策報表主體的下拉控件與圖表之間的自動查詢 參考文檔: | ![]() |
場景描述: 用戶希望下拉列表中的數據較爲完整,例如多列顯示 參考文檔: | ![]() |
場景描述: 多個下拉框可以實現填報聯動 參考文檔: | ![]() |
場景描述: 在實現填報聯動的基礎上,選擇第一個控件值後,其他聯動控件可以跟随選擇可選範圍内的第一個值 參考文檔: | ![]() |
場景描述: 在設計報表的過程中,有部分需求需要使用填報控件來實現查詢的功能 參考文檔: | ![]() |
場景描述: 在進行填報時,使用下拉框控件根據顯示值進行填報,控件失去焦點後,顯示其對應的顯示值,而不是實際值 參考文檔: | ![]() |
場景描述: 在制作參數界面時,希望下拉控件的數據是動态的 參考文檔: | ![]() |
場景描述: 後面一個參數下拉框的值會根據前一個參數的值的改變而改變 參考文檔: | ![]() |
場景描述: 參數面板中後面的下拉框根據前面下拉框中選擇的值,默認顯示列表中第一個值 參考文檔: | ![]() |
場景描述: 參數界面中,往往需要在一個控件中動态的控制其他控件的值 參考文檔: | ![]() |
場景描述: 參數聯動查詢時,希望下拉框選擇後,複選框可以跟着選中全部所有參數值 參考文檔: | ![]() |
場景描述: 查詢面板可以通過比較符号,如大於号>或小於号<,定義無窮區間查詢 參考文檔: | ![]() |
場景描述: 在報表預覽頁面實現通過參數可以查詢數據連接下的數據庫表信息 參考文檔: | ![]() |
場景描述: 在使用參數控件時,有時我們希望部分參數控件在沒滿足條件時不顯示,滿足條件後再顯示 參考文檔: | ![]() |
場景描述: 點擊任意位置,都可以展開下拉框選項 參考文檔: | ![]() |
場景描述: 在下拉框中輸入字符後,能夠精确匹配結果 參考文檔: | ![]() |
場景描述: 下拉框控件在中文輸入中,會主動識别漢語拼音,希望不識别拼音,只識别中文字,減少查詢性能的浪費 參考文檔: | ![]() |
5. 注意事項
勾選了「允許直接編輯」,移動端預覽時不支持直接編輯下拉框,如下圖所示: