JQGRID使用方法

Jqgridバージョン：v5.3.0

Gridに値を表示するときに別の値に変換したいとき

このカラムには、別のカラムの値を足して表示したい。
コード値をコードの名称に変換して表示したいといった要望があると思います。
こういったときに使用するのが、「formatter」です。

サンプル1(任意の値を返却)

では、サンプルを見ていきます。
ここでは、別々のカラムに持っていると都道府県名と都市名を結合して表示させています。

$(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},
            {
                name: "addres",
                width: 140,
                formatter: function(cellval, opts, rwdat) {
                    // cellval：セル値
                    // opts：補足情報
                    // rwdat：行データ
                    let ret = "";
                    if (rwdat.pref && rwdat.city) {
                        ret =  rwdat.pref + rwdat.city;
                    } else if (rwdat.pref) {
                        ret = rwdat.pref;
                    } else if (rwdat.city) {
                        ret = rwdat.city;
                    }
                    return ret;
                },
            },
        ],
        height: "auto",
    });
});

サンプル1 画面イメージ

この方法では、行データから任意のカラム値を結合して返却しています。
また、formatterは上記のように任意の値を返却することができますが、jqgridに元々備わっている機能を使用することによって
より簡単に値の変換ができるようになっています。
ここでは、よく使用するであろう「select」と「integer」の使用方法を説明します。

select：セレクトボックスのような使用方法で、コード値を任意の値に変換するために使用します。
integer：数値にカンマをつけたりして編集する。

サンプル2(select, integer)

$(document).ready(function () {
    "use strict";
    var mydata = [
            {id: "id1", rowId: "10", fruits: "もも"      , money: 4000},
            {id: "id2", rowId: "20", fruits: "りんご"    , money: 4100},
            {id: "id3", rowId: "30", fruits: "なし"      , money: 4400},
            {id: "id4", rowId: "40", fruits: "すいか"    , money: 4700},
            {id: "id5", rowId: "50", fruits: "さくらんぼ" , money: 4900},
        ];
    var $grid = $("#list");
    $grid.jqGrid({
        datatype: "local",
        data: mydata,
        colNames: ["ID", "フルーツ", "金額"],
        colModel: [
            {name: "rowId", width: 70},
            {
                name: "fruits",
                width: 70,
                // formatterにselectを設定する
                formatter: "select", 
                // formatoptions.valueに変換した値のマッピングを設定する。
                // String型で「key:value;key:value;」形式で記述することでも可能だが、Object型で使用するほうが使用しやすいと思います。
                formatoptions: {
                    value: {
                        "もも": "🍑",
                        "りんご": "🍎",
                        "なし": "🍐",
                        "すいか": "🍉",
                        "さくらんぼ": "🍒",
                      },
                 },
            },
            {
                name: "money",
                width: 100,
                align: "right",
                formatter: "integer",
                formatoptions: {
                    suffix: "円",
                }
            },
        ],
        rowNum: 10,
        height: "auto",
    });
});

サンプル2 画面イメージ

このように文字列を絵文字へ変換したり、数値にカンマを設定したりすることが可能です。
integerは、内部で$.fmatter.util.NumberFormatを使用して整形しています。
なので、NumberFormatのオプションはすべて使用することができます。設定したいオプションは、formatoptionsに設定しましょう。

NumberFormatのオプション（よく使うもの）

オプション名	説明
thousandsSeparator	カンマの文字列
prefix	数字の前に設定する文字
suffix	数字の後に設定する文字

jqGrid：セル表示値の変換