本發(fā)明涉及計算機技術，尤其涉及一種數(shù)據(jù)篩選方法及裝置。

背景技術：

移動終端中的很多應用(Application，簡稱APP)中為用戶提供篩選框，可以使得用戶不需要輸入數(shù)據(jù)，直接選擇篩選框中的選項，以此來提升用戶體驗，并且APP也不需要對用戶的輸入進行校驗。

現(xiàn)有技術中，APP的篩選框由APP的前端代碼實現(xiàn)，例如，前端代碼可以通過JavaScript和css實現(xiàn)一個數(shù)據(jù)篩選器，前端代碼動態(tài)的獲取APP服務器的數(shù)據(jù)并且展示給用戶。

但是，APP的很多篩選框可能包含一些動畫，會使得前端代碼在運行時出現(xiàn)卡頓現(xiàn)象，導致APP前端代碼的性能下降。

技術實現(xiàn)要素：

本發(fā)明提供一種數(shù)據(jù)篩選方法及裝置，用于解決現(xiàn)有技術中篩選框功能由前端頁面事先所導致的前端代碼的性能下降的問題。

本發(fā)明第一方面提供一種數(shù)據(jù)篩選方法，包括：

接收前端頁面的調(diào)用篩選器請求，所述調(diào)用篩選器請求中包括待顯示數(shù)據(jù)；

根據(jù)所述調(diào)用篩選器請求中包括的待顯示數(shù)據(jù)，顯示第一篩選器并在所述第一篩選器中顯示所述待顯示數(shù)據(jù)；

將用戶在所述第一篩選器中的選擇結(jié)果返回給前端頁面，以使前端頁面顯示所述選擇結(jié)果。

進一步地，所述根據(jù)所述調(diào)用篩選器請求中包括的待顯示數(shù)據(jù)，顯示第一篩選器之前，還包括：

判斷所述調(diào)用篩選器請求中包括的待顯示數(shù)據(jù)是否為合法數(shù)據(jù)，若是，則向所述前端頁面返回失敗響應，所述失敗響應中包括數(shù)據(jù)不合法的提示信息。

進一步地，所述待顯示數(shù)據(jù)包括顯示標題、默認選中數(shù)據(jù)、顯示字段標識以及前端頁面構(gòu)造數(shù)據(jù)。

進一步地，所述根據(jù)所述調(diào)用篩選器請求中包括的待顯示數(shù)據(jù)，顯示第一篩選器并在所述第一篩選器中顯示所述待顯示數(shù)據(jù)，包括：

在所述第一篩選器的標題中顯示所述顯示標題；

根據(jù)所述顯示字段標識以及前端頁面構(gòu)造數(shù)據(jù)，在所述第一篩選器中顯示所述前端頁面數(shù)據(jù)中的每列數(shù)據(jù)；

根據(jù)所述默認選中數(shù)據(jù)，在所述第一篩選器中選擇所述每列數(shù)據(jù)中的默認顯示數(shù)據(jù)。

進一步地，所述接收前端頁面的調(diào)用篩選器請求，包括：

通過預設接口接收所述調(diào)用篩選器請求，所述預設接口用于所述前端頁面?zhèn)鬟f待顯示數(shù)據(jù)，以及用于所述前端頁面接收用戶的選擇結(jié)果。

本發(fā)明第二方面提供一種數(shù)據(jù)篩選裝置，包括：

接收模塊，用于接收前端頁面的調(diào)用篩選器請求，所述調(diào)用篩選器請求中包括待顯示數(shù)據(jù)；

顯示模塊，用于根據(jù)所述調(diào)用篩選器請求中包括的待顯示數(shù)據(jù)，顯示第一篩選器并在所述第一篩選器中顯示所述待顯示數(shù)據(jù)；

發(fā)送模塊，用于將用戶在所述第一篩選器中的選擇結(jié)果返回給前端頁面，以使前端頁面顯示所述選擇結(jié)果。

進一步地，還包括：

判斷模塊，用于判斷所述調(diào)用篩選器請求中包括的待顯示數(shù)據(jù)是否為合法數(shù)據(jù)，若是，則向所述前端頁面返回失敗響應，所述失敗響應中包括數(shù)據(jù)不合法的提示信息。

進一步地，所述待顯示數(shù)據(jù)包括顯示標題、默認選中數(shù)據(jù)、顯示字段標識以及前端頁面構(gòu)造數(shù)據(jù)。

進一步地，所述顯示模塊包括：

第一顯示單元，用于在所述第一篩選器的標題中顯示所述顯示標題；

第二顯示單元，用于根據(jù)所述顯示字段標識以及前端頁面構(gòu)造數(shù)據(jù)，在所述第一篩選器中顯示所述前端頁面數(shù)據(jù)中的每列數(shù)據(jù)；

選擇單元，用于根據(jù)所述默認選中數(shù)據(jù)，在所述第一篩選器中選擇所述每列數(shù)據(jù)中的默認顯示數(shù)據(jù)。

進一步地，所述接收模塊包括：

第一接收單元，用于通過預設接口接收所述調(diào)用篩選器請求，所述預設接口用于所述前端頁面?zhèn)鬟f待顯示數(shù)據(jù)，以及用于所述前端頁面接收用戶的選擇結(jié)果。

本發(fā)明所提供的數(shù)據(jù)篩選方法及裝置，前端頁面僅需要將篩選數(shù)據(jù)發(fā)送給應用程序，具體的顯示和篩選處理由應用程序來完成，從而在保證用戶正常使用篩選功能的前提下，使得前端頁面的執(zhí)行性能得到極大提升。并且，篩選器功能的更新不需要通過更新APP版本來實現(xiàn)，用戶不需要頻繁升級APP版本，因此，進一步提升了用戶體驗。

附圖說明

為了更清楚地說明本發(fā)明或現(xiàn)有技術中的技術方案，下面將對實施例或現(xiàn)有技術描述中所需要使用的附圖作一簡單地介紹，顯而易見地，下面描述中的附圖是本發(fā)明的一些實施例，對于本領域普通技術人員來講，在不付出創(chuàng)造性勞動性的前提下，還可以根據(jù)這些附圖獲得其他的附圖。

圖1為本發(fā)明提供的數(shù)據(jù)篩選方法的系統(tǒng)架構(gòu)圖；

圖2為本發(fā)明提供的數(shù)據(jù)篩選方法實施例一的流程示意圖；

圖3為本發(fā)明提供的數(shù)據(jù)篩選方法實施例二的流程示意圖；

圖4為本發(fā)明所提供的數(shù)據(jù)篩選方法中的顯示示意圖；

圖5為本發(fā)明提供的數(shù)據(jù)篩選裝置實施例一的模塊結(jié)構(gòu)圖；

圖6為本發(fā)明提供的數(shù)據(jù)篩選裝置實施例二的模塊結(jié)構(gòu)圖；

圖7為本發(fā)明提供的數(shù)據(jù)篩選裝置實施例三的模塊結(jié)構(gòu)圖；

圖8為本發(fā)明提供的數(shù)據(jù)篩選裝置實施例四的模塊結(jié)構(gòu)圖。

具體實施方式

為使本發(fā)明的目的、技術方案和優(yōu)點更加清楚，下面將結(jié)合本發(fā)明實施例中的附圖，對本發(fā)明實施例中的技術方案進行清楚、完整地描述，顯然，所描述的實施例是本發(fā)明一部分實施例，而不是全部的實施例。基于本發(fā)明中的實施例，本領域普通技術人員在沒有作出創(chuàng)造性勞動前提下所獲得的所有其他實施例，都屬于本發(fā)明保護的范圍。

圖1為本發(fā)明提供的數(shù)據(jù)篩選方法的系統(tǒng)架構(gòu)圖，如圖1所示，該數(shù)據(jù)篩選方法中涉及前端頁面、應用程序以及服務器，其中，前端頁面是指用戶所使用的APP所提供的可以供用戶在其上進行各種操作的頁面，應用程序是指APP的處理程序，服務器是指APP廠商的后臺服務器。在該架構(gòu)中，前端頁面和應用程序都位于用戶所操作的移動終端側(cè)，而服務器則是APP廠商專門設置的服務器。

React Native是可以支持上述架構(gòu)的一種技術，該技術是利用javascript和react構(gòu)建原生APP的一項技術。React Native支持通過編寫JSX代碼來實現(xiàn)應用程序的前端界面，支持動態(tài)下發(fā)代碼來實現(xiàn)界面和更改業(yè)務邏輯，從而使得移動終端中的APP及時地進行功能更新，讓用戶更快的體驗新功能，并且可以及時的修復一些問題，提供更好的用戶體驗。使用React Native時，上述架構(gòu)中的應用程序可以稱為Native。

本發(fā)明以下以React Native為例來進行說明，但是，需要說明的是，本發(fā)明的方案同樣也可以通過其他支持上述架構(gòu)的技術來實現(xiàn)。

圖2為本發(fā)明提供的數(shù)據(jù)篩選方法實施例一的流程示意圖，該方法站在Native的角度進行描述。如圖1所示，該方法包括：

S201、接收前端頁面的調(diào)用篩選器請求，該調(diào)用篩選器請求中包括待顯示數(shù)據(jù)。

當用戶打開某個APP中的一個頁面時，如果該頁面中需要顯示一個篩選框，則前端頁面可以通過特定的接口調(diào)用Native的篩選器，即，向Native發(fā)送一個調(diào)用篩選器請求，在該請求中，前端頁面需要告知Native需要在篩選器中顯示哪些數(shù)據(jù)以及默認選中的數(shù)據(jù)等信息。

其中，需要在篩選器中顯示的數(shù)據(jù)由前端頁面預先從服務器獲取，例如當用戶在一個租房頁面中選擇戶型時，該租房頁面就需要預先從服務器中獲取目前可供選擇的戶型數(shù)據(jù)有哪些，租房頁面進而將這些戶型數(shù)據(jù)通過特定接口告知Native。

S202、根據(jù)上述調(diào)用篩選器請求中包括的待顯示數(shù)據(jù)，顯示第一篩選器并在第一篩選器中顯示待顯示數(shù)據(jù)。

前端頁面通過特定接口調(diào)用Native的篩選器之后，Native側(cè)就會執(zhí)行對應的組件，即首先彈出篩選器，進而根據(jù)前端頁面所傳遞的數(shù)據(jù)在篩選器中顯示這些數(shù)據(jù)。

Native所彈出的篩選器會顯示在前端頁面的上方供用戶選擇。

S203、將用戶在第一篩選器中的選擇結(jié)果返回給前端頁面，以使前端頁面顯示所述選擇結(jié)果。

當Native顯示出篩選器之后，用戶可以在篩選器中進行選擇，用戶選擇并確認之后，Native可以將用戶的選擇結(jié)果返回給前端頁面，前端頁面會在對應的項前顯示用戶的選擇結(jié)果。

本實施例中，前端頁面僅需要將篩選數(shù)據(jù)發(fā)送給應用程序，具體的顯示和篩選處理由應用程序來完成，從而在保證用戶正常使用篩選功能的前提下，使得前端頁面的執(zhí)行性能得到極大提升。并且，篩選器功能的更新不需要通過更新APP版本來實現(xiàn)，用戶不需要頻繁升級APP版本，因此，進一步提升了用戶體驗。

可選地，Native可以通過如下的預設接口接收前端頁面的調(diào)用篩選器請求：

showMultiUnlinkSelectorWithOptions(options:Object,callback:Function)

其中，該接口中的Object表示前端頁面?zhèn)鬟f給Native的待顯示數(shù)據(jù)，F(xiàn)unction表示Native返回給前端頁面的結(jié)果，即用戶在篩選器中的選擇結(jié)果。

具體執(zhí)行時，前端頁面的代碼中可以加入該接口，當前端頁面執(zhí)行時，該接口執(zhí)行，會自動調(diào)用Native端的篩選器進行顯示和篩選處理。

另一實施例中，在上述步驟S102之前，還包括：

判斷上述調(diào)用篩選器請求中包括的待顯示數(shù)據(jù)是否為合法數(shù)據(jù)，若是，則向前端頁面返回失敗響應，該失敗響應中包括數(shù)據(jù)不合法的提示信息。

以上述showMultiUnlinkSelectorWithOptions接口為例，當前端頁面通過該接口調(diào)用Native的篩選器時，Native首先對前端頁面所傳遞的待顯示數(shù)據(jù)進行合法性校驗，具體地，Native需要校驗Object中的數(shù)據(jù)是否按照規(guī)定的格式進行傳輸，例如，每項待顯示數(shù)據(jù)項是否包括數(shù)據(jù)項標識以及數(shù)據(jù)項值兩個信息，如果不是，則在該接口的Function中填入空值，當前端頁面讀取Function值時，就可以獲知所傳輸?shù)臄?shù)據(jù)不合法。前端頁面可以將數(shù)據(jù)不合法的信息顯示給用戶，由用戶確認是否操作存在問題，或者，前端頁面也可以直接進行檢查，確認是否存在問題。

在上述實施例的基礎上，本實施例涉及篩選器顯示第一篩選器并在第一篩選器中顯示待顯示數(shù)據(jù)的具體過程。

其中，前端頁面向Native發(fā)送的待顯示數(shù)據(jù)可以包括顯示標題、默認選中數(shù)據(jù)、顯示字段標識以及前端頁面構(gòu)造數(shù)據(jù)。

以上述接口showMultiUnlinkSelectorWithOptions(options:Object,callback:Function)為例，待顯示數(shù)據(jù)在該接口中即為Object，表1為Object的一個具體實例：

表1

各字段的值的示例如下：

其中，上述的“text”、“id”、“paraname”為字段標識，字段標識后的內(nèi)容為字段值。

圖3為本發(fā)明提供的數(shù)據(jù)篩選方法實施例二的流程示意圖，如圖3所示，上述步驟S102具體包括：

S301、在第一篩選器的標題中顯示上述顯示標題。

S302、根據(jù)上述顯示字段標識以及前端頁面構(gòu)造數(shù)據(jù)，在第一篩選器中顯示上述前端頁面構(gòu)造數(shù)據(jù)中的每列數(shù)據(jù)。

以上述示例為例，前端頁面構(gòu)造的數(shù)據(jù)中有三組，代表需要在篩選器中顯示三列數(shù)據(jù)。顯示字段標識showKeys的值為['text','text','paraname']，即前端頁面希望在篩選器的第一列顯示“text”字段的值，第二列顯示“text”字段的值，第三列顯示“paraname”字段的值，篩選器進而根據(jù)該顯示字段標識以及前端頁面構(gòu)造數(shù)據(jù)，即options，顯示options中第一列的“text”字段的值，顯示options中第二列的“text”字段的值，以及顯示options中第三列的“paraname”字段的值。

S303、根據(jù)上述默認選中數(shù)據(jù)，在第一篩選器中選擇每列數(shù)據(jù)中的默認顯示數(shù)據(jù)。

篩選器除了將前端頁面構(gòu)造的數(shù)據(jù)都顯示出來，還需要選中一個默認選項。以上述示例為例，optionKeys的值["id",'val','id']，optionVals的值為[3,132,56]，代表篩選器需要在第一列默認選中字段標識為“id”，字段值為“3”的數(shù)據(jù)項中的“text”字段的值，即在第一列默認選中“3室”，以及，篩選器需要在第二列默認選中字段標識為“val”，字段值為“132”的數(shù)據(jù)項中的“text”字段的值，即在第二列默認選中“2廳”，以及，篩選器需要在第三列默認選中字段標識為“id”，字段值為“56”的數(shù)據(jù)項中的“paraname”字段的值，即在第三列默認選中“2衛(wèi)”。

圖4為本發(fā)明所提供的數(shù)據(jù)篩選方法中的顯示示意圖，如圖4所示，當用戶打開前端頁面點擊其中的“選擇戶型”選項時，前端頁面會通過預設接口調(diào)用Native的篩選器，Native進而會在前端頁面的上方顯示出篩選器，并根據(jù)前端通過接口傳遞的數(shù)據(jù)顯示出帶顯示數(shù)據(jù)，并且選中默認選項。

圖5為本發(fā)明提供的數(shù)據(jù)篩選裝置實施例一的模塊結(jié)構(gòu)圖，如圖5所示，該裝置包括：

接收模塊501，用于接收前端頁面的調(diào)用篩選器請求，該調(diào)用篩選器請求中包括待顯示數(shù)據(jù)。

顯示模塊502，用于根據(jù)上述調(diào)用篩選器請求中包括的待顯示數(shù)據(jù)，顯示第一篩選器并在第一篩選器中顯示上述待顯示數(shù)據(jù)。

發(fā)送模塊503，用于將用戶在第一篩選器中的選擇結(jié)果返回給前端頁面，以使前端頁面顯示該選擇結(jié)果。

該裝置用于實現(xiàn)前述方法實施例，其實現(xiàn)原理和技術效果類似，此處不再贅述。

圖6為本發(fā)明提供的數(shù)據(jù)篩選裝置實施例二的模塊結(jié)構(gòu)圖，如圖6所示，該裝置還包括：

判斷模塊504，用于判斷上述調(diào)用篩選器請求中包括的待顯示數(shù)據(jù)是否為合法數(shù)據(jù)，若是，則向前端頁面返回失敗響應，該失敗響應中包括數(shù)據(jù)不合法的提示信息。

另一實施例中，上述待顯示數(shù)據(jù)包括顯示標題、默認選中數(shù)據(jù)、顯示字段標識以及前端頁面構(gòu)造數(shù)據(jù)。

圖7為本發(fā)明提供的數(shù)據(jù)篩選裝置實施例三的模塊結(jié)構(gòu)圖，如圖7所示，顯示模塊502包括：

第一顯示單元5021，用于在第一篩選器的標題中顯示上述顯示標題。

第二顯示單元5022，用于根據(jù)上述顯示字段標識以及前端頁面構(gòu)造數(shù)據(jù)，在第一篩選器中顯示前端頁面數(shù)據(jù)中的每列數(shù)據(jù)。

選擇單元5023，用于根據(jù)上述默認選中數(shù)據(jù)，在第一篩選器中選擇每列數(shù)據(jù)中的默認顯示數(shù)據(jù)。

圖8為本發(fā)明提供的數(shù)據(jù)篩選裝置實施例四的模塊結(jié)構(gòu)圖，如圖8所述，接收模塊501包括：

第一接收單元5011，用于通過預設接口接收上述調(diào)用篩選器請求，該預設接口用于前端頁面?zhèn)鬟f待顯示數(shù)據(jù)，以及用于前端頁面接收用戶的選擇結(jié)果。

本領域普通技術人員可以理解：實現(xiàn)上述各方法實施例的全部或部分步驟可以通過程序指令相關的硬件來完成。前述的程序可以存儲于一計算機可讀取存儲介質(zhì)中。該程序在執(zhí)行時，執(zhí)行包括上述各方法實施例的步驟；而前述的存儲介質(zhì)包括：ROM、RAM、磁碟或者光盤等各種可以存儲程序代碼的介質(zhì)。

最后應說明的是：以上各實施例僅用以說明本發(fā)明的技術方案，而非對其限制；盡管參照前述各實施例對本發(fā)明進行了詳細的說明，本領域的普通技術人員應當理解：其依然可以對前述各實施例所記載的技術方案進行修改，或者對其中部分或者全部技術特征進行等同替換；而這些修改或者替換，并不使相應技術方案的本質(zhì)脫離本發(fā)明各實施例技術方案的范圍。