行に対して属性を設定したいとき
こんなことをしたいときはありませんか
- ある値が"2"のときに背景色を青色にしたい。
- 偶数行のみ背景色を変更したい。
よくするコード
$.each($grid.jqGrid("getDataIDs"), (index, value) => {
let rowData = $grid.jqGrid("getLocalRow", value);
if (rowData.name === "test2") {
$grid.jqGrid("setRowData", value, null, {color:"blue"});
}
});
Gridを作成した後に、各行をループさせてsetRowDataを使用してクラスを設定する方法です。
この方法は簡単に思い浮かぶかもしれませんが、あまりオススメできない点があります。
- グリッドを作成してから行うので、全件ループを実施するとういう無駄が発生する。遅い。
- 処理を中身まで見ないと、何のために処理を実施しているのか分からない
私がオススメする方法
jqgridの以下のイベントを使用する方法です。
ただ、これらのイベントは、行作成時に動作するものなので値が更新されたときには動作しません。
値が変更されたときに行の属性を変更したい場合は、他の方法を考える必要があります。
rowattr, jqGridRowAttr
この２つのイベントは、jqgridが行を作成するときに行属性を動的に設定できるように呼び出しています。
constructTr = function(id, hide, classes, rd, cur ) {
var tabindex = '-1', restAttr = '', attrName, style = hide ? 'display:none;' : '',
rowAttrObj = $(ts).triggerHandler("jqGridRowAttr", [rd, cur, id]);
if( typeof rowAttrObj !== "object" ) {
rowAttrObj = $.isFunction(ts.p.rowattr) ? ts.p.rowattr.call(ts, rd, cur, id) :
(typeof ts.p.rowattr === "string" && $.jgrid.rowattr != null && $.isFunction($.jgrid.rowattr[ts.p.rowattr]) ?
$.jgrid.rowattr[ts.p.rowattr].call(ts, rd, cur, id) : {});
}
if(!$.isEmptyObject( rowAttrObj )) {
※jquery.jqGrid.jsより抜粋
使い方：rowattr
rowattrの使用方法です。
$grid.jqGrid({
datatype: "local",
data: mydata,
// ・・・省略
rowattr: function (rowData, currentObj, rowId) {
console.log(arguments);
if (currentObj.name === "test2") { // test the value of POLineStatus column
return {"style":"color:red"};
}
}
});
| 引数 | 説明 |
|---|---|
| rowData | セルの値をJSON形式で渡される |
| currentObj | セルの値ではなく、生の値（dataTypeによるがlocalならjson形式）が渡される |
| rowId | 対象の行のRowIdが渡される |
使い方：jqGridRowAttr
jqGridRowAttrの使用方法です。
$grid.bind("jqGridRowAttr", function (rowData, currentObj, rowId) {
if (currentObj.name === "test2") {
return {"style":"color:red"};
}
});
| 引数 | 説明 |
|---|---|
| rowData | セルの値をJSON形式で渡される |
| currentObj | セルの値ではなく、生の値（dataTypeによるがlocalならjson形式）が渡される |
| rowId | 対象の行のRowIdが渡される |
以上です。
ゴリゴリjqueryを使用して記述するのも良いですが、jqgrid自体にも大体の対応策は準備されています。
いろいろ探してみましょう。