【jqGrid】jqGridで行選択時の処理を行う方法

プログラミング JavaScript

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で行選択時の処理を行う方法でした。

タイトルとURLをコピーしました