データ・テーブルで選択した行のインデックスを戻す

JSF には、チェック・ボックスの「選択列」をデータ・テーブルに組み込む機能が用意されています。 このチェック・ボックスの列を使うと、テーブルの行を選択して (複数可)、それを対象に特定のアクションを実行することができます。例えば、複数の行を選択して、削除することが可能です。

特定の配置のプロパティーを、レコードの配列に設定して、その配列を選択列付きで Web ページに表示するよう指示することができます。 これによって、ユーザーは、チェック・ボックスを 1 つ以上選択できるようになります。EGL は、選択された行のインデックスを表す整数の配列を戻すことによって、どの行が選択されたかを示します。例えば、データ・テーブルの 1 行目と 3 行目と 4 行目のチェック・ボックスが選択された場合、EGL は整数の配列を [1,3,4] に設定します。EGL によって、0 ベースの JSF 配列が 1 ベースの EGL 配列に自動的に変換されます。

このように、JSF データ・テーブルで複数行の選択を可能にするためには、次の 2 つの配列が必要となります。
このタスクには、次のような前提条件があります。
これらのステップを実行して、複数の選択列を持つデータ・テーブルをセットアップします。 このサンプルでは、顧客とその購入合計のリストを表示して、 選択した行を (複数可) まとめて加算できるようにします。
  1. EGL 制御の Web ページの JSF ハンドラーで、ページに表示するデータのテーブルを表す、レコードの配列を作成します。
    purchaseList customerPurchase[3];
    このサンプルでは、次のレコード・パーツのサンプルを使用します。
    record customerPurchase type BasicRecord
        custName        string;
        totalPurchases  decimal(10,2);
    end
  2. ページ上でユーザーに選択させるデータをこの配列に取り込むため、データを取り出します。このトピックの後半にあるサンプルでは、配列にリテラル値を割り当てていますが、データベースからデータを取り出すこともできますし、他の方法で配列へのデータ取り込みを行うこともできます。JSF ハンドラーの onPreRenderFunction プロパティーで指定されている関数に、この取得ロジックを組み込んでもかまいません。
  3. 選択されたレコードのインデックスを保持する、整数の配列を作成します。
    allSelectedRows  int[0];
  4. レコード変数の場合、選択したレコードのインデックスを保持する配列の名前に、selectedRowItem プロパティーを設定する。
    purchaseList customerPurchase[3]
       {selectedRowItem = allSelectedRows};
  5. Web ページ上で、「ページ・データ」ビューからページに、レコードの配列をドラッグします。 「リスト・コントロールの挿入」ウィンドウ が開きます。
  6. 「リスト挿入のコントロール」で、「コントロールの作成対象」の下にあるラジオ・ボタンを選択します。 読み取り専用の出力コントロールが必要な場合は、「既存レコードの表示」を選択します。 編集可能な入力コントロールが必要な場合は、 「既存レコードの更新」を選択します。
  7. 「終了」をクリックします。これらのレコードが、JSF データ・テーブルとしてページ上に表示されます。

    このテーブルに、チェック・ボックス要素を含む、ラベルなしの小さな列を組み込みます。 このチェック・ボックス・コントロールをクリックして選択すると、「プロパティー」ビューが表示されます。 そのチェック・ボックスが、レコード変数のどのフィールドにもバインドされておらず、選択した行のインデックスを保持するように定義した整数配列にバインドされていることを、このビューで確認することができます。

これで、Web ページで選択された行の行番号を、この整数配列で保持できるようになります。 例えば、ユーザーがページ上のボタンをクリックしたときに、選択したレコードを処理する関数を定義することができます。

例えば、次のようにして、この JSF ハンドラーで選択列を使用します。

handler multiSelectPage type JSFHandler
   {onPreRenderFunction = onPreRender,
    view = "multiSelectPage.jsp"}

    //Array of customer records and their purchase amount
    purchaseList  customerPurchase[3]
       {selectedRowItem = allSelectedRows};

    //indexes of the selected rows
    allSelectedRows  int[0];

    //Sum of selected purchases
    purchaseSum   decimal(10,2);

    function onPreRender()
        //initialize the array of customers
        purchaseList[1].custName = "Company A";
        purchaseList[1].totalPurchases = "500.23";
        purchaseList[2].custName = "Company B";
        purchaseList[2].totalPurchases = "232.55";
        purchaseList[3].custName = "Company C";
        purchaseList[3].totalPurchases = "499.12";
    end

    function sumRows()
        purchaseSum = 0;
        counter int = 0;
        customerIndexToAdd int;
        for (counter from 1 to allSelectedRows.getSize() by 1)
            customerIndexToAdd = allSelectedRows[counter];
            purchaseSum += purchaseList[customerIndexToAdd].totalPurchases;
        end
    end

end

record customerPurchase type BasicRecord
    custName        string;
    totalPurchases  decimal(10,2);
end
このサンプルでは、JSF データ・テーブルを作成するために purchaseList 配列をページにドラッグし、sumRows 関数と purchaseSum 変数をそれぞれ、Web ページのコマンド・ボタンと出力コントロールにバウンドしているものとします。

フィードバック