データグリッド間のドラッグ＆ドロップ
この例題では、4D Ajax Frameworkのオブジェクトから買い物かごを作成する方法をお見せします。このページでは3つのデータグリッドが使用されています: 製品リスト、買い物かごアイコン、そして買い物かごリストです。オブジェクトは製品リストデータグリッドからドラッグされて、買い物かごアイコンデータグリッドにドロップされます。ドロップされると、買い物かごデータグリッドの内容は、定義されたルールに基づき更新されます。
製品リスト
製品リストにはテキストと画像が格納されます。データグリッドオブジェクトはネイティブには画像をサポートしません。しかしHTMLコンテンツを受け入れるので、画像を挿入できます。
データの構築
テーブルには画像を含む製品の情報が格納されています。このテーブルは、画像を除き、データグリッドのDCSを作成するために使用されます。画像をHTMLコンテンツとして追加するために、4Dテーブルから画像を読み込むURL呼び出しを構築し、DCSに追加します。4Dテーブルから画像を取得するURLのシンタックスは以下のとおりです。
シンタックス: /DAX/GetImage/x.y.z?sessionId=sID)
x = テーブル番号
y = フィールド番号
z = レコード番号
sID = セッションID (DAX_Dev_Session_SessionID から返されます。)
ドラッグ可能な一つのセルとしてグリッドを表示するために、HTMLコンテンツが作成され、他のデータグリッド値もHTMLコンテンツに統合されます。他のセルは隠され、1つのセルだけが表示され、ドラッグ可能です。
シンタックス: var myContent = ' ... html ... + myGrid.getCellValue(row,column) + ... html ...';
myGrid.setCellValue (row, column, myContent);
ドラッグ可能オプションを有効にする
データグリッドのドラッグ化オプションを有効にするには、コマンド setDragCells をグリッドオブジェクト上で十戸しなければなりません。このコマンドはグリッドオブジェクトが作成された後にも呼ばれなければなりません (dragGrid.go();)。
シンタックス: dragGrid.setDragCells(row, column, isDroppable);
買い物かごアイコン
データグリッドを買い物かごアイコンの表示用に使用しています。なぜならデータグリッドはドロップ可に設定できるからです。買い物かごアイコンは 1x1 のデータグリッドで、データを含まず、CSSでコントロールされた画像を表示っします。
データグリッドのドロップオプションを有効にする
1) どのセルにドロップ可能かを指定するために、関数 'setDropCells' を呼び出します。この関数はドロップゾーンの有効/無効を切り替えるために使用します。デフォルトで、データグリッドのすべてのセルはドロップゾーンに設定されています
シンタックス: myGrid.setDropCells(row, column, isDroppable);
2) データグリッド上のドロップ可オプションを有効にするために、グリッドオブジェクトの 'ondragrelease' イベントを有効にしなければなりません。この場合、データグリッドには1つのセルのみです。JavaScriptは以下のようになります。
シンタックス: myGrid.ondragrelease = YourFunction;
3) ドラッグオーバーされたセルを視覚的に示すためには、グリッドオブジェクトの 'ondragover' イベントを有効にします。このイベント用に javascript
関数を定義しました。この関数はスタイルシートを返します。この例題では完全なショッピングカートの画像を返します。
シンタックス: myGrid.ondragover = YourFunction;
//javascript
function onDragOverEvent(cellRef, event) {
return 'carthover_style';
}
//CSS
.dax_datagrid .carthover_style {
background-image: url('/dax/images/sc_full.jpg');
border:2px solid #FFFFFF;
}
ショッピングカート
ショッピングカートの内容を表示するためにデータグリッドが使用されています。カートアイコンデータグリッドにオブジェクトがドロップされるたびに、ショッピングカートデータグリッドが更新されます。この例題では、項目がカートに挿入されるか、すでに項目がカートに存在する場合に、数量と料金が行使されます。また項目がカートに追加されると、それらは項目名で並び替えられます。
データグリッドの作成
ショッピングカートデータグリッドを作成するために、'dax_dataGrid' 関数を使用しています。セレクションをして使用するDCSには必要なフィールドが含まれていて、1ヘッダ行が定義されています。
シンタックス: myGrid = new dax_dataGrid(selection, location, headerRows, lockedLeftColumns, useControlColumn);
データグリッドフッタ設定
データグリッドのフッタ行を作成し、必要な情報を埋め込むために、3つのコマンドを実行する必要があります。
1) フッタ行を作成
シンタックス: displayGrid.setFooterRows(number of footer rows);
2) 1度に1つ、フッタ行番号の実際の行を取得します (これはフッタ行番号とは異なるものです)。
シンタックス: myRowNumber = myGrid.getFooterRowNumber(footerRowNumber);
3) 'setCellValue' を使用して、ここのフッタセルに必要な情報を埋め込みます。
シンタックス: myGrid.setCellValue(myRowNumber, column, content);
ドロップ処理
カートアイコンデータグリッドにオブジェクトがドロップされた後、'ondragrelease' イベントに割り当てた関数が呼び出され、この時点で起こったことを処理します。ここでは関数はonDragReleaseEventという名前で、いかの3つの関数を含んでいます。
1) 最初の関数呼び出しは getCurrentRow です。これはドロップされたオブジェクトから必要な情報を取り出します。まず 'dragObjectSource' 関数を使用してドロップされたセルを取得します。次にこのオブジェクトの行番号を使用して対応するグリッドセルの値を取得します。
//get dropped object cell
シンタックス: var originCell = dax_bridge.hoverDragging.dragObjectSource;
//save contents of the specified field
シンタックス: field_value1 = myGrid.getCellValue(originCell.row, column);
2) この時点で、ドロップされたオブジェクトの値がわかっており、必要な作業が行えます。次の関数呼び出しは
'UpdateCart' に対して行われ、ショッピングカートデータグリッドの内容を更新します。関数にはいつどの行を更新するかのロジックが含まれますが、最後にはもう一つの 'setCellValue' 関数への呼び出しを行います。
シンタックス: myGrid.setCellValue(row, col, content);
3) 最後の呼び出しは 'updateFooters' に対して行われ、フッタ行の更新を行います (小計、税額、総計)。これを行うために 'getFooterRowNumber' と 'setCellValue' を連携して使用します。
シンタックス: myGrid.setCellValue(myGrid.getFooterRowNumber(footerRowNumber), col, content);