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

プログラミング JavaScript

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

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

スポンサーリンク

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

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

jqGrid:セルの属性値を設定したいとき - Qiita
JQGRID使用方法 Jqgridバージョン:v5.3.0 セルの属性値を設定したいとき ある特定の値の時に文字色を赤色にしたい。背景色を変更したいという要望がると思います。 こういったときに使用するのが、「cellatt...

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

<!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のパラメータに直接追加していたからでした。(まぬけですね。)

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

まとめ

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

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

タイトルとURLをコピーしました