jqGrid：行IDの設定について

## JQGRID使用方法

バージョン：v5.3.0

### 行Idの値について
ここの値です。

![キャプチャ0.PNG](https://qiita-image-store.s3.amazonaws.com/0/159893/b81f748a-40a5-5290-76af-5d972dc2e4f0.png)


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

```js
$(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",
    });
});
```
![キャプチャ1_一般.PNG](https://qiita-image-store.s3.amazonaws.com/0/159893/1be7608c-936a-c93d-8493-07a16f017b39.png)


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

##### 行オブジェクトにidという属性を設定する
サンプルソースを見てみます。

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

![キャプチャ2_id指定.JPG](https://qiita-image-store.s3.amazonaws.com/0/159893/0dda7184-8c6d-3c4a-b12c-5c8dd83b625c.jpeg)

JQGRIDのソースを見ます。

```js
// 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にすることができます。

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

```

![キャプチャ3_KEY TRUE.PNG](https://qiita-image-store.s3.amazonaws.com/0/159893/26eb42e5-e73c-e544-a130-d016c3df382d.png)


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

```js
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の場合のサンプルです。

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

```

![キャプチャ4_reader.id変更.JPG](https://qiita-image-store.s3.amazonaws.com/0/159893/4929ee8f-cf07-6e8b-1e52-767d39a31e0d.jpeg)