FORMAT="applet" は非推奨になりました
非推奨になった機能の完全なリストについては、非推奨の機能を参照してください。
説明
cfform タグ内で使用します。ColdFusion フォーム内にグリッドコントロール(データのテーブル)を作成します。グリッド列および行のデータを指定するには、cfgridcolumn タグと cfgridrow タグを使用するか、query 属性を使用したうえで必要に応じて cfgridcolumn タグを併用します。
先頭にゼロが付く数値データ(例えば、郵便番号の 02674)を返す CFC メソッドでは、returnformat="string" を設定していても、このゼロはバインド式で 8 進数値として解釈され、それに相当する 10 進数値(この例の場合は 1468)として解釈されます。この問題を解決するには、URL バインドまたは JavaScript 関数(例えば cfajaxproxy を使用)によってルーティングされるバインドの場合は、returnformat=plain を設定することで数値を維持できます。また、先頭のゼロは、autosuggest コントロールの候補リストからは取り除かれます。
カテゴリ
シンタックス
<cfgrid> name="name" align="value" appendKey="yes|no" autoWidth="yes|no" bgColor="web color" bind="bind expression" bindOnLoad="yes|no" bold="yes|no" colHeaderAlign="left|right|center" colHeaderBold="yes|no" colHeaderFont="font_name" colHeaderFontSize="size" colHeaderItalic="yes|no" colHeaders="yes|no" colHeaderTextColor="web color" collapsible="false|true" delete="yes|no" deleteButton="text" enabled="yes|no" font="column_font" fontSize="size" format="applet|Flash|html|xml" gridDataAlign="left|right|center" gridLines="yes|no" groupfield="column name" height="integer" highlightHref="yes|no" href="URL" hrefKey="column_name" hSpace="integer" insert="yes|no" insertButton="text" italic="yes|no" maxRows="number" multirowselect="yes|no" notSupported="text" onBlur="ActionScript" onChange="ActionScript or bind expression" onError="JavaScript function name" onFocus="ActionScript function" onLoad="JavaScript function name" onValidate="JavaScript function name" pageSize="number of rows" pictureBar="yes|no" preservePageOnSort="yes|no" query="query name" resetHead="true|false" rowHeaderAlign="left|right|center" rowHeaderBold="yes|no" rowHeaderFont="font name" rowHeaderFontSize="size" rowHeaderItalic="yes|no" rowHeaders="yes|no" rowHeaderTextColor="web color" rowHeight="pixels" selectColor="web color" selectMode="mode" selectOnLoad="yes|no" sort="yes|no" sortAscendingButton="text" sortDescendingButton="text" stripeRowColor="web color" stripeRows="yes|no" style= "style specification" target="URL_target" textColor="web color" title="text" tooltip="text" visible="yes|no" vSpace="integer" width="integer"> <cfgrid> zero or more cfgridcolumn and cfgridrow tags
このタグの属性は attributeCollection 属性で指定でき、その値は構造体になります。attributeCollection 属性で構造体の名前を指定し、タグの属性名を構造体のキーとして使用します。 |
関連項目
cfajaximport、cfapplet、cfcalendar、cfgridcolumn、cfgridrow、cfgridupdate、cfform、cfformgroup、cfformitem、
cfinput、cfselect、cfslider、cftextarea、cftree、『ColdFusion アプリケーションの開発』の HTML グリッドの使用
履歴
ColdFusion 11 アップデート 11:resetHead 属性が追加されました。
ColdFusion 9.0.1: multirowselect 属性が追加されました。HTML グリッドのみでサポートされています。
ColdFusion 9:
- collapsible、 groupField 、onLoad および title 属性が追加されました。HTML グリッドのみでサポートされています。
- HTML グリッドで insert 属性を使用する機能が追加されました。
ColdFusion 8:HTML 形式のグリッドがサポートされるようになりました(format 属性の html 値や、bind、bindOnLoad、pageSize、preservePageOnSort、stripeRows、stripeRowColor の各属性など)。ColdFusion MX 7.01:onBlur イベントと onFocus イベントがサポートされるようになりました。ColdFusion MX 7: - format 属性が追加され、Flash 形式と XML 形式の出力がサポートされるようになりました。
- enabled、onChange、style、tooltip および visible の各属性が追加されました(Flash 形式の場合のみ)。
ColdFusion MX:rowHeaderWidth 属性が変更されました。ColdFusion では、rowHeaderWidth 属性を使用しません。この属性は省略できます。
属性
メモ:XML 形式では、ColdFusion はすべての属性を XML に渡します。用意された XSLT スキンでは、XML 形式のグリッドは処理または表示されませんが、アプレット形式および Flash 形式のグリッドは表示されます。 |
属性 | 必須 / オプション、形式 | デフォルト | 説明 |
---|---|---|---|
name | 必須、すべて | グリッドコントロールの名前です。 | |
align | オプション、アプレット | グリッドセルの内容の整列です。
|
|
appendKey | オプション、HTML、アプレット | yes |
|
autoWidth | オプション、HTML、アプレット | no |
|
bgColor | オプション、すべて | コントロールの背景色です。ほとんどの形式で、16 進数値またはカラー名を指定できます。16 進数の値を入力するには、「##xxxxxx」という形式を使用します。ここで、x は 0 ~ 9 または A ~ F です。シャープ記号(#)は 2 つ使用するか、または使用しないでください。サポートされるカラー名については、cfchart を参照してください。
|
|
bind | オプション、HTML | グリッドのコンテンツを埋め込むためのバインド式です。query 属性と一緒には使用できません。詳しくは、『ColdFusion アプリケーションの開発』の Ajax データ機能および開発機能の使用のフォームフィールドへのデータのバインディングを参照してください。 | |
bindOnLoad | オプション、HTML | yes | |
bold | オプション、すべて | no |
|
colHeaderAlign | オプション、アプレット | left |
|
colHeaderBold | オプション、すべて | no |
|
colHeaderFont |
オプション、すべて | 列ヘッダーのフォントです。 | |
colHeaderFontSize | オプション、すべて | 列ヘッダーテキストのサイズです(単位:ポイント)。 | |
colHeaderItalic | オプション、すべて | no |
|
colHeaders | オプション、アプレット、Flash | yes |
|
colHeaderTextColor | オプション、すべて | 列ヘッダーの色です。
|
|
collapsible | オプション、HTML | False | ユーザーがタイトルバーの矢印をクリックしてグリッド全体を折り畳むことができるかどうかを指定するブール値です。この属性を指定するとグリッドにタイトルバーが追加されます。 |
delete | オプション、HTML、アプレット | no |
|
deleteButton | オプション、HTML、アプレット | 削除 | 削除ボタンのテキストです。selectmode="edit" の場合にのみ有効です。 |
enabled | オプション、Flash | yes | Flash 形式の場合のみ : コントロールを有効にするかどうかを指定するブール値です。無効なコントロールはライトグレーで表示されます。 |
font | オプション、すべて | テキストのフォントです。 | |
fontSize | オプション、すべて | テキストのサイズです(単位:ポイント)。 | |
format | オプション、すべて | applet |
|
gridDataAlign | オプション、アプレット | left |
|
gridLines | オプション、アプレット、Flash | yes |
|
groupField | オプション、HTML | グループ化しない | グリッド行をグループ化します。この属性で指定した列によって編成します。各グループは折り畳むことができ、ヘッダに列名、グループフィールド値、およびグループ内のエントリ数が表示されます。 このオプションを設定すると、列プルダウンメニューに 2 つのグループ化オプションが表示されます。[グループ] 表示オプションにより、列のグループ化の有効と無効を切り替えます。[フィールド別のグループ] オプションにより、選択した列をグループ化で使用するように設定します。ユーザーは、マウスカーソルを列ヘッダ上に置いて表示された下矢印をクリックすることによって、プルダウンメニューを表示します。 この属性は、スタティックなグリッドでのみ使用できます。バインド式を使ってデータを取得するダイナミックグリッドでは使用しないでください。 |
height | オプション、すべて | 300 (アプレットの場合のみ) | コントロールの高さです (単位 : ピクセル)。 Flash 形式でこの属性を省略した場合、グリッドでは自動的にサイズ設定されます。 |
highlightHref | オプション、アプレット | yes |
|
href | オプション、HTML、アプレット | 各グリッドセルとハイパーリンクさせる URL またはその URL を含むクエリ列の名前です。 | |
hrefKey | オプション、HTML、アプレット | appendKey="True" の場合に、各セルの href URL に追加された値のために使用するクエリ列です。cfgridcolumn タグを使用する場合、この列はこれらのタグのいずれかで指定する必要があります。 | |
hSpace | オプション、アプレット | コントロールの左右に確保する水平方向の間隔です(単位:ピクセル)。 | |
insert | オプション、HTML、アプレット | no |
|
insertButton | オプション、アプレット | Insert | 挿入ボタンのテキストです。selectmode="edit" の場合にのみ有効です。 |
italic | オプション、すべて | no |
|
maxRows | オプション、すべて | グリッド内に表示する行の最大数です。 | |
multirowselect | オプション、HTML | no | 複数行の選択を許可します。特にこれは、バッチ処理が必要な場合 (複数のレコードを一度に移動する場合など) に便利です。 メモ:multirowselect="yes" の場合は行データが構造体の配列で送信されるのに対し、mutirowselect="no" の場合は構造体で送信されます。また、グリッドデータがユーザーによって操作される場合 (たとえば JavaScript を使用して、ボタンがクリックされたときにレコードを移動する場合)、method に POST を設定します。GET メソッドでは送信可能なデータ量に制限がかかるので、この設定が必要です。 |
notSupported | オプション、アプレット | 「説明」を参照 | ブラウザーが Java をサポートしない場合やブラウザーの Java サポートが無効になっている場合に表示するテキストです。デフォルトのテキストは、「<b>ColdFusion Java アプレットを表示するには、ブラウザーが Java に対応していなければなりません。</b>」です。 |
onBlur | オプション、Flash | グリッドがフォーカスを失ったときに実行される ActionScript です。 | |
onChange | オプション、HTML、Flash | Flash 形式:コントロール内のユーザーアクションに応じてコントロールに変化があったときに実行される ActionScript です。HTML 形式:bind 属性を指定して edit の値を selectMode に設定した HTML 形式のグリッドでは必須になります。データソースを更新する CFC メソッド、JavaScript 関数または URL を呼び出すバインド式です。URL を呼び出す場合、データは JSON 形式で URL ページに渡されるので、DeserializeJSON 関数を使用します。JavaScript バインドを使用して cfgridrow 引数と cfgridchanged 引数を URL に渡す場合、これらの引数を JSON 文字列にシリアル化する必要があります。 | |
onError | オプション、HTML、アプレット | HTML 形式のグリッドの場合:エラーが発生したときに実行する JavaScript 関数の名前です。 アプレット形式のグリッドの場合:検証が失敗したときに実行する JavaScript 関数の名前です。 |
|
onFocus | オプション、Flash | グリッドがフォーカスを取得したときに実行される ActionScript です。 | |
onLoad | オプション | グリッドがロードされてレンダリングされるときに実行するカスタム JavaScript 関数です。 | |
onValidate | オプション、アプレット | ユーザー入力を検証する JavaScript 関数です。フォームオブジェクト、入力オブジェクトおよび入力オブジェクト値が、関数に渡されます。検証に成功すると true が返されます。検証に失敗すると false が返されます。 | |
pageSize | オプション、HTML | 10 | ダイナミックグリッドの各ページに表示する行の最大数です。グリッドに表示する行数がページサイズを超えた場合は、指定した数の行のみが 1 ページに表示されます。その場合、ユーザーはすべてのデータを表示するために、ページ間を移動する必要があります。グリッドはデータを表示する必要がある場合にのみ、各ページごとにデータを取得します。 query 属性が指定されている場合、この属性は無視されます。 |
pictureBar | オプション、アプレット | no |
|
preservePageOnSort | オプション、HTML | no | グリッドのソート(または再ソート)を実行した後に、現在と同じ番号のページを表示するのか、1 ページ目を表示するのかを指定します。この属性が yes の場合は、グリッドのソート時に現在の選択ページが保持されます。 |
query | オプション、すべて | コントロールに関連付けるクエリの名前です。bind 属性とともに使用することはできません。 | |
resetHead | オプション、HTML | true の場合 <head> タグがクリアされます。 | |
rowHeaderAlign | オプション、アプレット | left |
|
rowHeaderBold | オプション、アプレット | no |
|
rowHeaderFont | オプション、アプレット | 行ラベルのフォントです。 | |
rowHeaderFontSize | オプション、アプレット | 行ラベルのテキストサイズです(単位:ポイント) | |
rowHeaderItalic | オプション、アプレット | no |
|
rowHeaders | オプション、アプレット | yes |
|
rowHeaderTextColor | オプション、アプレット | black | グリッドコントロールの行ヘッダーのテキストの色です。
|
rowHeight | オプション、アプレット、Flash、XML | 行の最大高さです(単位はピクセル)。cfgridcolumn type = "Image" とともに使用します。行内でグラフィックを表示するためのスペースを定義します。 | |
selectColor | オプション、すべて | 選択されている項目の背景色です。
|
|
selectMode | オプション、すべて | アプレット形式:Browse、HTML および Flash 形式:Row | コントロール内での項目の選択モードです。
|
selectOnLoad | オプション、HTML | yes |
|
sort | オプション、アプレット | no | ソートボタンを追加して、ユーザーが選択した列で簡単なテキストソートをおこないます。
|
sortAscendingButton | オプション、アプレット | A > Z | ソートボタンのテキストです。 |
sortDescendingButton | オプション、アプレット | Z > A | ソートボタンのテキストです。 |
stripeRowColor | オプション、HTML | 1 行おきに色を付ける場合の色を指定します。この色を付けない行の色は bgColor の設定によって決定されます。 | |
stripeRows | オプション、HTML | no | 1 行おきに色を付けるかどうかを示すブール値です。 |
style | オプション、Flash | CSS 形式のスタイル指定でなければなりません。type="text" の場合は無視されます。 | |
target | オプション、HTML、アプレット | href URL を表示するターゲットフレームまたはウィンドウです。例えば、"_blank" です。 | |
textColor | オプション、Flash、アプレット | テキストの色です。16 進数値またはカラー名で指定します。16 進数の値を入力するには、「##xxxxxx」という形式を使用します。ここで、x は 0 ~ 9 または A ~ F です。シャープ記号(#)は 2 つ使用するか、または使用しないでください。サポートされるカラー名については、cfchart を参照してください。 | |
title | オプション、HTML | グリッドの上部にタイトルとして表示されるテキストです。この属性を指定するとグリッドにタイトルバーが追加されます。 | |
tooltip | オプション、Flash | Flash 形式の場合のみ:マウスポインターをコントロールの上に置いたときに表示されるテキストです。 | |
visible | オプション、Flash | yes | Flash 形式の場合のみ : コントロールを表示するかどうかを指定するブール値です。表示されないコントロールが使用するスペースは空白です。 |
vSpace | オプション、アプレット | コントロールの上下に確保する垂直方向の間隔です(単位:ピクセル)。 | |
width | オプション、すべて | 300 (アプレットの場合のみ) | コントロールの幅。 Flash およびアプレット形式の場合は、ピクセル数で指定する必要があります。HTML 形式の場合は、有効なすべての CSS 寸法単位で指定でき、数値のみの値はピクセル数を示します。 Flash 形式または HTML 形式でこの属性を省略した場合、グリッドは自動的にサイズ設定されます。 |
使用方法
次の段落の大半は、すべてまたは 2 つ以上のグリッド形式に適用されるグリッド機能について説明しています。Flash フォームに固有の情報については、『ColdFusion アプリケーションの開発』の Flash フォームの作成を参照してください。HTML 形式のグリッドに固有の情報については、『ColdFusion アプリケーションの開発』の HTML グリッドの使用を参照してください。
このタグは、 cfform タグブロックの内部で使用する必要があります。アプレット形式のグリッドでは、クライアントが Java アプレットをダウンロードする必要があります。また、クライアントに最新の Java プラグインがインストールされていない場合、アプレット形式のグリッドを表示するために最新の Java プラグインをダウンロードしなければならないこともあります。Flash 形式のグリッドでは Flash コントロールを使用します。 このツリーは、HTML 形式の cfform タグに埋め込むことができます。このタグを Flash 形式またはアプレット形式のいずれかで正しく動作させるには、JavaScript 対応のブラウザーを使用する必要があります。
HTML 形式フォームでこのタグを使用して Flash 形式を指定し、height 属性と width 属性を指定しない場合、Flash 形式での表示は画面上の表示可能領域を超えるサイズになります。グリッドの後に他の出力(フォームコントロールなど)が続く場合、それを表示するにはスクロールする必要があります。したがって、HTML フォームの Flash グリッドの後に他の出力を続ける場合は、height と width の値を指定してください。 |
cfgrid には 、 cfquery からのデータを挿入できます。cfgrid 本文で cfgridcolumn タグを何も指定しない場合 、 ColdFusion は次のものを備えたグリッドを生成します。
- クエリの各列用の列。
テーブルの列名にあるハイフンやアンダースコア記号がスペースに置き換えられて作成された、各列のデフォルトのヘッダ。先頭の文字と スペースの後ろの文字は 大文字に変更されます。他の文字はすべて小文字です。
このタグには終了タグが必要です。メモ:グリッドセルの編集中に送信ボタンをクリックすると、セルの変更内容が失われることがあります。変更内容を正しく送信するには、セル内のデータを更新した後に、別のセルをクリックしてからフォームを送信することをお勧めします。
cfgrid データを アクションページに返す方法
次の情報は、すべての cfgrid 形式に当てはまります。また、HTML 形式のグリッドは、バインド式を使用してデータをダイナミックに取得できます。詳しくは、『ColdFusion アプリケーションの開発』の HTML グリッドの使用を参照してください。
ユーザーがフォームを送信すると、 cfgrid タグはフォームのアクションページに送信されるデータにフォーム変数を設定することによって、ユーザーのアクションに関する情報を送信します。このデータはタグの SelectMode 属性値によって異なるので、返されるフォーム変数もこの属性の値によって異なります。一般に、返されるデータは次のいずれかのカテゴリに当てはまります。
- 単純 な選択オペレーションから 返される簡単なデータ
- 挿入、 更新 および削除オペレーションから返される複雑なデータ
簡単な選択データ(SelectMode 属性が Single、Column または Row の場合)
フォーム変数が cfform の アクションページに返すデータには、ユーザーが選択したセルについての情報が含まれます。このデータは一般に、Form スコープ内の ColdFusion 変数という形でアクションページ内で使用できます。この変数には form.#GridName#.#ColumnName# というネーミング規則が適用されます。SelectMode 属性の値に応じて、次のフォーム変数が返されます。
SelectMode="single" form.#GridName#.#ColumnName# = "SelectedCellValue" SelectMode="column" form.#GridName#.#ColumnName# = "ValueOfCellRow1, ValueOfCellRow2, ValueOfCellRowN" SelectMode="row" form.#GridName#.#Column1Name# = "ValueOfCellInSelectedRow" form.#GridName#.#Column2Name# = "ValueOfCellInSelectedRow" form.#GridName#.#ColumnNName# = "ValueOfCellInSelectedRow"
複雑な更新データ (SelectMode 属性が Edit の場合)
ユーザーがグリッドにおこなった挿入、更新または削除の操作をアクションページに通知するために、グリッドからは大量のデータが返されます。ほとんどの場合、cfgridupdate タグを使用してフォーム変数からデータを自動的に収集できます。このタグはデータの収集、SQL 呼び出しの記述およびデータソースの更新をおこないます。cfgridupdate を使用できない場合は(例えば、返されたデータを複数のデータソースに分散する必要がある場合など)、フォーム変数を読み取るコードを記述します。このモードでは、ColdFusion により各 cfgrid に対して、次の Form スコープの配列変数が作成されます。
form.#GridName#.#ColumnName# |
更新、挿入、または削除情報が含まれているテーブルの各行は、それぞれの配列に並行したエントリを持つことになります。変更情報をすべて確認するには、次のようにして配列を反復処理します。送信された cfform 上で cfgrid とともに機能するようにするには、GridName 変数をそのグリッドの名前に設定し、ColNameList をグリッド列のリストに設定します。
<cfloop index="ColName" list="#ColNameList#"> <cfif IsDefined("form.#GridName#.#ColName#")> <cfoutput><br>form.#GridName#.#ColName#:<br></cfoutput> <cfset Array_New = form[#GridName#][#ColName#]> <cfset Array_Orig = form[#GridName#][original][#ColName#]> <cfset Array_Action = form[#GridName#]RowStatus.Action> <cfif NOT IsArray(Array_New)> <b>フォーム変数が配列ではありません。</b><br> <cfelse> <cfset size = ArrayLen(Array_New)> <cfoutput> 結果の配列サイズは #size# です。<br> 内容:<br> </cfoutput> <cfif size IS 0> <b>配列が空です。</b><br> <cfelse> <table BORDER="yes"> <tr> <th>ループインデックス</TH> <th>アクション</TH> <th>古い値</TH> <th>新規の値</TH> </tr> <cfloop index="LoopCount" from="1" to=#size#> <cfset Val_Orig = Array_Orig[#LoopCount#]> <cfset Val_New = Array_New[#LoopCount#]> <cfset Val_Action = Array_Action[#LoopCount#]> <cfoutput> <tr> <td>#LoopCount#</td> <td>#Val_Action#</td> <td>#Val_Orig#</td> <td>#Val_New#</td> </tr> </cfoutput> </cfloop> </table> </cfif> </cfif> <cfelse> <cfoutput>form.#GridName#.#ColName#: NotSet!</cfoutput><br> </cfif> </cfloop>
href 属性の使用
href 属性を使用してグリッド項目付きの URL を指定するときには、追加するキー値を 1 つのグリッド項目に制限するか、1 つのグリッド列またはグリッド行に拡大するかが selectMode 属性の値によって決まります。リンクされているグリッド項目をユーザーがクリックすると、cfgridkey 変数が次の形式で URL に追加されます。
http://myserver.com?cfgridkey=selection |
appendKey 属性を no に設定すると、グリッド値は URL に追加されません。selection の値は、selectMode および属性の値によって決まります。
- hrefKey 属性を指定した場合、selection はこの属性で指定した列のフィールド値となります。それ以外の場合は、次のいずれかです。
- selectMode="Single" の場合、selection はクリックした列の値となります。
- selectMode="Row" の場合、selection は、クリックした行に含まれる列の値をカンマで区切ったリストとなります(行内の最初のセルから順に含まれます)。
- selectMode="Column" の場合、selection は、クリックした列に含まれる行の値をカンマで区切ったリストとなります(列内の最初のセルから順に含まれます)。
href 属性を使用する場合は、target 属性も指定できます。target 属性では、標準の HTML ターゲット指定子(_blank、_parent、_self、_top)、または特定のフレーム名を指定できます。
ColdFusion 9.0.1 で行われた機能強化
- ColdFusion 9 では、ダイナミックグリッドを使用したフォームの場合、フォーム送信時に最初の行のデータを使用できます。ColdFusion 9.0.1 では、このデータは使用できません。
- type が Boolean で selectmode が browse(つまり select=false)の場合、列はチェックボックスで表示されますが、クリックしても反応しません。
例
次の例では、cfdocexamples データベース内の CourseList テーブルにある利用可能なコースのセットを表示する Flash フォームを作成します。cfgrid タグを使用するさらに複雑な例については、cfgridcolumn、cfgridrow、cfgridupdate を参照してください。
<! ---データベースをクエリしてグリッドに入力します。---> <cfquery name = "GetCourses" dataSource = "cfdocexamples"> SELECT Course_ID, Dept_ID, CorNumber, CorName, CorLevel FROM CourseList ORDER by Dept_ID ASC, CorNumber ASC </cfquery> <h3>cfgrid の例</h3> <i>現在利用可能なコース</i> <! --- cfgrid は、cfgrid タグ内に含まれている必要があります。---> <cfform> <cfgrid name = "FirstGrid" format="Flash" height="320" width="580" font="Tahoma" fontsize="12" query = "GetCourses"> </cfgrid> </cfform>