MOONGIFT

もうこれで十分。HTML上でテーブルを表示するなら「Sigma Grid」

タグ: [オープンソース] [ライブラリ] [開発] [HTML] [JavaScript] [LGPL]

業務システムを構築する際に、一覧表を表示するという処理は多い。そしてそのデータを並べ替えたり、チェックボックスを入れたりしたいというニーズも多く発生する。場合によってはカラムを並べ替えたり、一括更新したいなんて言われることもある。

ソートも並べ替えもページネーションも全部こみこみ

　

それを一つ一つ実装していては非常に工数がかかってしまう。そこで使いたいのがこのSigma Gridだ。

Sigma Gridはテーブルの表示とソート、データ編集などを可能にする超豪華ライブラリだ。LGPLライセンスの下に公開されているオープンソース・ソフトウェアだ。

Sigma Gridはデータの表示に際してJSONでデータを渡す必要がある。そのため既存のシステムにそのまま組み込むのは難しいかもしれない。だがその変更してもあまりあるメリットを享受できるに違いない。

画像表示とクリックアクションの例

　

まずカラムごとにソートができる。これは小数点や桁数をきちんと解釈した上でソートされる。セル内のデータを編集することはもちろん、ライブでバリデーションも行われる。編集されたカラムは色分けされて表示される。

テーブルについては大きさを変えることができる。さらにカラムの幅を変えることができ、長い文章の場合は「…」で省略してくれる。ページネーションにも対応し、簡易グラフ表示や印刷機能もある。

まだまだある。セルに画像やリンクを付けることができ、それはヘッダにも使える。ヘッダはグルーピングして多段にでき、ヘッダの下にテキストボックスやドロップダウンを配置（一括更新用！）もできる。フィルタリングを使ってテーブルデータを絞り込む機能があり、テキストのみならず数字に対しては以上以下といった条件指定ができる。

まだまだまだある。カラムはドラッグで移動させることができる。スキンに対応し、Vista風や中華風といったテーマが付属している。セル間における計算結果を表示する、イベント処理を感知する、メニューをつける、マウスオーバーでハイライトする、行の追加や削除処理にも対応するなどなど…とにかく多機能すぎて書ききれないほどだ。ああ、そうそう。左側のカラムを固定表示にすることもできるのだった。IDや会社名を固定に、横に長いデータをみる場合に絶賛の機能だ。

IE 6.0以上/FireFox 2.0以上/Safari 3.0以上/Opera9.0以上が対応ブラウザとなっている。が、Mac OSXの場合はCtrl+クリックするとコンテクストメニューが出てしまって意図した動作にならない場合もあった（設定を変えれば良いが）。

テーブルデータの表示はSigma Gridに任せよう。そうすれば皆ハッピーになる。

長いテキストは省略表示

　

入力項目をドロップダウンで選択

　

データ編集すると色分けされる

　

フィルタリング機能

　

メニュー

　

スキン

　

ヘッダ＋項目。これは一括更新に使えそうだ。

　

行の追加や削除に対応

　

左側のカラムを固定表示。複数を固定にできる。

　

# 2008年11月26日　誤字修正

Sigma Grid — Ajax editable data grid - DHTML grid control with flexibility and user API.
　http://www.sigmawidgets.com/products/sigma_grid2/index.html

November 26th, 2008 Posted by admin | 4 コメント