jqGridで行を選択された時に処理を行いたい場合は「onSelectRow」を利用します。
onSelectRowには関数をそのまま渡して処理を行います。
jqGridで行選択時の処理を行う方法
jqGridで選択された行のデータを取得するなどの処理を行うには「onSelectRow」を利用します。
具体的にはjqGirdで表を作成するタイミングで「onSelectRow」プロパティに実行したい処理を記述して渡します。
$("#jqGirdList").jqGrid({
data:datas //表示したいデータ
,datatype : "local" //データの種別(local,json,xml)
,caption : "表のタイトル" //表のキャプション
,colNames : header_name //列の表示名
,colModel : col_model //列ごとの設定
,rowNum : 5 //1ページに表示する行数
,rowList : [1, 5, 10, datas.length] //変更可能な1ページ当たりの行数
,height : $( window ).height() * 0.4 //高さ(px指定）
,width : $( window ).width() * 0.6 //幅(px指定）
,pager : 'pager_div' //footerのページャー要素のid
,shrinkToFit : true //画面サイズに依存せず固定の大きさを表示する設定
,viewrecords: true //footerの右下に表示する。
,onSelectRow : function( rowid, status, e ){
console.log( "rowid=[" + rowid + "]" );
console.log( "status=[" + status + "]" );
console.log( "e=[" + e.toString() + "]" );
var rowdata = $('#jqGirdList').getRowData( rowid ) ;
for( var row in rowdata ){
console.log( row + "=" + rowdata[ row ] );
}
}
});
のようになります。
実際にデータなどを設定して行をクリックすると
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/free-jqgrid@4.15.4/css/ui.jqgrid.min.css">
<script src="https://cdn.jsdelivr.net/npm/free-jqgrid@4.15.4/js/jquery.jqgrid.min.js"></script>
<script>
$(function() {
//列の設定
var col_model= [
{ name:"no" , index:"no", width:70, align:"right" },
{ name:"name", index:"name", width:100, align:"left" },
{ name:"age", index:"age", width:100, align:"right" },
{ name:"gender", index:"gender", width:100, align:"left" },
{ name:"feature", index:"feature", width:200, align:"left" }
];
//列の表示名
var header_name = ["No.","名前","年齢","性別","特徴"];
//表示するデータ
var datas = [
{ no:1, name:"Aさん", age:20, gender:"男性", feature:"仮名ではない。" },
{ no:2, name:"Bさん", age:25, gender:"女性", feature:"女性です。" },
{ no:3, name:"Cさん", age:30, gender:"男性", feature:"男性です。" },
];
//テーブルの作成
$("#jqGirdList").jqGrid({
data:datas //表示したいデータ
,datatype : "local" //データの種別(local,json,xml)
,caption : "表のタイトル" //表のキャプション
,colNames : header_name //列の表示名
,colModel : col_model //列ごとの設定
,rowNum : 5 //1ページに表示する行数
,rowList : [1, 5, 10, datas.length] //変更可能な1ページ当たりの行数
,height : $( window ).height() * 0.4 //高さ(px指定）
,width : $( window ).width() * 0.6 //幅(px指定）
,pager : 'pager_div' //footerのページャー要素のid
,shrinkToFit : true //画面サイズに依存せず固定の大きさを表示する設定
,viewrecords: true //footerの右下に表示する。
,onSelectRow : function( rowid, status, e ){
console.log( "rowid=[" + rowid + "]" );
console.log( "status=[" + status + "]" );
console.log( "e=[" + e.toString() + "]" );
var rowdata = $('#jqGirdList').getRowData( rowid ) ;
for( var row in rowdata ){
console.log( row + "=" + rowdata[ row ] );
}
}
});
});
</script>
</head>
<body>
<table id="jqGirdList"></table>
<div id="pager_div"></div>
</body>
</html>
実行結果は
rowid=[jqg1] jqgrid_row_select.html:45 status=[true] jqgrid_row_select.html:46 e=[[object Object]] jqgrid_row_select.html:49 no=1 jqgrid_row_select.html:49 name=Aさん jqgrid_row_select.html:49 age=20 jqgrid_row_select.html:49 gender=男性 jqgrid_row_select.html:49 feature=仮名ではない jqgrid_row_select.html:49
のようになります。
まとめ
jqGridで選択された行のデータを取得するなどの処理を行うにはonSelectRow」を利用すれば簡単に行うことができます。
以上、jqGridで行選択時の処理を行う方法でした。
