私は頻繁に表形式のデータを表示する必要があり、すべての魔法が必要です。 。 。列の並べ替え、ページ分割など。列の名前をクリックしてユーザーに対して並べ替えが行われる列を使用することをお勧めします(通常はJavaScriptを使用しますが、ページネーションも行うと、画面、またはその列で並べ替えてから、最初のページに戻しますか?)しかし、ソートされていることをどのように示すのですか?そのための良いUIヒントは何ですか?列名はどのように見えるべきですか?また、私は他のすべての結果をグレーで色付けしたいのですが、画面が明るすぎて誰かが行を識別できるほどグレーではありませんが、グレーの量を増やすと表示されません黒いテキストを快適に読むのに十分なコントラスト。
正しく行われたテーブルの例は何ですか?
従来、「並べ替え」は、昇順または降順の並べ替えを表す上向き/下向き矢印で示されていました。列名は、太字のテキストや影付きの背景など、値よりもコントラストのレベルを高くする必要があります。
個人的には、交互の行に色を付けるときは、ユーザーがテーブルを操作する時間が長くなるほど効果が大きくなるため、通常は暗くなるのではなく明るくなります。
以下に、テーブルレイアウトオプションのいくつかの優れた例を示します。 http://patterntap.com/tap/collection/tables
現時点ですぐに使用できる例はありませんが、上記のアドバイス/設定に従っている、私のWebアプリ用に設計したテーブルの例を次に示します。
純粋に視覚的な観点から、 http://www.datatables.net/ (jQueryのプラグイン)を確認してください。ホームページのサンプルテーブルには、すでに説明した機能が実装されています。
技術的には、バックエンド技術が何を使用しているかによって異なります。 .Netサーバー上で実行している場合、ASP 3.5および4に含まれるコントロールは、jQueryとプラグインの依存関係なしで説明するように、非常に簡単に機能します。
ExtJSグリッドを確認してください。 http://dev.sencha.com/deploy/dev/examples/#sample-
私が見たJSフレームワークの最高のユーザー相互作用。 Marketoでのアプリケーションは、これに大きく依存しています。
「すべての魔法」を備えたデータグリッドが必要な場合は、dhtmlxGridを試してください: http://www.dhtmlx.com/docs/products/dhtmlxGrid/index.shtml
これは、私が目にした中で最も強力なJavaScriptグリッドの1つです。
両方の方法で並べ替える場合は、Windowsエクスプローラー/ノームノーチラスのように、上向き/下向きの古典的な矢印があり、通常はセルよりも暗い色です。