面倒な表組みに便利！Data Gridプロセッサの使い方
最終更新日：2012年10月8日 shortlink：http://modx.jp/?id=859
MODX Evolution 1.0.6J-r7よりTVプロセッサ（出力フィルタ）のData Gridの機能が大幅に強化されているので、使い方を簡単に紹介します。Excelなどで作成したCSVファイルをアップロードすれば、Data Gridでフォーマット指定した形でコンテンツに反映されるようになっています。
コンテンツに表を掲載したい場合、リッチテキストエディタ（TinyMCEなど）で<table>を作り、幅や背景色などを指定しながら作成される方も多いのはないでしょうか？
Excelデータをコピー&ペーストしたとしても、背景色などは反映されないので結局は指定しないとダメでしたが、この機能を使えば簡単に表組みが作れるようになっています。
何ページでもページングできますし(もちろんキャッシュ対応)、手間のかかる表組みが簡単に作れるので、なかなか面白い機能です。
▲CSVファイルをアップロード
▲左寄せ、センター、右寄せ
▲列や行で背景色の指定もできます
▲ページング、フッター表示
設定方法
表データは、CSVアップロードの他にもTextAreaに入力する方法や、Excelで作成した表をコピー&ペーストでTextAreaに張り付ける方法もあります。
▲カンマ区切りでTextAreaに入力
この場合やCSVアップロードのときは、パラメータの「Column Delimiter」をカンマに変更します。
▲Excelで作成したデータをコピー＆ペーストで、TextAreaに張り付け
この場合はタブ区切りになりますが、これも反映されます。
▲データベースから読み込むこともできます。
▲＠SELECT id,pagetitle,longtitle from modx_site_content で、DBから作成リソースのID・ページタイトル・ロングタイトルを取得して一覧表示。
パラメータの設定
▲パラメータで表組みのフォーマットを決めておきます
◆パラメータ
Column Namesなど、列の数に合わせて入力する値は「カンマ区切り」です。
- Column Delimiter - 列の区切り文字を指定
- Column Wrapper - データが "データA","データB","データC" となっている時に 両側の「 " 」を削除するために指定
- Src Encode - ソースデータがCSVファイルの場合のエンコード
- Column Names - 列の名前
- Field Names - DBテーブルから呼び出すフィールド名
- Column Widths - 列の幅
- Column Alignments - left,center,rightなど、表示位置
- Column Colors - 列の背景色（#ccccccなど）
- Column Types - 列のタイプ（Integer, Float, Currency, Date, Text, Image, Hyperlink, Checkbox and Radio）
- Cell Padding - セルパディング
- Cell Spacing - セルの間隔
- Page Size - 1ページに何行表示するか
- Pager Location - ページ送りの表示位置
- Pager Class - ページ送りのclass名
- Pager Style - ページ送りのスタイルを指定
- Header Text - 入力するとヘッダーが表示される
- Footer Text - 入力するとフッターが表示される
- Grid Class - <table>に挿入されるclass名
- Grid Style - <table>に挿入されるスタイルを指定
- Item Class - <td>に挿入されるclass名
- Item Style - <td>に挿入されるスタイルを指定
- Alt Item Class - 交互に表示する行のclass名
- Alt Item Style - 交互に表示する行のスタイルを指定
- Column Header Class - ヘッダーに挿入されるclass名
- Column Header Style - ヘッダーに挿入されるスタイルを指定
- Empty message - 空の場合のメッセ―ジ
※「Column Colors」で色の指定をして、 「Item Style」や「Alt Item Style」にも背景色を入力すると、ソースにダブって挿入されるので表示が崩れます。
参考URL
http://rtfm.modx.com/display/Evo1/DataGrid+Widget
