jqGrid：行IDの設定について

JQGRID使用方法

バージョン：v5.3.0

行Idの値について

ここの値です。

デフォルト値

通常、以下のような一般的なグリッドの作成方法だと行Idには連番がふられます。

$(document).ready(function () {
    "use strict";
    var mydata = [
            {rowId: "10",  name: "test",  fruits: "もも"},
            {rowId: "20",  name: "test2", fruits: "りんご"},
            {rowId: "30",  name: "test3", fruits: "なし"},
            {rowId: "40",  name: "test4", fruits: "かき"},
            {rowId: "50",  name: "test5", fruits: "さくらんぼ"},
        ];
    var $grid = $("#list");
    $grid.jqGrid({
        datatype: "local",
        data: mydata,
        colNames: ["ID", "名前", "果物"],
        colModel: [
            {name: "rowId", width: 70},
            {name: "name", width: 70},
            {name: "fruits", width: 70},
        ],
        rowNum: 10,
        height: "auto",
    });
});

任意の値をRowIdに設定したい場合

行オブジェクトにidという属性を設定する

サンプルソースを見てみます。

$(document).ready(function () {
    "use strict";
    var mydata = [
            {id: "id1", rowId: "10",  name: "test",  fruits: "もも"},
            {id: "id2", rowId: "20",  name: "test2", fruits: "りんご"},
            {id: "id3", rowId: "30",  name: "test3", fruits: "なし"},
            {id: "id4", rowId: "40",  name: "test4", fruits: "かき"},
            {id: "id5", rowId: "50",  name: "test5", fruits: "さくらんぼ"},
        ];
    var $grid = $("#list");
    $grid.jqGrid({
        datatype: "local",
        data: mydata,
        colNames: ["ID", "名前", "果物"],
        colModel: [
            {name: "rowId", width: 70},
            {name: "name", width: 70},
            {name: "fruits", width: 70},
        ],
        rowNum: 10,
        height: "auto",
    });
});

JQGRIDのソースを見ます。

// keyNameが設定されていない場合、readerのid属性の値を行IDの取得元プロパティ名にしている
// reader.idのデフォルト値は、「id」なので行オブジェクトにid属性を設定していればその値が、行IDに反映されます。
if( ts.p.keyName===false ) {
    idn = $.isFunction(dReader.id) ? dReader.id.call(ts, data) : dReader.id;
} else {
    idn = ts.p.keyName;
}

keyNameを使用する

上記のソースを参照して明らかですが、属性keyNameに任意の属性名を設定することでその属性値を行IDにすることができます。

$(document).ready(function () {
    "use strict";
    var mydata = [
            {id: "id1", rowId: "10",  name: "test",  fruits: "もも"},
            {id: "id2", rowId: "20",  name: "test2", fruits: "りんご"},
            {id: "id3", rowId: "30",  name: "test3", fruits: "なし"},
            {id: "id4", rowId: "40",  name: "test4", fruits: "かき"},
            {id: "id5", rowId: "50",  name: "test5", fruits: "さくらんぼ"},
        ];
    var $grid = $("#list");
    $grid.jqGrid({
        datatype: "local",
        data: mydata,
        colNames: ["ID", "名前", "果物"],
        colModel: [
            {name: "rowId", width: 70},
            {name: "name", width: 70, key: true},
            {name: "fruits", width: 70},
        ],
        rowNum: 10,
        height: "auto",
    });
});

ただし注意してほしいのは、keyNameは直接設定できない点です。
カラムモデルにて、設定したいカラムの属性keyにtrueを設定することでそのカラム名がkeyNameに設定されます。

reader = function (datatype) {
    var field, f=[], j=0, i;
    for(i =0; i<ts.p.colModel.length; i++){
        field = ts.p.colModel[i];
        if (field.name !== 'cb' && field.name !=='subgrid' && field.name !=='rn') {
            f[j]= datatype === "local" ?
            field.name :
            ( (datatype==="xml" || datatype === "xmlstring") ? field.xmlmap || field.name : field.jsonmap || field.name );

            // ここでkeyNameが設定されます。
            if(ts.p.keyName !== false && field.key===true ) {
                ts.p.keyName = f[j];
                ts.p.keyIndex = j;
            }
            j++;
        }
    }
    return f;
},

Readerのid属性を変更する

行オブジェクトにidという属性を設定するで参照したソースにもあったように、readerのid属性の値がそのままkeyNameになっています。
そのため、readerのid属性を変更することで行IDに使用するカラムを変更できます。
ただ、readerはdataTypeによって使用するreaderが変わるので注意してください。
今回は、dataType：localの場合のサンプルです。

$(document).ready(function () {
    "use strict";
    var mydata = [
            {id: "id1", rowId: "10",  name: "test",  fruits: "もも"},
            {id: "id2", rowId: "20",  name: "test2", fruits: "りんご"},
            {id: "id3", rowId: "30",  name: "test3", fruits: "なし"},
            {id: "id4", rowId: "40",  name: "test4", fruits: "かき"},
            {id: "id5", rowId: "50",  name: "test5", fruits: "さくらんぼ"},
        ];
    var $grid = $("#list");
    $grid.jqGrid({
        datatype: "local",
        data: mydata,
        colNames: ["ID", "名前", "果物"],
        colModel: [
            {name: "rowId", width: 70},
            {name: "name", width: 70},
            {name: "fruits", width: 70},
        ],
        rowNum: 10,
        height: "auto",
        // ここでreaderのid属性を変更します。
        localReader: {
            id: "rowId",
        },
    });
});