LoginSignup
1
1

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-09-08

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:行ID
                    // value:セルの表示する予定の値(formatterで編集された値)
                    // rawObject:編集していない行のオブジェクト
                    // cm:対象のカラムのカラムモデル
                    // rdata:行のオブジェクト
                    if (rawObject.rowId === "20") {
                        return "style='color: blue' title='テスト' class='aaa'";
                    }
                    return "";
                },
            },
        ],
        height: "auto",
        width: 500,
    });
});

サンプル1(画面)

サンプル画面_cellattr.JPG

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

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1