jqGridで文字色を変更するのに苦労しました。
結局jqGridで文字色を変更するにはcellattrで変更すればいいということで、早速実装。
jqGridで文字色を変更するにはcellattrで変更する
色々なサイトを見てjqGridで文字色を変更することを調べてみましたが、どれもうまく行かず、結局以下のサイトに載っている方法で実現できました。
jqGrid：セルの属性値を設定したいとき - Qiita
JQGRID使用方法 Jqgridバージョン：v5.3.0 セルの属性値を設定したいとき ある特定の値の時に文字色を赤色...
qiita.com
で作成した実際のソースがこちら
<!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で変更するでした。
