もうこれで十分。HTML上でテーブルを表示するなら「Sigma Grid」
業務システムを構築する際に、一覧表を表示するという処理は多い。そしてそのデータを並べ替えたり、チェックボックスを入れたりしたいというニーズも多く発生する。場合によってはカラムを並べ替えたり、一括更新したいなんて言われることもある。
それを一つ一つ実装していては非常に工数がかかってしまう。そこで使いたいのがこの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













本文はちゃんと「並べ替え」になってるのに、画像の解説は「並び替え」になってますよ。「並び替え」って誰が言い出したんでしょうね。細かいこといってごめんなさい。
Comment by 通りすがり | 2008/11/26 Wednesday
ご指摘ありがとうございます!修正しました。
Comment by admin | 2008/11/26 Wednesday
素晴らしいライブラリですねー。
紹介ありがとうございます。
ただ、、、リスト選択の挙動が不自然な感じがします。(バグ?)
http://www.sigmawidgets.com/products/sigma_grid2/demos/example_column_editor.html
このテーブルの「DropDown」列のリストを変更しても、
意図しない値に置き換わりませんか?
と同時にセルをクリックすると、横並びのセルが何故か変わっていく現象も確認しています。
私の環境だけでしょうか・・・
私のスキルではどこが問題なのか突き止めるにはいたりませんが、
オプション指定などでこの挙動を止めれるものなのでしょうかねぇ・・
Comment by accho | 2008/11/28 Friday
DropDownの列は、マウスで別な場所を選ぶと挙動がおかしいようですね(Mac + Safari3)。タブで移動した場合は、選んだ値が保持されていました。値が変わる現象も起きています。クリックする前の行の値がコピーされているような…そんな感じの挙動ですね。
Comment by admin | 2008/11/28 Friday