Skip to content

業務で使える高機能グリッドを紹介

by : 2014/10/14

業務システムで必須の機能と言えばテーブルによる一覧表ではないかと思います。テーブルは主に2つの使い方があります。

マスタメンテナンス

売り上げ一覧であったり、商品一覧など検索条件にあったデータを一覧したり、マスタデータのメンテナンスを行うのに使われます。殆どの場合、一つのデータベーステーブルを基準として、マスタの値を表示します。

こうしたテーブルにおいて求められる機能はヘッダーの固定表示、複数行選択、選択した行の一括更新そしてソートではないでしょうか。

最近ではデータ表示においてAjaxを使って動的に読み込んだり、ページネーションをサポートしているケースもあります。

hifiveにおいても一覧表示を行うデモがあります。

上記画面はページネーション機能があり、読み込みはAjaxを使って動的に行われます。ヘッダーは固定表示になっており、ソート機能もサポートされています。行を選択した場合、そのステータスはページネーションしても保持されています。

さらにページネーションをリンクではなく、スクロール状態をとって自動的に追記読み込みするタイプもあります。

下に下にデータが読み込んでいけます。この場合、一番下に別なリンクがあってもクリックできませんので実装時には注意してください。

集計表

もう一つのタイプは集計表です。例えば会計であったり、売り上げデータの分析を行う際の表示などです。基本的に集計された数値を表示しますので、その場で修正するような機能はありません。ドリルダウンするためのリンクがついている場合はあります。

hifiveにおいては次のようなデモがあります。

集計表で求められるのはヘッダーの固定および左側の固定表示だと思います。ヘッダーには日付を使うことが多く、年月が経てば右へ右へと伸びていきます。そのため左側のカラムを固定しておかないと何の数字か分からなくなってしまいます。

ヘッダーについても同様で、数値が見やすいようにスクロールしないように設定されます。

マウスでの横スクロールは一般的にサポートされていませんので、キーボードを使って行うことになるかと思います。

集計表においては隣同士の数値が見やすく、比較できるようになっていなければなりません。素早く正しい経営判断を行うためにも細かくカスタマイズされた集計表を実現したいですね。

hifive – HTML5企業Webシステムのための開発プラットフォーム – hifive

HTML5企業Webシステムのための開発プラットフォーム

From → hifive, HTML5

コメントは停止中です。

%d人のブロガーが「いいね」をつけました。