jqGridで文字色を変更するにはcellattrで変更する

jqGridで文字色を変更するのに苦労しました。

結局jqGridで文字色を変更するにはcellattrで変更すればいいということで、早速実装。

jqGridで文字色を変更するにはcellattrで変更する
まとめ

jqGridで文字色を変更するにはcellattrで変更する

色々なサイトを見てjqGridで文字色を変更することを調べてみましたが、どれもうまく行かず、結局以下のサイトに載っている方法で実現できました。

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

JQGRID使用方法Jqgridバージョン：v5.3.0セルの属性値を設定したいときある特定の値の時に文字色を赤色にした...

で作成した実際のソースがこちら

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/free-jqgrid@4.15.4/css/ui.jqgrid.min.css">
        <script src="https://cdn.jsdelivr.net/npm/free-jqgrid@4.15.4/js/i18n/min/grid.gendere-de.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/free-jqgrid@4.15.4/js/jquery.jqgrid.min.js"></script>

        <script>
            $(function() {
                //列の設定
                var col_model= [
                                 { name:"no"  ,    index:"no",      width:70,  align:"right" },
                                 { name:"name",    index:"name",    width:100, align:"left"
                                   ,cellattr: function(rowId, value, rawObject, cm, rdata) {
                                       if( rawObject.no == "1") {
                                           return "style='color: red' ;
                                       }
                                       return "";
                                      }                                 
                                  },
                                 { name:"age",     index:"age",     width:100, align:"right" },
                                 { name:"gender",  index:"gender",  width:100, align:"left" },
                                 { name:"feature", index:"feature", width:200, align:"left" }
                               ];

                //列の表示名
                var header_name = ["No.","名前","年齢","性別","特徴"];
                //表示するデータ
                var datas = [
                    { "no":1,  name:"Aさん", age:20, gender:"男性", feature:"仮名ではない" },
                    { "no":2,  name:"Bさん", age:25, gender:"女性", feature:"ばあさんではない" },
                    { "no":3,  name:"Cさん", age:30, gender:"男性", feature:"特になし" },
                    { "no":4,  name:"Dさん", age:35, gender:"男性", feature:"デェーさんではない" },
                    { "no":5,  name:"Eさん", age:45, gender:"女性", feature:"胃酸ではない" },
                    { "no":6,  name:"Fさん", age:50, gender:"女性", feature:"特になし" },
                    { "no":7,  name:"Gさん", age:55, gender:"男性", feature:"じいさんではない" },
                    { "no":8,  name:"Hさん", age:60, gender:"女性", feature:"エロいわけではない" },
                    { "no":9,  name:"Iさん", age:65, gender:"女性", feature:"愛燦燦とー" },
                    { "no":10, name:"Jさん", age:70, gender:"男性", feature:"川平慈英とは関係ない" },
                    { "no":11, name:"Kさん", age:75, gender:"男性", feature:"計算ではない" },
                    { "no":12, name:"Lさん", age:80, gender:"男性", feature:"特になし" }
                ];

                //テーブルの作成
                $( "#sample1" ).jqGrid({
                                        data:datas                          //表示したいデータ
                                       ,datatype : "local"                  //データの種別(local,json,xml)
                                       ,caption : "表のタイトル"            //表のキャプション
                                       ,colNames : header_name              //列の表示名
                                       ,colModel : col_model                //列ごとの設定
                                       ,rowNum : 5                          //1ページに表示する行数
                                       ,rowList : [1, 5, 10, datas.length]  //変更可能な1ページ当たりの行数
                                       ,height : $( window ).height() * 0.4 //高さ(px指定）
                                       ,width : $( window ).width() * 0.6   //幅(px指定）
                                       ,pager : 'pager1'                    //footerのページャー要素のid
                                       ,shrinkToFit : true                  //画面サイズに依存せず固定の大きさを表示する設定
                                       ,viewrecords: true                   //footerの右下に表示する。
            });
        </script>
    </head>
    <body>
        <table id="sample1"></table>
        <div id="pager1"></div>
    </body>
</html>

です。

最初うまく行きませんでしたが、それは

cellattr: function(rowId, value, rawObject, cm, rdata) {
    if( rawObject.no == "1") {
        return "style='color: red' ;
    }
    return "";
    }                                 
}

を「colModel」ではなく、jqGridのパラメータに直接追加していたからでした。（まぬけですね。）

気づくまでに１時間ほど無駄にしました。

まとめ

jqGridで文字色を変更するにはcellattrで変更すれば簡単に変更することができるようになります。

以上、jqGridで文字色を変更するにはcellattrで変更するでした。