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"

ソートボタンのテキストです。