web-dev-qa-db-ja.com

ネストされたフィルターの長いリストを表示する方法は?

私が取り組んでいるWebインターフェイスでは、ユーザーは長いリストから項目を選択する必要があります。彼らは何を探しているのかわからないかもしれません。

データベースでは、このリストは階層的に編成されていますが、リストはフラットです。すべてのレベルが横に並べて表示されます。

その階層を表示するフィルターをいくつか含めることで、ユーザーが必要なものを見つけられるようにしたいと思います。

これが私が考えていたものです:

1)階層の最初のレベルが左側に表示されます。ユーザーは、項目の1つを選択して、右側のリストを絞り込むことができます。

enter image description here

2)ユーザーがフィルターを選択したら、2番目のレベルのフィルターを選択することで、さらに先に進むことができます。左側では、適用したばかりのフィルターを削除したり、階層の1レベル深い新しいフィルターを適用したりできます。これは、さらにいくつかのレベルに進むことができます。 enter image description here

問題

私が抱えている問題は、第1レベルの階層のリストが非常に長くなる可能性があることを発見したことです。だから私がしたようにそれをフィルターとして側面に表示することは正しくないようです。なんらかのドロップダウンリストまたはスクロール可能なリストが必要ですが、このアイデアはあまり好きではありません。

もう1つの問題は、デフォルトで場所を選択する必要があることです。

これまでに思いついたのは以下のとおりです。私はそれでも満足していません。ご覧のとおり、スクロール可能なリストがあり、最初の項目がデフォルトで選択されています。選択されているので、その選択より下のレベルのドロップダウンを表示しています。

もっと良いアイデアはありますか?これはユーザーフレンドリーではないと思います。

ありがとう

enter image description here

6
Raphaëlle M

Breadcrumb メソッドを使用して問題を解決できます。長いリストがある場合は、ドロップダウンリストとオートコンプリート入力ボックスと組み合わせます。これが私の言いたいことです。

enter image description here

結果は次のように表示されます

enter image description here

2番目のプルダウンリストは最初のリストからフィルタリングされ、3番目のプルダウンリストは2番目のリストからフィルタリングされます。最初のリストに関連しない2番目のリストには何も表示されず、2番目と1番目のリストに関連しない3番目のリストには何も表示されません。

建物と場所でフィルタリングしたい場合は、2番目のリストをドロップできます。いくつかの例には、[X]を含めることができます。下のサンプルに火をつけました。

世界>アメリカ>レストラン>ファーストフードレストラン

このフィルターは、アメリカのすべてのファーストフードレストランを表示しますが、全世界のすべてのファーストフードレストランが必要な場合は、アメリカをドロップして[X]その横に

2
hsawires

私はこれを行う別の方法を考え出しました:

enter image description here

基本的に、フィルター済みの場所のリストを表示しています。既に選択されているデフォルトの場所があるので、最初の2つのレベルの階層でフィルタリングされたリストの一番上に表示しています。

デフォルトの場所は「Front office-HR Office」であり、倉庫Cの1階にあるため、これらの2つのフィルターが選択されています。

追加または削除できるもののようにフィルターを表示するのではなく、クラシックなドロップダウンメニューとして表示することを好みます。

最初のフィルターの「倉庫C」を別のフィルターに変更すると、2番目のドロップダウンが更新され、選択した新しいフィルター内の場所が表示されます。

説明するのは難しいです、これが理にかなっているといいのですが!

2
Raphaëlle M