!++++
Ver.5 [ 機能を見る ] [ 機能設定を見る ]
Ver.6 [ 機能を見る ] [ 機能設定を見る ]
!----
1. はじめに
Client-side JavaScript を使用し、明細ブロックのスクロールに連動して、別の明細ブロックも同期してスクロールさせる方法を紹介しています。
2. サンプル機能の内容と確認ポイント
グローバル環境には、JavaScript によるスクロール制御用関数 onScrollListTable が定義されています。
本関数に対し、Client-side JavaScript を用いてスクロールの同期処理を上書きする方法を以下に紹介します。
併せて、明細内の各項目の合計値を算出し、別ブロック内の対応項目を更新する方法についても紹介します。
- スクロール同期処理の上書き
Client-side JavaScript による実装内容は以下のとおりです。
-
resizeContents_end関数内で、同期対象となるテーブル要素を取得します。 -
グローバルに定義されている
onScrollListTable関数の第4引数bodyRのscrollLeftプロパティを、第5引数headRおよび前述のテーブル要素のscrollLeftプロパティに設定する処理をバインドします。
※本処理は、「ブロック設定画面」＞「詳細設定」＞「明細列の固定」が有効であることを前提としています。無効の場合でも処理自体は有効ですが、対象となる要素が異なります。いずれの場合も、
onScrollListTable関数内で同期先テーブル要素のscrollLeftプロパティを、同期元の値で上書きします。
- 各項目の合計値を算出し、別ブロックの項目を更新する処理
「ブロック設定画面」＞「項目情報」＞「FOCUS OUT」において、Client-side JavaScript で定義した関数を呼び出します。
この際、フォーカスを外した対象の項目を引数として渡します。
※「FOCUS OUT」内では、
＜%1から始まるブロック番号_物理項目名%＞により、対象項目を参照できます。
Client-side JavaScript による実装内容は以下のとおりです。
-
「FOCUS OUT」から渡された要素の
name属性を取得し、'_'で分割した配列の1番目および2番目の値を抽出します。 -
入力元となる右側のテーブルを取得し、内部のすべての
tr要素を取得します。 -
合計値を保持する変数を定義します。
-
各
tr要素に対してforEachでループ処理を行い、対象項目と同一の項目を抽出し、その値を加算します。 -
合計値を反映する対象テーブルを取得します。
-
更新対象の要素に、合計値を
toLocaleString()によりカンマ区切り形式に変換して設定します。
※本処理は、「ブロック設定画面」＞「詳細設定」＞「明細列の固定」が有効であることを前提としています。無効の場合、入力元テーブルおよび合計値の反映先テーブルが異なる点にご留意ください。
🔍 確認いただけるポイント
-
ブロック1の明細を横方向にスクロールした際、ブロック2の明細も同時に横方向へスクロールされること。
- ブロック1の項目を変更した際、ブロック2において、ブロック1で変更された列と同じ列の「合計生産数」の値が更新されること。
3. 画面イメージ
以下は、ブロック1のテーブルを右にスクロールした際に、ブロック2のテーブルも同時に右にスクロールされた状態を示しています。
以下は、ブロック1の項目「1」の値を変更した際に、ブロック2において、ブロック1で変更された列と同じ列の「合計生産数」の値が更新された状態を示しています。
!++++
使用したコード一覧
!----