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:
ColdFusion MX: rowHeaderWidth 属性が変更されました。ColdFusion では、rowHeaderWidth 属性を使用しません。この属性は省略できます。
|
|||||
使用方法
このタグは、cfform タグブロックの内部で使用する必要があります。 アプレット形式のグリッドでは、クライアントが Java アプレットをダウンロードする必要があります。また、クライアントに最新の Java プラグインがインストールされていない場合、アプレット形式のグリッドを表示するために最新の Java プラグインをダウンロードしなければならないこともあります。Flash 形式のグリッドでは Flash コントロールを使用します。このツリーは、HTML 形式の cfform タグに埋め込むことができます。このタグを Flash 形式またはアプレット形式のいずれかで正しく動作させるには、JavaScript 対応のブラウザを使用する必要があります。
cfgrid には、cfquery からのデータを挿入できます。cfgrid 本文で cfgridcolumn タグを何も指定しない場合、ColdFusion は次のものを備えたグリッドを生成します。
このタグには終了タグが必要です。
|
|||||
cfgrid からデータを返す方法
このタグは、HTML フォームコントロールと同様に、フォームのアクションページに送信されるデータにフォーム変数を設定することでデータを返します。このデータはタグの SelectMode 属性値によって異なるため、返されるフォーム変数もこの属性の値によって異なります。 一般に、返されるデータは次のいずれかのカテゴリに当てはまります。
|
|||||
簡単な選択データ (SelectMode 属性が Single、Column、または Row の場合)
フォーム変数が cfform のアクションページに返すデータには、ユーザーが選択したセルについての情報が含まれます。このデータは、一般に、Form スコープ内の ColdFusion 変数という形でアクションページ内で使用できます。この変数には form.#GridName#.#ColumnName# というネーミング規則が適用されます。 SelectMode 属性の値に応じて、次のフォーム変数が返されます。
form.#GridName#.#ColumnName# = "SelectedCellValue" form.#GridName#.#ColumnName# = "ValueOfCellRow1, ValueOfCellRow2, ValueOfCellRowN" 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 および属性の値によって決まります。
|
|||||
例
次の例では、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"
|
HEIGHT | |
オプション、すべて | |
Default value: "300 (アプレットの場合のみ)"
コントロールの高さです (単位 : ピクセル)。 Flash 形式でこの属性を省略した場合、グリッドでは自動的にサイズ設定されます。 |
WIDTH | |
オプション、すべて | |
Default value: "300 (アプレットの場合のみ)"
コントロールの幅です (単位 : ピクセル)。 Flash 形式でこの属性を省略した場合、グリッドでは自動的にサイズ設定されます。 |
QUERY | |
オプション、すべて | |
コントロールに関連付けるクエリーの名前です。 |
SELECTMODE | |
オプション、すべて | |
Default value: "アプレット形式の場合 : Browse、"
Default value: "Flash 形式の場合 : Row"
コントロール内での項目の選択モードです。
次のものはアプレット形式でのみ使用されます。Flash 形式では、これらは Row として解釈されます。
|
FONT | |
オプション、すべて | |
テキストのフォントです。 |
FONTSIZE | |
オプション、すべて | |
テキストのサイズです (単位 : ポイント) |
ITALIC | |
オプション、すべて | |
Default value: "no"
|
BOLD | |
オプション、すべて | |
Default value: "no"
|
TEXTCOLOR | |
オプション、すべて | |
Default value: "Black"
テキストの色です。16 進数の値または色名で指定します。 16 進数の値を入力するには、"##xxxxxx" という形式を使用します。ここで、x は 0 ~ 9 または A ~ F です。シャープ記号 (#) は 2 つ使用するか、または使用しないでください。 サポートされる色の名前については、cfchartを参照してください。 |
SELECTCOLOR | |
オプション、すべて | |
選択されている項目の背景色です。
|
GRIDLINES | |
オプション、すべて | |
Default value: "yes"
|
ROWHEIGHT | |
オプション、すべて | |
行の最大高さ (単位はピクセル)cfgridcolumn type = "Image" と共に使用します。行内でグラフィックを表示するためのスペースを定義します。 |
COLHEADERS | |
オプション、すべて | |
Default value: "yes"
|
COLHEADERFONT | |
オプション、すべて | |
列ヘッダのフォントです。 |
COLHEADERFONTSIZE | |
オプション、すべて | |
列ヘッダテキストのサイズです (単位 : ポイント) |
COLHEADERITALIC | |
オプション、すべて | |
Default value: "no"
|
COLHEADERBOLD | |
オプション、すべて | |
Default value: "no"
|
COLHEADERTEXTCOLOR | |
オプション、すべて | |
列ヘッダの色です。
|
BGCOLOR | |
オプション、すべて | |
コントロールの背景色です。
|
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"
|
VSPACE | |
オプション、 | |
アプレット | |
コントロールの上下に確保する垂直方向の間隔です (単位 : ピクセル)。 |
HSPACE | |
オプション、 | |
アプレット | |
コントロールの左右に確保する水平方向の間隔です (単位 : ピクセル)。 |
ALIGN | |
オプション、 | |
アプレット | |
グリッドセルの内容の整列です。
|
INSERT | |
オプション、 | |
アプレット | |
Default value: "no"
|
DELETE | |
オプション、 | |
アプレット | |
Default value: "no"
|
SORT | |
オプション、 | |
アプレット | |
Default value: "no"
ソートボタンを追加して、ユーザーが選択した列で簡単なテキストソートを行います。
この設定にかかわらず、ユーザーは列ヘッダをクリックして列をソートすることができます。selectMode="browse" の場合、表はソートできません。 |
HREF | |
オプション、 | |
アプレット | |
各グリッドセルとリンクさせる URL またはその URL を含むクエリー列の名前です。 |
TARGET | |
オプション、 | |
アプレット | |
href URL を表示するターゲットフレームまたはウィンドウです。たとえば、"_blank" です。 |
APPENDKEY | |
オプション、 | |
アプレット | |
Default value: "yes"
|
HREFKEY | |
オプション、 | |
アプレット | |
appendKey="True" の場合に、各セルの href URL に追加された値のために使用するクエリー列です。cfgridcolumn タグを使用する場合、この列はこれらのタグのいずれかで指定する必要があります。 |
HIGHLIGHTHREF | |
オプション、 | |
アプレット | |
Default value: "yes"
|
ONVALIDATE | |
オプション、 | |
アプレット | |
ユーザー入力を検証する JavaScript 関数です。フォームオブジェクト、入力オブジェクト、および入力オブジェクト値が、関数に渡されます。検証に成功すると true が返されます。検証に失敗すると false が返されます。 |
ONERROR | |
オプション、 | |
アプレット | |
検証に失敗した場合に実行する JavaScript 関数です。 |
GRIDDATAALIGN | |
オプション、 | |
アプレット | |
Default value: "Left"
|
ROWHEADERS | |
オプション、 | |
アプレット | |
Default value: "yes"
|
ROWHEADERALIGN | |
オプション、 | |
アプレット | |
Default value: "Left"
|
ROWHEADERFONT | |
オプション、 | |
アプレット | |
行ラベルのフォントです。 |
ROWHEADERFONTSIZE | |
オプション、 | |
アプレット | |
行ラベルのテキストサイズです (単位 : ポイント) |
ROWHEADERITALIC | |
オプション、 | |
アプレット | |
Default value: "no"
|
ROWHEADERBOLD | |
オプション、 | |
アプレット | |
Default value: "no"
|
ROWHEADERTEXTCOLOR | |
オプション、 | |
アプレット | |
Default value: "Black"
グリッドコントロールの行ヘッダのテキストの色です。
|
COLHEADERALIGN | |
オプション、 | |
アプレット | |
Default value: "Left"
|
NOTSUPPORTED | |
オプション、 | |
アプレット | |
Default value: "「説明」を参照"
ブラウザが Java をサポートしない場合やブラウザの Java サポートが無効になっている場合に表示するテキストです。 デフォルトのテキストは、"<b> ColdFusion Java アプレットを表示するには、ブラウザが Java に対応していなければなりません。</b>" です。 |
PICTUREBAR | |
オプション、 | |
アプレット | |
Default value: "no"
|
INSERTBUTTON | |
オプション、 | |
アプレット | |
Default value: "Insert"
挿入ボタンのテキストです。selectmode="edit" の場合にのみ有効です。 |
DELETEBUTTON | |
オプション、 | |
アプレット | |
Default value: "Delete"
削除ボタンのテキストです。selectmode="edit" の場合にのみ有効です。 |
SORTASCENDINGBUTTON | |
オプション、 | |
アプレット | |
Default value: "A -> Z"
ソートボタンのテキストです。 |
SORTDESCENDINGBUTTON | |
オプション、 | |
アプレット | |
Default value: "Z -> A"
ソートボタンのテキストです。 |