!++++
Ver.5 [ 機能を見る ] [ 機能設定を見る ]
Ver.6 [ 機能を見る ] [ 機能設定を見る ]
!----
1. はじめに
Client-side JavaScript を用いることで、ボタン押下時に選択状態の明細行を非表示にする方法をご紹介します。
2. サンプル機能の内容と確認ポイント
本サンプルは、明細行のチェックボックスを選択した状態で「選択明細行 非表示」ボタンを押下することで、該当する明細行が非表示になるように構成されています。
設定内容の構成は以下のとおりです。
-
チェックボックスの表示設定
ブロック設定画面の[詳細設定]>[明細部の編集方式]にて「チェックボックスで行選択」を ON に設定し、明細行にチェックボックスを表示させます。 -
「選択明細行 非表示」ボタンの定義
設定画面の[非同期通信]にて、明細行を非表示にするボタンを定義します。
また、[Click時JavaScript]には、Client-side JavaScript により定義された関数を呼び出すコードを記述します。 -
非表示処理の実装
Client-side JavaScript にて、明細を非表示にする関数を実装します。
この関数では、name
属性が<1から始まるブロック番号>_ROW_SELECT
要素を対象に、選択状態を判定し、foreach
等を用いて各行を処理します。選択された要素に対してdisplay: none;
を適用することで、対象行を非表示にします。
🔍 確認いただけるポイント
-
「選択明細行 非表示」ボタンの押下時、選択された明細行が画面上から非表示になること
3. 画面イメージ
以下は、明細の最上部の行を選択した状態で「選択明細行 非表示」ボタンを押下し、該当行が非表示になった状態を示しています。
明細の最上部の行にチェックを付けた状態
「選択明細行 非表示」ボタンの押下後に、該当行が非表示になった状態