jqGridの備忘録 「グリッドに隠し行を設定する方法」

詳しくはここを読むべし。

「jqGridの表をクリックして、該当する詳細情報を呼び出したい！」

なんていうのはよくある話。
ＤＢの主キーを表の中に埋めておけば、簡単に呼び出せるわけです。
以前書いた記事と同じ表を参考に。

＜表を作成＞
this.createGrid = function(){
　　　$('#表のID').jqGrid( {
　　　　　　　　data : this.gridData, // 配列要素が格納された２次元配列
　　　　　　　　datatype : 'local',
　　　　　　　　colNames : [ '項目１', '項目２', '項目３', '項目４' ],
　　　　　　　　colModel : [
　　　　　　　　{name : 'no1', width : 50, sorttype : 'int', align : 'right'},
　　　　　　　　{name : 'no2', width : 80, sorttype : 'str', align : 'center'},
　　　　　　　　{name : 'no3', width : 80, sorttype : 'str', align : 'center'},
　　　　　　　　{name : 'no4', width : 80, sorttype : 'str', align : 'left'}
　　　　　　　　],
　　　　　　　　width : 390,
　　　　　　　　height : 250,
　　　　　　　　rowNum : 30,
　　　　　　　　rownumbers : true,
　　　　　　　　 onSelectRow : function(id) {
　　　　　　　　　　　　　　　　var grid = $("#表のID").jqGrid("getRowData",id);
　　　　　　　　　　　　　　　　alert(grid.no1); // 選択した行の項目1の内容を表示する
　　　　　　　　　　　　　　　　},

　　　　　　　　gridview : true,
　　　　　　　　viewrecords : true,
　　　　　　　　caption: '表のタイトル',
　　　　　　　　pager : 'ページャー要素のID'
　　　});
};


onSelectRow の部分で設定した行の情報を出力できます。
し・か・し、往々にしてＤＢの主キーなんてユーザーには見せたくない！こともあるわけで。

そんな場合にどうすればよいかと申しますと、hidden というプロパティを設定しましょう。

例えば、上記の表の項目１を非表示にしたい場合は、

＜表を作成＞
this.createGrid = function(){
　　　$('#表のID').jqGrid( {
　　　　　　　　data : this.gridData, // 配列要素が格納された２次元配列
　　　　　　　　datatype : 'local',
　　　　　　　　colNames : [ '項目１', '項目２', '項目３', '項目４' ],
　　　　　　　　colModel : [
　　　　　　　　{name : 'no1', width : 50, sorttype : 'int', align : 'right', hidden : true},
　　　　　　　　{name : 'no2', width : 80, sorttype : 'str', align : 'center'},
　　　　　　　　{name : 'no3', width : 80, sorttype : 'str', align : 'center'},
　　　　　　　　{name : 'no4', width : 80, sorttype : 'str', align : 'left'}
　　　　　　　　],
　　　　　　　　width : 390,
　　　　　　　　height : 250,
　　　　　　　　rowNum : 30,
　　　　　　　　rownumbers : true,
　　　　　　　　onSelectRow : function(id) {
　　　　　　　　　　　　　　　　var grid = $("#表のID").jqGrid("getRowData",id);
　　　　　　　　　　　　　　　　alert(grid.no1); // 選択した行の項目1の内容を表示する
　　　　　　　　　　　　　　　　},

　　　　　　　　gridview : true,
　　　　　　　　viewrecords : true,
　　　　　　　　caption: '表のタイトル',
　　　　　　　　pager : 'ページャー要素のID'
　　　});
};

これでＯＫです。表示されてはいませんが、"getRowData"で取得した情報には含まれています。なので主キーを表示することなく利用することが出来ます。

ぜひご活用を。