igGridで特定の条件を満たすセルのみ色を付けてみる

列全体などではなく、個別のセル単位に色(あるいは何らかのスタイル)を適用する方法です。

例として、ある列の数値が特定の値より小さければ、文字を赤するという仕様で検討してみます。

以下のようにしたい。

サンプルコード

ES2015です。処理は関数として実装します。

パラメータ：igGridを設定したtableタグのid、列のキー、閾値を渡す、

概要：指定したidのグリッドの全行から、指定した列の値(数値とする)が閾値を下回ったら、文字色を赤にする。

/**
 * igGridの特定の列のセルで、閾値より小さいものがあれば、文字色を赤にする。 
 * @param {string} tableId - igGridの初期化に渡したtableタグのID
 * @param {string} columnKey - dataTypeがnumberの列のkey
 * @param {number} threshold - セルの値と比較する閾値。
 */
function setColorIfSubthreshold(tableId, columnKey, threshold) {
    let grid = $('#' + tableId);
    // 列のチェック
    let column = grid.igGrid('columnByKey', columnKey);
    if (!column) {
        window.alert(`指定された列名${columnKey}がありません。`);
        return;
    }
    if (column.dataType !== 'number') {
        window.alert('数値型の列名を指定してください。');
        return;
    }
    // 閾値のチェック
    if (isNaN(threshold)) {
        window.alert(`閾値は数値で指定してください。`);
        return;
    }
    
    // 1. 列インデックスを取得する
    let colulmnIndex = grid.igGrid('option', 'columns').findIndex(c => c.key == columnKey);    
    // 2. グリッドから行数を取得する
    let rowCount = grid.igGrid('allRows').length;
    // 3. 全行をループして、行ごとに以下の処理を行う
    for (let i = 0; i < rowCount; i++) {
        // 3.1 判定に使うセルの値を取得する
        let cell = grid.igGrid('cellAt', colulmnIndex, i);
        let value = Number(cell.innerText);
        // 3.2 値が数字で閾値より小さければ、文字の色を赤に設定する
        if (!isNaN(value) && value < threshold) {
            $(cell).css('color', 'red');
        }
    }
}

処理の流れと利用するAPI

処理の流れ：

列インデックスを取得する
グリッドから行数を取得する
全行をループして、行ごとに以下の処理を行う
1. 判定に使う列のセルの値を取得する
2. 値が数字で閾値より小さければ、文字の色を赤に設定する

1.で列オブジェクトの配列を取得するAPI：optionのcolumnsで全列を取得し、keyプロパティが渡された列のキーと一致すればそのインデックス。

2で行数を取得するAPI：allRowsメソッドを使って全行を取得し、その長さを保存。totalRecordsCountというメソッドもありますが、

応答の JSON/XML にレコードの総数を指定するプロパティが含まれている必要があります

とのことなので恐らくリモートデータソース用ではないかと思います。実際、ローカルデータソースのグリッドで読んでみたら0件でした。

3.1でセルの値を取得するAPI：cellAtメソッドを利用します。

パラメータとして、列インデックス、行インデックスの順番で渡します。

3.2で取得したセルから値を取り出し、閾値より小さければ、jQueryのcssを使ってcolorにredを設定しています。

動作確認

igGridのヘルプページで動作を確認してみます。

上記ページで開発者ツールを開きコンソールから、サンプルコードの関数定義と、下記の呼び出しを投入すると、最初のイメージ通りの結果になりました。

// 実行テスト
// tableタグがgridで、InStockという名前の数値列があり、閾値を35とする場合
setColorIfSubthreshold('grid', 'InStock', 35);

ちなみに、グリッドの初期表示時点でこれを適用したければ、rowRenderedイベント(renderedではなく)にサンプルコードの関数を少し変更して設定すれば良いはずです。