サポート > リポジトリ > 画面機能 > 検索・一覧表示(一覧表示)グリッドを利用する

Wagbyの「グリッド」とは、高機能な一覧表示を実現する部品を指します。実行時に列の並び替えや幅の設定、非表示設定を行うことができます。 R7.10.1

対象モデルの「画面 > 検索・一覧表示」で、「グリッドで表示する」を有効にします。(このとき「検索画面と一覧表示画面を同時に表示する」も自動的に有効になります。)

図1 グリッドで表示する設定

「グリッドで表示する」を有効にしたとき、このモデルの REST API 機能が自動的に有効になります。(手動で設定する必要はありません。)

図2 REST API が有効になる

グリッドで表示された一覧表示の例を示します。

図3 グリッドで表示された一覧表示

ソート(並び替え)

列名をクリックすることでソートが行われます。再びクリックすると昇順と降順が入れ替わります。

図4 項目によってソートされる
図5 クリックすると昇順と降順が入れ替わる

列の移動

列部分をドラッグ&ドロップで移動することができます。

図6 「電話番号」列をドラッグ&ドロップで移動した
列の表示並びは利用者毎に記憶されます。(正確には Web ブラウザのクッキーに保存されます。)再ログオンした場合でも復元されます。

列の表示幅の変更

列の表示幅をドラッグ&ドロップで変更することができます。

図7 各列の表示幅を変更した
列の表示幅は利用者毎に記憶されます。(正確には Web ブラウザのクッキーに保存されます。)再ログオンした場合でも復元されます。

列を非表示にする

グリッドの右端にある「+」ボタンを押下すると、表示対象列名の一覧が表示されます。

図8 表示対象列名の一覧

列を非表示とすることができます。

図9 「顧客ID」列を非表示にした
列の非表示設定は利用者毎に記憶されます。(正確には Web ブラウザのクッキーに保存されます。)再ログオンした場合でも復元されます。

グリッドの右下にある「同時表示数」を変更することができます。変更と同時にページネーションも変わります。

図10 同時表示数を変更する
図11 ページネーションも変更される
選択した値は利用者毎に記憶されます。(正確には Web ブラウザのクッキーに保存されます。)再ログオンした場合でも復元されます。

設定

画面タブ内の検索・一覧表示タブに用意された「同時表示数のパターン」が反映されます。コンマ区切りで複数の数値を指定することができます。

図12 同時表示数のパターンを設定する
この値を一つ(例 100)とすることで、図11のリストボックスは非表示になります。表示数は固定で、変更不可と扱います。
この値を空白にした場合、"10" と扱われます。(単一の値のため、リストボックスも非表示となります。)また、負数を指定することはできません。

グリッドの縦のサイズを指定することができます。縦スクロールバーが表示されます。

図13 縦のサイズを固定した(縦スクロールバーが表示される)

定義方法

一覧表示部分のスクロールタイプを「ヘッダ列を固定」とします。同時に、ヘッダ行固定時のテーブルの高さを指定します。単位はピクセル (px) またはエム (em) を指定してください。

図14 ヘッダ列の設定

ページネーションを使わず、スクロールバー操作時に必要に応じてデータを取得することができます。(OnDemand Gridと呼びます。)

図15 スクロールバーに連動して必要なデータが読み込まれる

定義方法

「ページネーションを表示する」の設定を解除します。あわせて、一覧表示部分のスクロールタイプを「ヘッダ列を固定」と、ヘッダ行固定時のテーブルの高さを指定します。単位はピクセル (px) またはエム (em) を指定してください。

図16 ページネーションの表示を解除する
"一括処理 > グリッドでの設定"をお読みください。

グリッドの設定(列の表示・非表示と、並び)を異なる利用者間で共通に利用することができます。

プリファレンス共通設定プリンシパル

グリッドの設定を公開できるアカウントを指定します。これは「プリファレンス共通設定管理」として用意されています。この例ではアカウント「ユーザー1」に付与します。

図17 プリファレンス共通設定管理プリンシパル

設定を公開する

アカウント「ユーザー1」でログオンします。一覧表示グリッドの下部に、共通設定名を入力できる欄が用意されます。

図18 共通設定名の入力欄

ここで、標準の列設定を変更してみます。

図19 列設定の変更

変更後、共通設定名として「顧客一覧ユーザー1設定」と入力します。(名称は任意です。)

図20 共通設定名を入力する

カーソルを移動すると「保存」ボタンが表示されますので、これを押下します。

図21 共通設定を保存する

共通設定を再利用する

アカウント「ユーザー2」でログオンします。ユーザー2は「プリファレンス共通設定管理」プリンシパルを付与されていません。そのため共通設定の登録は行えませんが、既存の設定を選択することができます。

図22 保存された共通設定を選択する

共通設定を読み込むと、列の設定が変更されます。

図23 共通設定を再利用した

標準の設定に戻す

リポジトリ(設計情報)に指定された標準設定に戻す場合、「グリッド設定をクリア」を選択します。

図24 グリッド設定をクリア

標準の設定に戻ります。

図25 標準設定に戻した

仕様

  • 検索と一覧表示は一つの画面にまとまります。検索画面と一覧表示画面を別にすることはできません。
  • 「一覧表示部分に横スクロールバーを表示する」設定は無効です。グリッド内で必要に応じて横スクロールバーが自動的に表示されます。
  • グリッドが提供する機能(ソート、列の並び替え、列幅の設定、列の非表示設定)を個別に無効とすることはできません。
  • グリッドのソートおよび列並び替えは、グリッドのみで有効です。ソートや列の並び替え設定は他の画面機能(印刷形式表示の画面、CSVダウンロードなど)に反映されるものではありません。

項目の型について

  • 複合主キーには未対応です。
  • メールアドレス、URL、ファイルはリンク形式ではなく、文字情報として表示されます。
  • ファイル型項目のアイコンはグリッドでは表示されません。

利用できない設定

絞り込み設定

"他モデルの参照 > 参照モデル同士の関係性で選択肢を絞り込む > トラブルシューティング > 一覧表示画面で絞込が動作しない"をお読みください。

パフォーマンス

グリッド表示では実行時に利用者が列の非表示設定を行うことができます。そのためモデル定義ではすべての項目の一覧表示設定を有効にして、利用者に表示列を自由に選択させるという運用を想定されるかも知れません。しかしその場合、表示対象データをいったんサーバで作成してブラウザに送出するためパフォーマンスが劣化します。

設計段階では、一覧表示画面で必要となる項目はできるだけ限定し、さらに利用者で表示選択させるというような方針としてください。

Wagby Developer Day 2017