web-dev-qa-db-ja.com

テーブルセルに大きなデータセットを表示する

大規模なデータセットを表示するための最良の方法は何ですか。 50ワード、表のセル内?クリックすると、テキスト全体がポップアップボックスに表示されるように、リンク可能なテキストの一部を考えています。残りのテキストを表示するためにホバー/ツールチップオプションでいくつかの単語を表示する方法の別のアイデア。

考え?

私が使用している構造の例については、これを参照してください jsfiddle

3
stavarotti

あなたの考えはどちらも良いです、そして、これは3番目です。

データセルに「詳細」と書かれた小さなリンクを含めると、クリックするとテーブルセルが動的に展開され、全文が表示されます。展開すると、リンクが「未満」に変わり、テーブルのセルが折りたたまれます。

選択するオプションの決定は、コンテキスト内で完全なテキストを表示できるユーザーの重要性に依存します。

3

私はこれらのすべてのオプションを探りました:ホバー、エキスパンド、Twitter風のスライディングペインなどなど、すべて長所と短所があります。

wordカウントがセルのコンテンツを超える可能性が低い場合は、ホバーします。すべてのセルがホバーで拡大する必要がある場合、そしてそれがいかに煩わしいかという問題を見ることができます。

非表示のコンテンツが広すぎない場合、expandはかなりうまく機能するようです。このアプローチは、ホバー時にオンにしないことをユーザーに制御を渡します

新しいウィンドウ/スライディングdivまたはセルの内容が本当に大きい場合は何でも機能しますが、なぜこのような情報をテーブルに入れるのか自問する必要がありますか?とはいえ、このアプローチは接線方向にリンクされ、セル内のオブジェクトに役立つ追加の属性を格納するのに最適であり、ユーザーがオブジェクトのリストをスキャンし、最も関連性の高いレコードを特定して表示できるようにする方法として使用しましたそのレコードに関連付けられたすべての属性を持つdiv。この例としては、休日のメモのテーブルがあります。セルには、ユーザーが特定するアクティビティの説明が一覧表示され、クリックすると、ウィンドウ、ペインなど、関連する詳細が表示されます。たとえば、レンタカーの価格、昼食の詳細などのアクティビティ。ユーザーが列を比較しなければならない場合の良いアプローチではありません。

しかし、一番下の行は、どちらのオプションを選択してもテストです!

0
colmcq

たぶん別の解決策...行をロールオーバーすると、このセルの完全な内容をテーブルの下の情報バーに遅延なく表示できます。しかし、それは、ユーザーがセル情報をどれだけ速く探索しなければならないかに依存します。それ以外の場合、ほとんどの場合、ツールチップは優れたソリューションです。

0
sysscore

私はそれが1つのセルについてではなく、あなたのテーブルにこれらのセルの束があると仮定しています。私が書いたことをすべて無視しない場合は-そしておそらく私の投稿を削除するように私に通知します:)

はいの場合、ポップアップとツールチップのどちらを使用するかを決定する前に、いくつかの分析を行う必要があります

  • その大部分を読む頻度(製品を閲覧している場合、頻繁にそれについていくつかの情報を確認したい可能性があります-これは、ポップアップが余分な手順を含むため、おそらく私を困らせることを意味しますウィンドウを閉じて開く-ツールチップ)

  • それらを比較する機能(短期記憶のために手を伸ばす、人が一方のウィンドウを閉じて他方のウィンドウを開いている間に情報が期限切れにならないようにしたいので、ツールチップをもう一度)

  • 人が読んでいるコンテンツに焦点を合わせる機能(ツールチップの代わりにポップアップを使用するほうがはるかに快適です。特に、その中に複雑なアクションがある場合は、ポップアップが表示されます)

  • コンテンツ構造(そのコンテンツが一貫して構造化されている場合は、最初の2つ目から読み方を学習するため、多くのデータセルを簡単にざっと目を通すよりも簡単です。そうでない場合は、それぞれに多くの時間を費やすため、ポップアップが表示されます)

  • そのコンテンツのサイズ(特にページのセルよりも大きい場合は、ページにいくつかの巨大なツールチップを必要としません-他のセルをカバーすることになるため、ポップアップします)

0