Wijmo 列ヘッダを2段にする方法

JavaScript
2024.02.06

前回の投稿で行列の固定方法について記載しましたが、
今回の記事は列ヘッダの行を増やす方法についてです。

きっかけは、行列の固定ではソートによって固定した行が移動してしまったからです。
固定とは言え、データの並び替えが効いてしまうようです。それなら
そもそも列ヘッダに埋め込んでしまえばいい。という発想です。

▼前回の行列固定方法はコチラ▼

Wijmo 行列の固定化で効率化
Excelで良く使う、「ウィンドウ枠の固定」のような動きが実現できます。 出力項目が多くなるような表では、主となる特定の行列を常時表示し、 その他の属性情報を見えるようにしたい場合があります。
habataki-blog.com
2023.12.19

前提

  • Wijmo version 5.2
  • FlexGridを何となくわかっている
  • jQueryに触れた事がある

実装の流れ

1. 列ヘッダの配列を取得する

var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
    columns: COLUMN_DEFINE,
});

let columnHeaders = theGrid.columnHeaders.rows;

columnsの定義は端折っていますが、FlexGridを生成してから列ヘッダの情報を取得しています。
columnHeaders.rows headerって言ったりrowって言ったりで混乱するかもしれませんが、
列ヘッダも一応「行」なので、rowsで全行取得することができます。

2. 空行を生成して列ヘッダの配列に挿入する

let columnHeaders = theGrid.columnHeaders.rows;
let blankRow = new wijmo.grid.Row();
columnHeaders.splice(0, 0, blankRow);

上記ソースコードを実行すると、columnsに設定した列ヘッダの上に空行が挿入されます。
今回は初期設定される列ヘッダの文字表記を1段目に、2段目にカスタムの見出しを設定してみます。

3. 列ヘッダの文言を設定し直す

let newHeaders = [
    theGrid.columns.map(x => x.header),
    ['col1', 'col2', col3', ...],
];
theGrid.formatItem.addHandler(function(s, e) {
    if (e.panel.cellType === wijmo.grid.CellType.ColumnHeader) {
        e.cell.textContent = header[e.row][e.col];
    }
})

newHeadersに既存のヘッダとカスタム見出しを定義しておいて、formatItemに書き換えを任せてます。
ここで注意が必要なのは、↑のコードでは e.cell.textContentを使用していますが、innerHTMLでも書き換えは可能です。しかし、フィルターを使っているグリッドではinnerHTMLによってフィルターのアイコンが消えてしまう問題が起こり得えます。安全の為、textContentを使用するようにしましょう。

サンプル

上記の説明を通して実装すれば動くようになります。
サンプルは↓を参照してください。

お疲れさまでした！