jqGridで指定したセルの値を取得する方法

jqGridで指定したセルの値を取得する方法を備忘録的に記載します。

画面イメージ

ソース

 1  <!DOCTYPE html>
 2  <html lang="ja">
 3  <head>
 4  <meta charset="utf-8">
 5  <title>jqGridセルの値を取得</title>
 6  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
 7  <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
 8  <script src="https://js.cybozu.com/jqgrid/v5.1.1/js/jquery.jqGrid.min.js"></script>
 9  <script src="https://js.cybozu.com/jqgrid/v5.1.1/js/i18n/grid.locale-ja.js"></script>
 0  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
11  <link rel="stylesheet" href="https://js.cybozu.com/jqgrid/v5.1.1/css/ui.jqgrid.css">
12  <script>
13  $(document).ready(function(){
14    //表示データ
15    var dt = [
16       {code:'ZZ001', name:'ＸＸ', price:1300}
17      ,{code:'ZZ002', name:'ＹＹ', price:1400}
18      ,{code:'ZZ003', name:'ＺＺ', price:1500}
19      ,{code:'ZZ004', name:'ＸＹ', price:1250}
20      ,{code:'ZZ005', name:'ＹＺ', price:1850}
21    ];
22  
23    //表示設定
24    $("#grid_table").jqGrid({
25       data: dt
26      ,datatype: 'local'
27      ,colNames: ['コード', '名前', '金額']
28      ,colModel: [
29          {index:'code', name:'code', width:'80px', align:'center'}
30         ,{index:'name', name:'name', width:'150px', align:'left'}
31         ,{index:'price', name:'price', width:'200px', align:'right'}
32       ]
33      ,height: 'auto'
34      ,caption: '商品一覧'
35      ,onSelectRow: function(rowid, status, e){  //行選択後に呼ばれる
36        var data = $("#grid_table").getRowData(rowid);
37        window.confirm('コード:[' + data.code + ']  名前:[' + data.name + ']  金額:[' + data.price +']');
38       }
39    });
40  
41  });
42  </script>
43  </head>
44  <body>
45    <table id="grid_table"></table>
46    <p>※行選択するとダイアログに選択行のデータが表示されます。</p>
47  </body>
48</html>

解説

36行目のgetRowDataで指定行の値を取得する。
rowid：行数の指定(サンプルでは選択された行を指定)
37行目でダイアログに取得したデータを表示する。