7

最近、HTML テーブルのデザインの問題に遭遇しました。CSプログラムをBSプログラムに再構築したい。これは UI スクリーン キャプチャです。

ここに画像の説明を入力

ご覧のとおり、列が多すぎます。水平スクロールバーが表示されます。ユーザー エクスペリエンスを向上させるにはどうすればよいですか?

いくつかの列を 1 つに結合しようとしましたが、いくつかの新しい問題が発生しました — 混乱、フィルター処理と並べ替えがうまくいきません。

いい例があれば見せてください。

4

3 に答える 3

5

長い間考えた後、完全ではありませんが、いくつかの回避策を見つけました。参照用にここに私のソリューションを投稿します。

1、長すぎる列の水平スクロールバーを許可します。 ここに画像の説明を入力 これは、次のようにテーブルをラップする DIV タグを追加することで簡単に実行できます。

<div style="overflow-x: auto;">
    <table class="no-wrap">
    <!-- stuff -->
    <!-- no-wrap is a AdminLTE style which makes the text in the table do not wrap -->
    </table>
</div>

2,表示する列をユーザーが制御できるようにします。これは、Bootstrap に基づくモーダル ダイアログを追加することで実現しました。 ここに画像の説明を入力 表示列数を減らすと、狭い画面でも見やすくなります。

これは、いくつかの JavaScript コードを作成し、プロジェクトで一般的にすることで難しくありません。ユーザーの構成をローカルに保存し、次にユーザーがこのページを開いたときに状態を復元するために、ローカル ストレージテクノロジを十分に活用することを忘れないでください。私のソリューションでは、ローカル ストレージ キーは次のようになります。

my-datatable-hide-col:/business/order:tb-order

my-datatable-hide-colは固定、/business/orderはパス、tb-orderはテーブルの ID です。このローカル ストレージ キーの値は次のようになります。

[0, 3, 4]

これは、列 0、列 3、および列 4 が非表示になることを意味します。値が存在しないか空の場合、列は非表示になりません。

3,ユーザーが列の順序を制御できるようにします。上記の列の表示状態の制御に似ています。 ここに画像の説明を入力

これは、JavaScript コードを記述して一般化することでも実現できます。

于 2017-07-30T08:15:56.353 に答える
0

より良いユーザー エクスペリエンスに関連して、1 行おきにわずかに異なる色が付けられていると役立ちます (iTunes 11 がデザイン全体を変更する前に iTunes が行っていたように)。これにより、ユーザーは各行を簡単に区別できます。

これが私が意味することの例です: http://alistapart.com/article/zebratables

これを実装する方法は次のとおりです（非常に簡単です）： http://css-tricks.com/snippets/css/css3-zebra-striping-a-table/

また、これはクライアントが何を望んでいるかによって異なりますが、明らかに、実際には使用されていない列を削除する必要があります。値が小さい列 (1 桁の数字など) は、できるだけ小さくします。

これのいくつかが役立つことを願っています...

于 2013-04-22T15:08:22.663 に答える