JavaScript/Wijmo

WijmoのFlexGridでセルのスタイルを範囲指定で変更できる新しいAPIの使い方

by MESCIUS-dev

2025年2月19日にリリースされた「Wijmo（ウィジモ）」の最新バージョン「2024J v2.1」では、データグリッドコントロール「FlexGrid（フレックスグリッド）」のスタイル設定機能が強化されました。セル範囲に対してスタイルを設定する場合、従来はformatItemイベントやitemFormatterプロパティを利用する必要がありましたが、新しいAPIを使用することでより直感的かつ簡潔にスタイルを変更できるようになりました。

セルのスタイルを範囲指定で変更できる新しいAPIの使い方

本記事では、2024J V2.1で新しく追加された「wijmo.grid.style」モジュールの「FlexGridStyle」クラスを使用してFlexGridコントロールでセル範囲のスタイルを設定および解除する方法について解説します。

開発環境の準備

この記事では以下の開発環境を使用します。

今回作成するファイルは次の4つです。

index.htmlページ本体。ページの要素としてFlexGridコントロールを配置します
app.jsFlexGridコントロールを作成するコードを記載します
data.jsFlexGridコントロールに連結するデータを記載します
styles.css各種ページ要素のスタイル定義を記載します

FlexGridを使用するには、専用のモジュールを環境にインストールする必要があります。CDNを参照したり、npmなどから入手したりする方法もありますが、今回は環境に直接モジュールを配置していきます。あらかじめWijmoの製品版かトライアル版をご用意ください。トライアル版は以下より無償で入手可能です。

製品版、またはトライアル版をダウンロードしたら、ZIPファイルを解凍し、以下のファイルを環境にコピーします。

  • scripts/wijmo.grid.min.js
  • scripts/wijmo.grid.style.min.js
  • scripts/wijmo.min.js
  • scripts/cultures/wijmo.culture.ja.min.js
  • css/wijmo.min.css

今回ご紹介するセル範囲のスタイル設定を実現する「FlexGridStyle」クラスは、上記の「scripts/wijmo.grid.style.min.js」で定義されています。

なお、npmを使ってWijmoの参照を行う場合は、ヘルプの「特定のパッケージをインストールする」に記載しているように、次のコマンドを実行するだけでwijmo.gridが依存する以下のパッケージも自動的にインストールされます。

npm install @mescius/wijmo.grid
  • @mescius/wijmo
  • @mescius/wijmo.input
  • @mescius/wijmo.styles

FlexGridコントロールの作成

最初に、前述のWijmoモジュールと「app.js」、「data.js」、「styles.css」への参照設定をHTMLファイルに追加します。下記で省略しているコードは、以降の該当する項目で解説します。
※ CDNから参照する場合はコメントアウトされている部分とライブラリの参照先を入れ替えてください。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>FlexGridコントロールのスタイル設定</title>

    <!-- ローカルのライブラリを参照する場合 -->
    <link rel="stylesheet" href="css/wijmo.min.css" />
    <script src="scripts/wijmo.min.js"></script>
    <script src="scripts/wijmo.grid.min.js"></script>
    <script src="scripts/wijmo.grid.style.min.js"></script>
    <script src="scripts/cultures/wijmo.culture.ja.min.js"></script>

    <!-- CDNからライブラリを参照する場合 -->
    <!-- <link rel="stylesheet" href="https://cdn.mescius.com/wijmo/5.20242.30/styles/wijmo.min.css" />
    <script src="https://cdn.mescius.com/wijmo/5.20242.30/controls/wijmo.min.js"></script>
    <script src="https://cdn.mescius.com/wijmo/5.20242.30/controls/wijmo.grid.min.js"></script>
    <script src="https://cdn.mescius.com/wijmo/5.20242.30/controls/wijmo.grid.style.min.js"></script>
    <script src="https://cdn.mescius.com/wijmo/5.20242.30/controls/cultures/wijmo.culture.ja.min.js"></script> -->

    <link rel="stylesheet" href="css/styles.css">
    <script src="scripts/app.js"></script>
    <script src="scripts/data.js"></script>
</head>
<body>
    <div>
        ・・・（中略）・・・
    </div>
    <div id="Wijmo_FlexGrid"></div>
</body>
</html>

続いて「app.js」と「data.js」および「styles.css」を次のように作成します。
※ ライセンスキーを設定しない場合トライアル版を示すメッセージが表示されます。ライセンスキーの入手や設定方法についてはこちらをご覧ください。

wijmo.setLicenseKey('ここにWijmoのライセンスキーを設定します');

document.addEventListener("DOMContentLoaded", function () {
    // 変数の初期化
    const grid = getGrid();
    const gridStyle = new wijmo.grid.style.FlexGridStyle(grid);
    const styles = {
        styleObject1: {
            'background-color': 'aquamarine',
            'color': 'blue'
        },
        styleObject2: {
            'background-color': 'lawnGreen',
            'color': 'navy'
        }
    }
    ・・・（中略）・・・
});

// FlexGridの生成と設定
function getGrid() {
    const data = getData();
    const grid = new wijmo.grid.FlexGrid('#Wijmo_FlexGrid', {
        itemsSource: data,
        formatItem: function (s, e) {
            if (e.panel.cellType == wijmo.grid.CellType.RowHeader) {
                e.cell.innerHTML = `行${e.row + 1}`;
            }
        }
    });
    grid.topLeftCells.setCellData(0, 0, '■');
    grid.columnHeaders.rows[0].cssClassAll = 'column-header';
    grid.rowHeaders.columns[0].width = 80;
    return grid;
}
・・・（中略）・・・

function getData() {
    const temp = [];
    for (let i = 1; i < 11; i++) {
        temp.push({
            列1: `A${i}`, 列2: `B${i}`, 列3: `C${i}`, 列4: `D${i}`, 列5: `E${i}`
        })
    }
    return temp;
}
/* FlexGridのスタイル */
#Wijmo_FlexGrid {
    border: 1px solid gray;
    margin-top: 10px;
    height: 354px;
    width: 722px;
}

.column-header {
    text-align: center !important;
}

.styleName1 {
    background-color: antiquewhite !important;
    color: brown !important;
    /* background-color: antiquewhite;
    color: brown; */
}

.styleName2 {
    background-color: gold !important;
    color: red !important;
    /* background-color: gold;
    color: red; */
}

/* その他の要素のスタイル */
・・・（中略）・・・

FlexGridStyleクラスを使ったスタイル設定

wijmo.grid.style.min.jsファイルで定義されているFlexGridStyleクラスの次のメソッドを使うことで、従来からあるFlexGridクラスのitemFormatterプロパティやformatItemイベントを使うよりも直感的かつ簡潔にセル範囲のスタイルを変更できます。

  • toggleClassメソッド
  • applyStyleメソッド
  • removeStyleメソッド
  • clearAllStylesメソッド

以降では、これらのメソッドを使ってセル範囲のスタイルを変更する方法をご紹介します。

toggleClassメソッド

toggleClassメソッドは、指定したセル範囲に対してCSSクラス名をトグルすることでスタイルを切り替えます。このメソッドには次の4つの引数を設定できます。

toggleClass(rng: CellRange, className: string, panel?: GridPanel, addOrRemove?: boolean): void
引数名説明
rngCSSクラスを適用するセル範囲
classNameセル範囲に適用するCSSクラス名
panel（オプション）セル範囲が属するパネル
addOrRemove（オプション）動作（トグル／追加／削除）の指定

panel引数には、FlexGridクラスの次の4つのプロパティが参照するGridPanelを設定します。このオプション引数を設定しない場合は、既定値のFlexGrid.cellsが設定されたときの動作になります。

  • FlexGrid.cells（既定値）
  • FlexGrid.columnHeaders
  • FlexGrid.rowHeaders
  • FlexGrid.topLeftCells

addOrRemove引数にtrueが設定されるとclassName引数で設定したCSSクラスが適用され、falseなら解除されます。この引数が設定されていない場合は、toggleClassメソッドは既定のトグル（最初の実行で「適用」され次回の実行で「解除」される）動作になります。

toggleClassメソッドの動作を実装するために、「index.html」ファイルの省略部分には次のように記述します。「セル範囲の指定」ではスタイルを設定するセル範囲（rng引数）とセル範囲が属するパネル（panel引数）を指定します。「スタイルの切替」ではその他の引数を指定するselect要素とtoggleClassメソッドを実行するbutton要素を配置しています。

<fieldset>
    <legend>セル範囲の指定</legend>
    <select id="panel">
        <option selected>Cells</option>
        <option>TopLeft</option>
        <option>ColumnHeader</option>
        <option>RowHeader</option>
    </select>
    <label id="range">選択されたセル範囲</label>
</fieldset>
<fieldset>
    <legend>スタイルの切替</legend>
    <select id="styleName">
        <option selected>styleName1</option>
        <option>styleName2</option>
    </select>
    <select id="toggleAction">
        <option selected>トグル操作</option>
        <option>追加</option>
        <option>削除</option>
    </select>
    <button id="toggle">実行</button>
</fieldset>

［実行］ボタンがクリックされたときには下のイベントが起動してtoggleClassメソッドが実行されます。

// スタイルの切替
document.querySelector('#toggle').addEventListener('click', () => {
    const styleName = document.querySelector('#styleName');
    const range = getRange(grid);
    const style = styleName.value;
    const panel = getPanel(grid);
    const action = getToggleAction();
    gridStyle.toggleClass(range, style, panel, action);
});

toggleClassメソッドの各引数の値を戻す関数は、次のように実装します。

//【セル範囲の指定】対象領域（Panel）の取得
function getPanel(grid) {
    const panel = document.querySelector('#panel');
    switch (panel.value) {
        case 'Cells':
            return grid.cells;
        case 'TopLeft':
            return grid.topLeftCells;
        case 'ColumnHeader':
            return grid.columnHeaders;
        case 'RowHeader':
            return grid.rowHeaders;
    }
}

//【セル範囲の指定】対象セル範囲の取得
function getRange(grid) {
    const panel = document.querySelector('#panel');
    const sel = grid.selection;
    switch (panel.value) {
        case 'Cells':
            return sel;
        case 'TopLeft':
            return new wijmo.grid.CellRange(0, 0, 0, 0);;
        case 'ColumnHeader':
            return new wijmo.grid.CellRange(0, sel.col, 0, sel.col2);
        case 'RowHeader':
            return new wijmo.grid.CellRange(sel.row, 0, sel.row2, 0);
    }
}

//【スタイルの切替】トグル操作の種類の取得
function getToggleAction() {
    const toggleAction = document.querySelector('#toggleAction');
    switch (toggleAction.value) {
        case 'トグル操作':
            return null;
        case '追加':
            return true;
        case '削除':
            return false;
    }
}

以上を実装した際の動作の様子を以下に示します。

applyStyleメソッド

applyStyleメソッドは、指定したセル範囲に対してインラインスタイルまたはCSSクラススタイルを設定します。このメソッドには次の4つの引数を設定できます。

applyStyle(rng: CellRange, style: Partial<CSSStyleDeclaration>, panel?: GridPanel, inline?: boolean): void
引数名説明
rngスタイルを適用するセル範囲
styleセル範囲に適用するスタイルオブジェクト
panel（オプション）セル範囲が属するパネル
inline（オプション）インライン／CSSクラスの指定

style引数には、CSSStyleDeclarationに準拠したスタイルオブジェクトを設定します。

panel引数については、前項のtoggleClassメソッドの解説をご覧ください。

Inline引数にtrueを設定するとインラインでスタイルが設定され、falseにするとCSSクラスを使ってスタイルが設定されます。この引数を省略すると、既定値であるtrueが設定されたときの動作になります。

applyStyleメソッドの動作を実装するために、「index.html」ファイルの省略部分に次の記述を追加します。ここでは、適用するスタイルオブジェクトを指定するselect要素、スタイルオブジェクトの設定方法を指定するselect要素、およびapplyStyleメソッドを実行するbutton要素を配置しています。

<fieldset>
    <legend>スタイルの適用</legend>
    <select id="styleObject">
        <option selected>styleObject1</option>
        <option>styleObject2</option>
    </select>
    <select id="styleType">
        <option selected>インライン</option>
        <option>CSSクラス</option>
    </select>
    <button type=button id="apply">適用</button>
</fieldset>

［適用］ボタンがクリックされると、下のイベントが起動してapplyStyleメソッドが実行されます。

// スタイルの設定
document.querySelector('#apply').addEventListener('click', () => {
    const range = getRange(grid);
    const style = getStyleObject(styles);
    const panel = getPanel(grid);
    const type = getStyleType();
    gridStyle.applyStyle(range, style, panel, type);
});

また、applyStyleメソッドの各引数の値を戻す関数として、次の記述を追加します。

//【スタイルの適用】対象スタイルの取得
function getStyleObject(styles) {
    const styleObject = document.querySelector('#styleObject');
    switch (styleObject.value) {
        case 'styleObject1':
            return styles.styleObject1;
        case 'styleObject2':
            return styles.styleObject2;
    }
}

//【スタイルの適用】スタイルの種類の取得
function getStyleType() {
    const styleType = document.querySelector('#styleType');
    switch (styleType.value) {
        case 'インライン':
            return true;
        case 'CSSクラス':
            return false;
    }
}

applyStyleメソッドを実行したときの様子を以下に示します。

removeStyleメソッド

removeStyleメソッドは、指定したスタイルをセル範囲から削除します。このメソッドには次の3つの引数を設定できます。

removeStyle(rng: CellRange, style: Partial<CSSStyleDeclaration>, panel?: GridPanel): void
引数名説明
rng削除するスタイルを含むセル範囲
styleセル範囲にある削除対象のスタイルオブジェクト
panel（オプション）セル範囲が属するパネル

style引数には、CSSStyleDeclarationに準拠したスタイルオブジェクトを設定します。

panel引数については、toggleClassメソッドの解説をご覧ください。

removeStyleメソッドの動作を実装するために、「index.html」ファイルの省略部分に以下の記述を追加します。

ここでは、削除の方法を指定するselect要素、削除するスタイルオブジェクトを指定するselect要素、およびremoveStyleメソッドを実行するbutton要素を配置しています。removeStyleメソッドは、下記の「指定範囲の指定スタイルを削除」のoption要素が選択された場合に実行されます。その他の削除方法については、次の項目で解説します。

<fieldset>
    <legend>スタイルの削除</legend>
    <select id="deleteType">
        <option selected>指定範囲のすべてのスタイルを削除</option>
        <option>指定範囲の指定スタイルを削除</option>
        <option>すべてのスタイルを削除</option>
    </select>
    <select id="deleteStyle" disabled>
        <option selected>styleObject1</option>
        <option>styleObject2</option>
    </select>
    <button type=button id="delete">削除</button>
</fieldset>

「指定範囲の指定スタイルを削除」を選択して［削除］ボタンをクリックすると、下のイベントが起動してremoveStyleメソッドが実行されます。

// スタイルの削除
document.querySelector('#delete').addEventListener('click', () => {
    const range = getRange(grid);
    const style = getDeleteStyle(styles);
    const panel = getPanel(grid);
    const deleteType = document.querySelector('#deleteType');
    switch (deleteType.value) {
        case '指定範囲のすべてのスタイルを削除':
            gridStyle.clearAllStyles(range, panel);
            return;
        case '指定範囲の指定スタイルを削除':
            gridStyle.removeStyle(range, style, panel);
            return;
        case 'すべてのスタイルを削除':
            gridStyle.clearAllStyles();
            return;
    }
});

さらに、removeStyleメソッドのstyle引数の値を戻す関数として、次の記述を追加します。

//【スタイルの削除】対象スタイルの取得
function getDeleteStyle(styles) {
    const deleteStyle = document.querySelector('#deleteStyle');
    switch (deleteStyle.value) {
        case 'styleObject1':
            return styles.styleObject1;
        case 'styleObject2':
            return styles.styleObject2;
    }
}

removeStyleメソッドを実行したときのようすを下に示します。指定したスタイルではないものとインラインスタイルは削除されず、選択範囲にある指定したスタイルだけが削除されています。

clearAllStylesメソッド

clearAllStylesメソッドは、グリッド全体または指定したセル範囲からFlexGridStyleクラスの機能を使って追加されたすべてのスタイルを削除します。このメソッドには次の2つの引数を設定できます。

clearAllStyles(rng?: CellRange, panel?: GridPanel): void
引数名説明
rng削除するスタイルを含むセル範囲
panel（オプション）セル範囲が属するパネル

panel引数については、toggleClassメソッドの解説をご覧ください。

引数を何も設定しない場合には、FlexGridStyleクラスの機能を使って追加されたグリッド上のすべてのスタイルを削除します。clearAllStylesメソッドは、前項で追加した「スタイルの削除」で下記の項目が選択された場合に呼び出されます。

  • 指定範囲のすべてのスタイルを削除
  • すべてのスタイルを削除

clearAllStylesメソッドを実行したときの様子を下に示します。

制限事項

今回ご紹介した新しいAPIにはいくつか制限事項があるのでご確認ください。

  • FlexGridStyleクラスの機能では、条件付き書式（値に応じたスタイルの自動設定）を実現することはできません。条件付き書式を設定する場合は、引き続きitemFormatterプロパティやformatItemイベントを使用してください。
  • 背景色を設定したスタイルをtoggleClassメソッドやapplyStyleメソッドで設定した場合は、FlexGridの選択時のスタイルが上書きされて選択時スタイルが無効になります。
  • スタイルに「!important」属性が設定されている場合は他のスタイルよりも優先されます。

さいごに

今回は「Wijmo」の「FlexGrid」コントロールでセル範囲にスタイルを設定する方法について解説しました。

今回ご紹介した新しいAPIを使ったスタイル設定方法は以下のデモアプリケーションで確認できます（“Run Project”をクリックするとデモが起動します）。アプリケーションの全容については、こちらのデモアプリケーションでご確認ください。

この他にもWijmoの各種コントロールの基本的な使い方や応用的な使い方の解説を連載記事として公開しています。こちらも是非ご覧ください。

製品サイトでは、Wijmoの機能を手軽に体験できるデモアプリケーションやトライアル版も公開しておりますので、こちらもご確認ください。

また、ご導入前の製品に関するご相談、ご導入後の各種サービスに関するご質問など、お気軽にお問合せください。

＼  この記事をシェアする  ／