jqGrid：行データ取得

JQGRID使用方法

Jqgridバージョン：v5.3.0

Grid内の項目を取得する方法

Grid内の項目値を取得するには、「getRowData」「getLocalRow」のどちらかのメソッドを使用するのが一般的だと思います。
次のソースをもとに値を取得します。

$(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",
    });
});

getRowDataで取得できる値

下記ソースの場合、このように値が取得できます。

// 引数を指定しない場合、全行取得できます。
$("#list").jqGrid("getRowData");
// > [
//    0:{rowId: "10", pref: "大阪府", city: "大阪市", addres: "大阪府大阪市"}
//    1:{rowId: "20", pref: "兵庫県", city: "加古川市", addres: "兵庫県加古川市"}
//    2:{rowId: "30", pref: "山梨県", city: "甲府市", addres: "山梨県甲府市"}
//    3:{rowId: "40", pref: "北海道", city: "札幌市", addres: "北海道札幌市"}
//    4:{rowId: "50", pref: "沖縄県", city: "那覇市", addres: "沖縄県那覇市"}
// ]

// 行IDを指定した場合、その行の値のみ取得できます。
$("#list").jqGrid("getRowData", "1");
// > {rowId: "10", pref: "大阪府", city: "大阪市", addres: "大阪府大阪市"}

// また、元のformatterで編集されていないデータを取得したい場合、次のようにすると取得できます。
$("#list").jqGrid("getRowData", "1", true);
// > {rowId: "10", pref: "大阪府", city: "大阪市"}

注意しないといけない点として次の２点があげられます。
第二引数に何も設定していない場合、自身で設定したformatterで編集された値がそのまま取得できる点。
そのためformatterでhtmlを返却するように設定している場合、htmlがそのまま返却されます。
※formatterに"select", "checkbox"等設定している場合、変換された値ではなくunformatされた値が取得できます。
数値型のデータも文字列として取得できてしまう点。

getLocalRowで取得できる値

下記ソースの場合、このように値が取得できます。

// 行IDを指定して対象のデータを取得します。
$("#list").jqGrid("getLocalRow", "1");
// > {rowId: "10", pref: "大阪府", city: "大阪市"}

getRowData関数の第二引数に何も設定していない場合と同じ値を取得することができます。