web-dev-qa-db-ja.com

データテーブルの高度なフィルタリング

問題

スライド式のデータテーブルがあり、その下部に固定されています。データの高度なフィルタリングが必要です。例えば：

 1. I want only the drug with exact name "Aspirin"
 2. I want drugs, that contain name "Aspirin" (e. g. "Aspirin for Kids")
 3. I want drugs, both "Lisoprophil" and "Aspirin"
 4. I want drugs, with exact name "Lisoprophil" and all that contain name "Aspirin"

また、簡単にデフォルトに戻す（または選択をクリアする）か、一部の基準を選択解除します。

技術的な制限があります-それは、ポップアップまたはダイアログウィンドウ、あるいはフルスクリーンではないものでなければなりません。

enter image description here

だから、ここで私はいくつかの仕事をしました。しかし、もちろん、それは完璧な解決策のようには見えません。

  1. ドラッグは1つずつ追加できます（ポップアップを終了し、フィルターアイコンをもう一度クリックします）
  2. ポップアップの外観とオプション（「すべてクリア」）はさまざまです。

enter image description here

enter image description here

enter image description here

文法の誤りがあれば申し訳ありません

gui-designweb-apptablesdashboardfilter
2
user80595

フィルターメニューのコンテンツについては、@ Alvaroのソリューションに同意します。

ただし、現在のレイアウトが主な問題であることがわかった場合は、Gmailフィルターで使用されるようなアコーディオンのようなメニューを使用することをお勧めします。位置は親レイアウト（あなたの場合、テーブルヘッダー）から拡張されただけなので、それはその列にのみ属しているように見えるので、私の見解ではかなり整然としています。

enter image description here

1
Dolorosa

ケースを正しく理解している場合は、次のことをお勧めします。

  • ダイアログでフィルターの編集（追加、削除など）を維持します。
  • 「正確な名前」と「含む可能性がある」を明確に区別します。

例えば：

enter image description here

1
Alvaro