2024年11月6日にリリースされたJavaScriptUIライブラリ「Wijmo（ウィジモ）」の最新バージョン「2024J v2」では、データグリッドコントロール「FlexGrid（フレックスグリッド）」の行と列の固定機能が拡張され、従来の左側の列と上部の行に加えて、右側の列と下部の行も固定できるようになりました。
本記事では、FlexGridコントロールの新しい行と列の固定機能「frozenCells」プロパティの使用方法について解説します。
目次
行と列の固定
FlexGridコントロールで行や列を固定する機能として次の4つのプロパティが用意されています。ここでは、これらのプロパティの機能についてご紹介します。
| 機能名 | 固定できる対象 | |
|---|---|---|
| frozenCells（新機能） | 左端／右端の列および上端／下端の行 | コードで設定 |
| frozenColumns | 左端の列 | コードで設定 |
| frozenRows | 上端の行 | コードで設定 |
| allowPinning | 左端の列 | ユーザー操作 |
frozenColumns／frozenRows（従来の機能）
これらのプロパティはバージョン「2024J v1」以前からある機能です。frozenColumnsプロパティは左端の任意の数の列を固定し、frozenRowsプロパティは上端の任意の数の行を固定することができます。
しかし、frozenColumnsプロパティで右端の列を固定したり、frozenRowsプロパティで下端の行を固定することはできません。
frozenColumnsプロパティとfrozenRowsプロパティを使って列と行を固定するサンプルをデモでご紹介していますので、ご確認いただければと思います。
下の画像は、frozenColumnsプロパティで左端の2列を固定し、frozenRowsプロパティで上端の2行を固定したときのものです。
allowPinning（従来の機能）
このプロパティは、ユーザーが任意の列を左端に固定（ピン留め）できるようにするためのものです。ユーザー操作によるこの動作をコードで実行する機能は備えられていません。
allowPinningプロパティを使ったピン留めの詳細については、ヘルプとデモをご覧いただければと思います。
以下の画像は、ユーザー操作によってC列とE列を左端に固定（ピン留め）したときのものです。
frozenCells（新機能）
バージョン「2024J v2」から追加された新しいプロパティです。このプロパティでは、従来の左端の列と上端の行だけでなく、右端の列と下端の行も固定できます。このfrozenCellsプロパティについては、次の項目「frozenCellsプロパティの機能」で詳しく解説します。
frozenCellsプロパティを使ったときの動作は次のようになります。動画の前半では、左端の2列と上端の2行を固定して水平方向と垂直方向にスクロールしています。後半では、右端の2列と下端の2行を固定してスクロールしています。
frozenCellsプロパティの機能
従来のfrozenColumnsプロパティとfrozenRowsプロパティの上端行と左端列の固定機能に加えて、frozenCellsプロパティでは右端の列と下端の行も固定することができます。
具体的には、左端の列、右端の列、上端の行、下端の行のそれぞれを単独に固定できるほか、次のような組み合わせで固定することも可能です。
- 左端の列＋上端の行
- 左端の列＋下端の行
- 右端の列＋上端の行
- 右端の列＋下端の行
一方で次のような組み合わせで固定することはできません。
- 左端の列＋右端の列
- 上端の行＋下端の行
左端の列と右端の列の両方が設定されている場合は左端列の固定が優先され、上端の行と下端の行の両方が設定されている場合は上端行の固定が優先されます。
なお、frozenCellsプロパティは、FlexGridコントロールのみで利用可能です。MultiRowコントロールやFlexSheetコントロールなどの他のグリッド系コントロールでは利用できません。
その他の既知の問題や仕様による制限などについて、ヘルプで詳しく解説していますので、ぜひご確認ください。
また、デモでは動作可能なサンプルを掲示していますので、こちらでも動作をご確認いただければと思います。
frozenCellsプロパティの使い方
frozenCellsプロパティに設定するオブジェクトの仕様は次のとおりです。
grid.frozenCells = {top: 上端の行数, bottom: 下端の行数, left: 左端の列数, right: 右端の列数};次のコードは、FlexGridコントロールのコンストラクタ内でデータを設定し、上端の2行と左端の2列を固定します。
※ ライセンスキーを設定しない場合トライアル版を示すメッセージが表示されます。ライセンスキーの入手や設定方法についてはこちらをご覧ください。
// wijmo.setLicenseKey('ここにWijmoのライセンスキーを設定します');
document.addEventListener("DOMContentLoaded", function () {
InitializeGrid()
});
function InitializeGrid(){
// FlexGridの生成
const data = getData();
const grid = new wijmo.grid.FlexGrid('#Wijmo_FlexGrid', {
itemsSource: data,
frozenCells: {top: 2, left: 2} // 固定行と固定列の設定
});
}上記のfrozenCellsプロパティを設定している部分は、次のように記述することもできます。
・・・（中略）・・・
frozenCells: {top: 2, bottom: 0, left: 2, right: 0}
・・・（中略）・・・設定されている固定行と固定列を解除する場合は、frozenCellsプロパティに空のオブジェクトまたは各プロパティを0にしたオブジェクトを設定します。
// 固定行と固定列の解除
grid.frozenCells = {};
// または
grid.frozenCells = {top: 0, bottom: 0, left: 0, right: 0};今回ご紹介したfrozenCellsプロパティを使った行と列の固定機能は以下のデモアプリケーションで確認できます（“Run Project”をクリックするとデモが起動します）。アプリケーションの全容については、こちらのデモアプリケーションでご確認ください。
さいごに
今回はWijmoのFlexGridコントロールで行と列を固定する機能とその使い方についてご紹介いたしました。
この他にもWijmoの各種コントロールの基本的な使い方や応用的な使い方の解説を連載記事として公開しています。こちらも是非ご覧ください。
製品サイトでは、Wijmoの機能を手軽に体験できるデモアプリケーションやトライアル版も公開しておりますので、こちらもご確認ください。
また、ご導入前の製品に関するご相談、ご導入後の各種サービスに関するご質問など、お気軽にお問合せください。