レコードリスト（一覧表）からの複数情報をフォームへ反映する方法

レコードリスト（一覧表）からの情報反映の記事で、単一情報の反映方法はご紹介いたしました。
今回は、Jquery を利用してリストの複数情報を入力画面に反映する方法を紹介いたします。
チェックボックスで複数選択後にボタンをクリックすると反映する仕組みになっており、
チェック数も制限することで入力欄に合わせた数だけチェックできるように制限しています。
デモはこちら

前提

反映処理に jquery を使用いたしますので、読み込みが必要となります。
今回のデモでは、 jquery 3.4.1 を使用しています。
各ページの head または、共通ソースの head 内で読み込んでください。
サイトファイルに設置後の読み込み、外部サーバからの直接読み込みのどちらでも問題ありません。

DBの項目は、下記のように表示箇所の数値を入れる形で作成しております。

表示名	識別名	タイプ
商品ID1	itemID1	参照フィールド
商品名1	itemName1	テキスト
価格1	itemPrice1	整数
商品ID2	itemID2	参照フィールド
商品名2	itemName2	テキスト
価格2	itemPrice2	整数
商品ID3	itemID3	参照フィールド
商品名3	itemName3	テキスト
価格3	itemPrice3	整数

以降の設定に関する説明部分で、ソースコードを記載しております。
ソースコードに記載されている各種リンクや name値、規約含めて文言などは、デモの環境に合わせたものとなります。
実際に同様のものを作成する際は、変更が必要となる箇所がありますので、ご注意ください。

ソース内の「f0○○」と「record[○○]」について

ソース内の「f0○○」という箇所には、ブロックのフィールド一覧に記載されている識別名が入ります。
また、「record[○○]」という箇所には、フィールドID（name属性から「f0」を除いた数字）が入ります。

登録フォーム

選択用の一覧表示および反映処理を行う登録フォームに処理を追加します。
フォームに関しては、ボタン設置等がありますので、ソース設定が必要となります。

1. 一覧画面表示ボタン/クリアボタン

一覧画面を立ち上げるボタンと入力内容クリアボタンを任意の位置に設置いたします。

レコードリスト ※ ボタン表示部分抜粋

<input style="width: 150px; vertical-align: super;" type="button" value="　一括商品選択　" class="openWindowCheck">　
<input style="width: 150px; vertical-align: super;" type="button" value="　一括クリア　" id="allDelete">

ボタンのデザインは任意で変更してください。

2. JavaScript

一覧画面を立ち上げる処理と入力内容クリア処理、反映時にデータを入力欄に入れる処理の3つを設定します。

JavaScript

$(function(){
    // 商品一覧一括選択用
    $(document).on('click', '.openWindowCheck', function(){
        window.open(
        '/demo/itemDemoCheckBox', 
        '商品リスト', 
        'width=800, height=800, directories=no, menubar=no, toolbar=no, location=no, scrollbars=yes'
        );
    });

    // 一括クリア
    $(document).on('click', '#allDelete', function(){
        $(".itemDetail").each( function() {
            $(this).val('');
        });
        return false;
    });
});

// 子要素からの反映
var valSet = function(id,name,itemID,price){
    $('input[name=itemID'+id+']').val(itemID);
    $('input[name=itemName'+id+']').val(name);
    $('input[name=itemPrice'+id+']').val(price);
}

選択用の一覧表示および反映処理をプラスして、反映内容をクリアする処理を入れています。
5行目と21-24行目が変更箇所となります。

5行目	商品選択ページのURLを設定 ※ 相対パスで設定しておくことで、リリース時の変更が不要となります。
21行目	反映する項目数に合わせて、引数を変更
22-24行目	項目に合わせて、反映箇所を設定 name値および、value へのセット内容を設定

入力欄の class に itemDetail を追加することで、入力欄の一括クリアできるようにしております。

レコードリスト

レコードリストでは、チェックボックスの表示および入力画面へ反映させたい情報設定、反映ボタン押下時に発火するイベントを設定します。

１. チェックボックスの表示

レコードリスト ※ body部分抜粋

<tbody> 
  <tr th:each="record, stat : ${pageRecords}">
    <!--/* (ID) (_id) */-->
    <sp:record-data-field name="f_id"></sp:record-data-field> 
    <td>
      <input type="checkbox" th:id="|item-${record['f_id']}|" name="items" th:value="${record['f_id']}" />
        <div th:id="|itemID${record['f_id']}|" th:data-id="${record['f01']}"></div>
        <div th:id="|itemName${record['f_id']}|" th:data-name="${record['f02']}"></div>
        <div th:id="|itemPrice${record['f_id']}|" th:data-price="${record['f03']}"></div>
    </td> 
    <!--/* 商品ID (itemID) */-->
    <sp:record-data-field name="f01"></sp:record-data-field> 
    <td>
      <span th:text="${record['f01']}">Example</span>
    </td> 
    <!--/* 商品名 (itemName) */-->
    <sp:record-data-field name="f02"></sp:record-data-field> 
    <td>
      <span th:text="${record['f02']}">Example</span>
    </td> 
    <!--/* 価格 (itemPrice) */-->
    <sp:record-data-field name="f03"></sp:record-data-field> 
    <td>
      <span th:text="${record['f03']}">12345</span>
    </td> 
  </tr> 
</tbody>

6-9行目が設定箇所となります。

6行目	チェックボックスを表示 id と value にレコードIDが入るように設定 id には、「item-」の接頭語を付与 name は、itemsで設定
7行目	商品ID を data属性に付与 data-item に商品IDが入るように設定 id には、「itemID」の接頭語を付与し、レコードIDが入るように設定
8行目	商品名を data属性に付与 data-name に商品名が入るように設定 id には、「itemName」の接頭語を付与し、レコードIDが入るように設定
9行目	価格を data属性に付与 data-price に価格が入るように設定 id には、「itemPrice」の接頭語を付与し、レコードIDが入るように設定

今回は、「商品ID]「商品名」「価格」を引き込んでいますが、引き込みたい値を増やしたい場合などは同じ要領で変更してください。

2. 反映ボタン

反映するためのボタンを任意の位置に設置いたします。レコードリスト ※ ボタン表示部分抜粋

<input style="width: 150px; vertical-align: super;" type="button" value="反映" id="lcopyBtn">

ボタンのデザインは任意で変更してください。

3. JavaScript

選択内容を親要素の関数に渡す処理を設定します。

JavaScript

$(function(){
  var checkCount = 3;
  var inputName = 'items';

  $('#lcopyBtn').on('click', function() {
    $('input[name='+inputName+']:checkbox:checked').each(function(i) {
      //値を取得
      var id = $(this).val();
      var itemId = $('#itemID'+id).data('id');
      var itemName = $('#itemName'+id).data('name');
      var itemPrice =  $('#itemPrice'+id).data('price');
      window.opener.valSet(i+1,itemName,itemId,itemPrice);
    });
    window.close();
    return;
  });

  $('input[name='+inputName+']').change(function(){
      var $count = $('input[name='+inputName+']:checked').length;
      var $not = $('input[name='+inputName+']').not(':checked')
      if($count >= checkCount) {
          $not.attr("disabled",true);
      }
      else{
          $not.attr("disabled",false);
      }
  });
});

2-3行目と9-12行目が変更箇所となります。

2行目	選択できるチェックの数を設定
3行目	「1. チェックボックスの表示」で設定した name 属性を設定
9-11行目	詳細情報で設定した、接頭語及びdata属性の変更項目の追加・削除を行っている場合は合わせて修正してください。
12行目	詳細情報に合わせて、valSet関数の引数を変更 i+1 は、固定となるため、「itemName」以降の値を任意でセット

JavaScript を設定して、設定完了となります。

最後に

設定後は動作確認を必ず行い、動作に問題がないか確認をしてください。
不具合やほかのやり方が知りたい等あれば、下記の「コンテンツに関しての要望はこちら」からご連絡ください。

開発情報・ナレッジ

前提