行追加時に検索条件値を初期表示

!++++

Ver.5　[ 機能を見る ] [ 機能設定を見る ]
Ver.6　[ 機能を見る ] [ 機能設定を見る ]

!----

1. はじめに

Client-side JavaScript を用いて、「行追加」ボタン押下後に追加された行に対し、検索条件項目の値を設定する方法を紹介します。

2. サンプル機能の内容と確認ポイント

Client-side JavaScript を使用することで、検索条件項目の値を取得できます。
また、発生したイベントの種類を判定することも可能です。

これらを組み合わせ、検索条件項目の値を設定する方法を以下に示します。

※ Client-side JavaScript で行っているため、別ページで行を追加した場合は動作しません。

• 事前設定（ブロック設定画面）
  Client-side JavaScript による処理を行う前に、対象となる検索条件項目にクラス名を設定する必要があります。
  ブロック設定 ＞ 項目情報 ＞ STYLE CLASS に任意のクラス名（例：target-key）を指定してください。
  このクラスをもとに JavaScript 側で要素を特定し、初期値を設定します。
  
  
• Client-side JavaScript による実装内容は以下のとおりです。
  以下の処理を resizeContents_end 関数内に実装します。
  1. eventName が ADDLINE であることを確認。
  →実行画面が行追加ボタン押下時の状態であることを判定します。
  2. getElementByName 関数を用いて検索条件項目を取得し、その value を取得します。
  3. document.querySelectorAll に任意のクラス名セレクタを指定し、明細ブロック内で初期値を設定対象とする項目を取得します。
  4. 取得した項目に対し、forEach などのループ処理を行い、各項目の value に上記で取得した値を設定します。

🔍 確認いただけるポイント

• 「行追加」ボタン押下後に追加された行に、検索条件項目に入力された値が設定されていること。

3. 画面イメージ

以下は、検索条件の「KEY」に「addVal」と入力し、「行追加」を選択した際に、追加された行の「KEY」項目に「addVal」が入力されている状態を示しています。

!++++

使用したコード一覧

!----