jqGrid：セルの属性値を設定したいとき

JQGRID使用方法

Jqgridバージョン：v5.3.0

セルの属性値を設定したいとき

ある特定の値の時に文字色を赤色にしたい。背景色を変更したいという要望がると思います。
こういったときに使用するのが、「cellattr」です。

サンプル1(文字を赤に変更)

では、サンプルを見ていきます。
ここでは、rowIdが20のときのみcityの文字色を赤色にしています。

$(document).ready(function () {
    "use strict";
    var mydata = [
            {rowId: "10",  pref: "大阪府",  city: "大阪市"},
            {rowId: "20",  pref: "兵庫県", city: "加古川市"},
            {rowId: "30",  pref: "山梨県", city: "甲府市"},
            {rowId: "40",  pref: "北海道", city: "札幌市"},
            {rowId: "50",  pref: "沖縄県", city: "那覇市"},
        ];
    var $grid = $("#list");
    $grid.jqGrid({
        datatype: "local",
        data: mydata,
        colNames: ["ID", "都道府県名", "都市名"],
        colModel: [
            {name: "rowId", width: 70},
            {name: "pref", width: 70},
            {
                name: "city",
                width: 70,
                cellattr: function(rowId, value, rawObject, cm, rdata) {
                    // rowId：行ＩＤ
                    // value：セルの表示する予定の値（formatterで編集された値）
                    // rawObject：編集していない行のオブジェクト
                    // cm：対象のカラムのカラムモデル
                    // rdata：行のオブジェクト
                    if (rawObject.rowId === "20") {
                        return "style='color: blue' title='テスト' class='aaa'";
                    }
                    return "";
                },
            },
        ],
        height: "auto",
        width: 500,
    });
});

サンプル1(画面)

この方法で、特定の条件の時にセルの属性を設定することができます。
styleを記述することができますし、title, classも同様に設定できます。
ただし、注意しないといけないのは、文字列で返却しないといけない点です。
Object形式で返却しても属性は反映されません。