天天看點

在DevExpress程式中使用PopupContainerEdit和PopupContainer實作資料展示

在一些資料的即時查詢場景中,我們可能需要對輸入資訊進行模糊查詢并進行選擇,例如在一些文本輸入場景,如輸入某個站點編碼或者裝置編碼,然後擷取符合的清單供使用者選擇的場景,本篇随筆介紹在DevExpress程式中使用PopupContainerEdit和PopupContainer實作資料展示。

在DevExpress中,我們如果需要好的體驗效果也可以用SearchLookupEdit來實作資料的查詢及展示,不過這個控件,需要提前準備好資料源,然後是基于固定的資料源進行搜尋的,如下所示。

在DevExpress程式中使用PopupContainerEdit和PopupContainer實作資料展示

這種可以在編輯框裡面輸入資料,并且可以實時根據輸入的内容進行過濾,是一種比較好的搜尋體驗,不過不好的地方就是資料需要提前預先加載,如果資料庫有成千上萬條記錄,那麼這種方式弊端就比較明顯了,是以不是很适合大資料,而且能夠即時進行資料搜尋展示的場景。 

除了第一點的搜尋方式外,也可以使用一種文本和按鈕合并的控件來實作資料的查詢選擇,控件名稱為ButtonEdit,界面效果如下所示。

在DevExpress程式中使用PopupContainerEdit和PopupContainer實作資料展示

當我們單擊文本輸入的右側按鈕控件後,可以讓它彈出一個對話框進行資料的選擇,對話框窗體裡面可以根據條件進行資料的分頁查詢,這種方式可以很好實作多條件的查詢選擇,輕按兩下記錄選擇好就關閉窗體界面即可。

在DevExpress程式中使用PopupContainerEdit和PopupContainer實作資料展示

上面的按鈕在設計界面裡面,為相關的事件添加代碼即可。

在DevExpress程式中使用PopupContainerEdit和PopupContainer實作資料展示

實作上面功能界面的代碼很簡單,如下所示。

除了上面界面的選擇方式外,在DevExpress裡面,我們也可以使用 PopupContainerEdit和PopupContainer實作資料展示,這種方式好處就是可以在錄入的時候進行及時查詢,而且資料是即時加載的,不會一次性加載所有的資料,為了示範這種方式的界面處理,我做了一個小案例,如下所示。

在DevExpress程式中使用PopupContainerEdit和PopupContainer實作資料展示

這種方式的展示,會及時列出相關的資料,在表格控件上選擇後傳回主界面。

在DevExpress程式中使用PopupContainerEdit和PopupContainer實作資料展示

如果按鍵Esc,那麼關閉彈出層并切換到輸入層,重新輸入,回車後進行查詢。

在DevExpress程式中使用PopupContainerEdit和PopupContainer實作資料展示

首先在代碼進行中,需要對輸入控件的按鍵進行處理。

在輸入回車的時候,我們執行資料查詢操作。

我們這裡測試了對資料字典的查詢顯示,隻是為了示範資料的即時查詢操作。

為了實作在清單中單擊或者使用Enter鍵進行選擇,我們對相關的事件進行了處理。

一旦容器焦點消失,我們讓焦點重新回到輸入控件上,如下代碼實作。

 整個案例代碼如下所示。