CFGRID |
説明 cfform タグ内で使用します。ColdFusion フォーム内にグリッドコントロール (データのテーブル) を作成します。グリッド列および行のデータを指定するには、cfgridcolumn タグと cfgridrow タグを使用するか、query 属性を使用した上で必要に応じて cfgridcolumn タグを併用します。
カテゴリ フォームタグ
シンタックス
    <cfgrid
       name = "name"
       format = "applet"、"Flash"、"xml"
       height = "integer"
       width = "integer"
       query = "query_name"
       selectMode = "mode"
       insert = "yes"、"no"
       delete = "yes"、"no"
       font = "column_font"
       fontSize = "size"
       italic = "yes"、"no"
       bold = "yes"、"no"
       textColor = "web color"
       gridLines = "yes"、"no"
       rowHeight = "pixels"
       colHeaders = "yes"、"no"
       colHeaderFont = "font_name"
       colHeaderFontSize = "size"
       colHeaderItalic = "yes"、"no"
       colHeaderBold = "yes"、"no"
       colHeaderTextColor = "web color"
       bgColor = "web color"
       maxRows = "number"
       次のように機能するのは Flash 形式の場合だけです。
       style = "style specification"
       enabled = "Yes"、"No"
       visible = "Yes"、"No"
       toolTip = "Tip text"
    onChange = "ActionScript"
       次のように機能するのはアプレット形式および XML 形式の場合だけです。
    autoWidth = "yes"、"no"
       vSpace = "integer"
       hSpace = "integer"
       align = "value"
       sort = "yes"、"no"
       href = "URL"
       hrefKey = "column_name"
       target = "URL_target"
       appendKey = "yes"、"no"
       highlightHref = "yes"、"no"
       onValidate = "javascript_function"
       onError = "text"
       gridDataAlign = "position"
       rowHeaders = "yes"、"no"
       rowHeaderAlign = "position"
       rowHeaderFont = "font_name"
       rowHeaderFontSize = "size"
       rowHeaderItalic = "yes"、"no"
       rowHeaderBold = "yes"、"no"
       rowHeaderTextColor = "web color"
       colHeaderAlign = "position"
       selectColor = "web color"
       notSupported = "text"
       pictureBar = "yes"、"no"
       insertButton = "text"
       deleteButton = "text"
       sortAscendingButton = "text"
       sortDescendingButton = "text">
    ゼロまたは 1 つ以上の cfgridcolumn タグと cfgridrow タグ
    </cfgrid>
関連項目 cfapplet、 cfcalendar、cfgridcolumn、cfgridrow、cfgridupdate、cfform、cfformgroup、cfformitem、cfgrid、cfinput、cfselect、cfslider、cftextarea、cftree
ヒストリ ColdFusion MX 7: format 属性が追加され、Flash 形式と XML 形式の出力がサポートされるようになりました。 enabled、onChange、style、tooltip、および visible の各属性が追加されました (Flash 形式の場合のみ)。 ColdFusion MX: rowHeaderWidth 属性が変更されました。ColdFusion では、rowHeaderWidth 属性を使用しません。この属性は省略できます。
メモ: | XML 形式では、ColdFusion MX はすべての属性を XML に渡します。用意された XSLT スキンでは、XML 形式のグリッドは処理または表示されませんが、アプレット形式および Flash 形式のグリッドは表示されます。
使用方法 このタグは、cfform タグブロックの内部で使用する必要があります。 アプレット形式のグリッドでは、クライアントが Java アプレットをダウンロードする必要があります。また、クライアントに最新の Java プラグインがインストールされていない場合、アプレット形式のグリッドを表示するために最新の Java プラグインをダウンロードしなければならないこともあります。Flash 形式のグリッドでは Flash コントロールを使用します。このツリーは、HTML 形式の cfform タグに埋め込むことができます。このタグを Flash 形式またはアプレット形式のいずれかで正しく動作させるには、JavaScript 対応のブラウザを使用する必要があります。
メモ: | HTML 形式フォームのこのタグに対して Flash 形式を指定し、height 属性と width 属性を指定しない場合、Flash 形式での表示は画面上の表示可能領域を越えるサイズになります。グリッドの後に他の出力 (フォームコントロールなど) が続く場合、それを表示するにはスクロールする必要があります。したがって、HTM L フォームの Flash グリッドの後に他の出力を続ける場合は、height と width の値を指定してください。
cfgrid には、cfquery からのデータを挿入できます。cfgrid 本文で cfgridcolumn タグを何も指定しない場合、ColdFusion は次のものを備えたグリッドを生成します。 クエリーの各列用の列。 テーブルの列名にあるハイフンやアンダースコア記号がスペースに置き換えられて作成された、各列のデフォルトのヘッダ。先頭の文字とスペースの後ろの文字は大文字に変更されます。他の文字はすべて小文字です。 このタグには終了タグが必要です。
メモ: | グリッドセルの編集中に送信ボタンをクリックすると、セルの変更内容が失われることがあります。変更内容を正しく送信するには、セル内のデータを更新した後に、別のセルをクリックしてからフォームを送信することをお勧めします。
cfgrid からデータを返す方法 このタグは、HTML フォームコントロールと同様に、フォームのアクションページに送信されるデータにフォーム変数を設定することでデータを返します。このデータはタグの 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#
    form.#GridName#.original.#ColumnName#
    form.#GridName#.RowStatus.Action
更新、挿入、または削除情報が含まれているテーブルの各行は、それぞれの配列に並行したエントリを持つことになります。変更情報をすべて確認するには、次のようにして配列を反復処理します。送信された 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# が設定されていません。</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 は、クリックした列に含まれる行の値をカンマで区切ったリストとなります (列内の最初のセルから順に含まれます)。
例 次の例では、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 は cfform タグの内部で使用する必要があります。 --->
    <cfform>
       <cfgrid name = "FirstGrid" format="Flash"
          height="320" width="580"
          font="Tahoma" fontsize="12"
          query = "GetCourses">
       </cfgrid>
    </cfform>

NAME |
| 必須、すべて
グリッドコントロールの名前です。

FORMAT |
| オプション、すべて
Default value: "applet" applet: Java アプレットを生成します。 Flash: Flash グリッドコントロールを生成します。 xml: XML 表記のグリッドを生成します。 XML 形式のフォームでは、生成された XML をフォームに含みます。 HTML 形式フォームでは、name 属性で指定された名前を使って XML を文字列変数に配置します。

HEIGHT |
| オプション、すべて
Default value: "300 (アプレットの場合のみ)" コントロールの高さです (単位 : ピクセル)。 Flash 形式でこの属性を省略した場合、グリッドでは自動的にサイズ設定されます。

WIDTH |
| オプション、すべて
Default value: "300 (アプレットの場合のみ)" コントロールの幅です (単位 : ピクセル)。 Flash 形式でこの属性を省略した場合、グリッドでは自動的にサイズ設定されます。

QUERY |
| オプション、すべて
コントロールに関連付けるクエリーの名前です。

SELECTMODE |
| オプション、すべて
Default value: "アプレット形式の場合 : Browse、" Default value: "Flash 形式の場合 : Row" コントロール内での項目の選択モードです。 Edit: グリッドデータを編集できます。セルを選択すると、セルタイプに応じたエディタが開かれます。 Row: ユーザーの選択範囲が、選択したセルを含む行に自動的に拡大されます。 次のものはアプレット形式でのみ使用されます。Flash 形式では、これらは Row として解釈されます。 Single: ユーザーの選択範囲が、選択したセルに制限されます。 Column: ユーザーの選択範囲が、選択したセルを含む列に自動的に拡大されます。 Browse: ユーザーはグリッドデータのブラウズのみを行うことができます。

FONT |
| オプション、すべて
テキストのフォントです。

FONTSIZE |
| オプション、すべて
テキストのサイズです (単位 : ポイント)

ITALIC |
| オプション、すべて
Default value: "no" yes: テキストをイタリックで表示します。 no

BOLD |
| オプション、すべて
Default value: "no" yes: テキストをボールドで表示します。 no

TEXTCOLOR |
| オプション、すべて
Default value: "Black" テキストの色です。16 進数の値または色名で指定します。 16 進数の値を入力するには、"##xxxxxx" という形式を使用します。ここで、x は 0 ～ 9 または A ～ F です。シャープ記号 (#) は 2 つ使用するか、または使用しないでください。 サポートされる色の名前については、cfchartを参照してください。

SELECTCOLOR |
| オプション、すべて
選択されている項目の背景色です。 オプション: textColor 属性の場合と同じです。

GRIDLINES |
| オプション、すべて
Default value: "yes" yes: 行と列の基準を有効にします。 no

ROWHEIGHT |
| オプション、すべて
行の最大高さ (単位はピクセル)cfgridcolumn type = "Image" と共に使用します。行内でグラフィックを表示するためのスペースを定義します。

COLHEADERS |
| オプション、すべて
Default value: "yes" yes: 列のヘッダを表示します。 no

COLHEADERFONT |
| オプション、すべて
列ヘッダのフォントです。

COLHEADERFONTSIZE |
| オプション、すべて
列ヘッダテキストのサイズです (単位 : ポイント)

COLHEADERITALIC |
| オプション、すべて
Default value: "no" yes: 列ヘッダをイタリックで表示します。 no

COLHEADERBOLD |
| オプション、すべて
Default value: "no" yes: 列ヘッダをボールドで表示します。 no

COLHEADERTEXTCOLOR |
| オプション、すべて
列ヘッダの色です。 オプション: textColor 属性の場合と同じです。

BGCOLOR |
| オプション、すべて
コントロールの背景色です。 オプション: アプレット形式では、textColor 属性の場合と同じです。Flash 形式では、16 進数の値でなければなりません。 Flash 形式の場合のみ: 反復パターンの行の背景色を指定する場合は、2 つの色をカンマで区切ります。

MAXROWS |
| オプション、すべて
グリッド内に表示する行の最大数です。

STYLE |
| オプション、
| Flash
CSS 形式のスタイル仕様でなければなりません。type="text" の場合は無視されます。

ENABLED |
| オプション、
| Flash
Default value: "Yes" Flash 形式の場合のみ: コントロールを有効にするかどうかを指定するブール値です。無効なコントロールはライトグレーで表示されます。

VISIBLE |
| オプション、
| Flash
Default value: "Yes" Flash 形式の場合のみ: コントロールを表示するかどうかを指定するブール値です。表示されないコントロールが使用するスペースは空白です。

TOOLTIP |
| オプション、
| Flash
Flash 形式の場合のみ: マウスポインタをコントロールの上に置いたときに表示されるテキストです。

ONCHANGE |
| オプション、
| Flash
コントロールでのユーザーのアクションに応じてコントロールが変わるときに実行される ActionScript です。

AUTOWIDTH |
| オプション、
| アプレット
Default value: "no" yes: グリッド幅内にすべての列が表示されるように、列幅を設定します。各列の幅が等しいか、関連する cfgridcolumn の width 属性で指定された値に応じた比率の幅になります。水平スクロールバーは使用できません。 no: 各列を等幅に設定するか、cfgridcolumn の width 属性で指定された値に設定します。

VSPACE |
| オプション、
| アプレット
コントロールの上下に確保する垂直方向の間隔です (単位 : ピクセル)。

HSPACE |
| オプション、
| アプレット
コントロールの左右に確保する水平方向の間隔です (単位 : ピクセル)。

ALIGN |
| オプション、
| アプレット
グリッドセルの内容の整列です。 Top Left Bottom Baseline Texttop Absbottom Middle Absmiddle Right

INSERT |
| オプション、
| アプレット
Default value: "no" yes: ユーザーはグリッドに行データを挿入できます。selectmode="edit" の場合にのみ有効です。 no

DELETE |
| オプション、
| アプレット
Default value: "no" yes: ユーザーはグリッドから行データを削除できます。selectmode="edit" の場合にのみ有効です。 no

SORT |
| オプション、
| アプレット
Default value: "no" ソートボタンを追加して、ユーザーが選択した列で簡単なテキストソートを行います。 yes: ソートボタンをグリッドコントロール上に配置します。 no この設定にかかわらず、ユーザーは列ヘッダをクリックして列をソートすることができます。selectMode="browse" の場合、表はソートできません。

HREF |
| オプション、
| アプレット
各グリッドセルとリンクさせる URL またはその URL を含むクエリー列の名前です。

TARGET |
| オプション、
| アプレット
href URL を表示するターゲットフレームまたはウィンドウです。たとえば、"_blank" です。

APPENDKEY |
| オプション、
| アプレット
Default value: "yes" yes: href と共に使用するときは、"CFGRIDKEY=" および選択したアイテムに関する情報を追加します。詳細については、「href 属性の使用」を参照してください。 no

HREFKEY |
| オプション、
| アプレット
appendKey="True" の場合に、各セルの href URL に追加された値のために使用するクエリー列です。cfgridcolumn タグを使用する場合、この列はこれらのタグのいずれかで指定する必要があります。

HIGHLIGHTHREF |
| オプション、
| アプレット
Default value: "yes" yes: href 属性の値に関連付けられたリンクを強調表示します。 no

ONVALIDATE |
| オプション、
| アプレット
ユーザー入力を検証する JavaScript 関数です。フォームオブジェクト、入力オブジェクト、および入力オブジェクト値が、関数に渡されます。検証に成功すると true が返されます。検証に失敗すると false が返されます。

ONERROR |
| オプション、
| アプレット
検証に失敗した場合に実行する JavaScript 関数です。

GRIDDATAALIGN |
| オプション、
| アプレット
Default value: "Left" Left: 列内のデータを左揃えにします。 Right: 列内のデータを右揃えにします。 Center: 列内のデータを中央揃えにします。

ROWHEADERS |
| オプション、
| アプレット
Default value: "yes" yes: 数字の行ラベルを示す列を表示します。 no

ROWHEADERALIGN |
| オプション、
| アプレット
Default value: "Left" Left: 行ヘッダのテキストを左揃えにします。 Right: 行ヘッダのテキストを右揃えにします。 Center: 行ヘッダのテキストを中央揃えにします。

ROWHEADERFONT |
| オプション、
| アプレット
行ラベルのフォントです。

ROWHEADERFONTSIZE |
| オプション、
| アプレット
行ラベルのテキストサイズです (単位 : ポイント)

ROWHEADERITALIC |
| オプション、
| アプレット
Default value: "no" yes: 行ラベルのテキストをイタリックで表示します。 no

ROWHEADERBOLD |
| オプション、
| アプレット
Default value: "no" yes: 行ラベルのテキストをボールドで表示します。 no

ROWHEADERTEXTCOLOR |
| オプション、
| アプレット
Default value: "Black" グリッドコントロールの行ヘッダのテキストの色です。 オプション: textColor 属性の場合と同じです。

COLHEADERALIGN |
| オプション、
| アプレット
Default value: "Left" Left: 列ヘッダのテキストを左揃えにします。 Right: 列ヘッダのテキストを右揃えにします。 Center: 列ヘッダのテキストを中央揃えにします。

NOTSUPPORTED |
| オプション、
| アプレット
Default value: "「説明」を参照" ブラウザが Java をサポートしない場合やブラウザの Java サポートが無効になっている場合に表示するテキストです。 デフォルトのテキストは、"<b> ColdFusion Java アプレットを表示するには、ブラウザが Java に対応していなければなりません。</b>" です。

PICTUREBAR |
| オプション、
| アプレット
Default value: "no" yes: イメージ (テキストなし) を、挿入、削除、ソートの各ボタンに配置します。 no: テキスト (イメージなし) を、挿入、削除、ソートの各ボタンに配置します。

INSERTBUTTON |
| オプション、
| アプレット
Default value: "Insert" 挿入ボタンのテキストです。selectmode="edit" の場合にのみ有効です。

DELETEBUTTON |
| オプション、
| アプレット
Default value: "Delete" 削除ボタンのテキストです。selectmode="edit" の場合にのみ有効です。

SORTASCENDINGBUTTON |
| オプション、
| アプレット
Default value: "A -> Z" ソートボタンのテキストです。

SORTDESCENDINGBUTTON |
| オプション、
| アプレット
Default value: "Z -> A" ソートボタンのテキストです。