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

Picture 770.png

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

 

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

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

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

Picture 771.png

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

 

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

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

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

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

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

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

Picture 772.png

長いテキストは省略表示

 

Picture 773.png

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

 

Picture 774.png

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

 

Picture 776.png

フィルタリング機能

 

Picture 777.png

メニュー

 

Picture 779.png

スキン

 

Picture 780.png

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

 

Picture 781.png

行の追加や削除に対応

 

Picture 783.png

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

 

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