[FlexGrid]レスポンシブグリッド

文書番号 : 81445     文書種別 : HowTo
登録日 : 2015/09/16     最終更新日 : 2015/10/01

対象製品

Wijmo 5

詳細

FlexGridをレスポンシブなグリッドとして最適化する2つの方法を紹介します。

①データの表示方法を変更する方法

グリッドを表示する十分なウィンドウサイズの時は通常のグリッドの表示ですが、ウィンドウサイズの幅が狭い場合には行の情報を1列に集約して表示します。

タブレットで横向きに表示した場合
タブレットで横向きに表示した場合
タブレットで縦向きに表示した場合
タブレットで横向きに表示した場合

●サンプルコードの解説
ウィンドウのresizeイベントの処理:モバイル表示にあわせて列幅と行の高さを調整します。
FlexGrid.formatItem イベント:Wijmo.format メソッドを利用して、HTMLタグとサマリーデータを加工します。

※サンプルの確認方法
  1. 以下フレームの「Edit in JSFiddle」をクリックして別ウィンドウで表示します
  2. 「JavaScript」のコード部分と「Result」の結果表示の間にある境界線の幅を変更して「Result」部分の表示領域を狭めます


②データの表示列数を変更する方法

ウィンドウサイズの幅が狭い時は特定の列を非表示にします。

●サンプルコードの解説
ウィンドウのresizeイベントの処理:モバイル表示にあわせて特定列を非表示にします。

※サンプルの確認方法
  1. 以下フレームの「Edit in JSFiddle」をクリックして別ウィンドウで表示します
  2. 「JavaScript」のコード部分と「Result」の結果表示の間にある境界線の幅を変更して「Result」部分の表示領域を狭めます