jqGridでonSelectRowで設定したfunctionが実行されない原因について
jqGridでonSelectRowでfunctionを設定しているが、該当functionが実行されない事象が発生した。
その解決方法を備忘録的に記載します。
※onSelectRow：行選択後に実行するfunctionを指定するための設定。
画面イメージ
ソース
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 ,cellEdit: true
35 ,caption: '商品一覧'
36 ,onSelectRow: function(rowid, status, e){ //行選択後に呼ばれる
37 window.confirm("行番号：" + rowid);
38 }
39 });
40
41 });
42 </script>
43 </head>
44 <body>
45 <table id="grid_table"></table>
46 <p>※行選択するとダイアログが表示される。</p>
47 </body>
48 </html>
原因
34行目のcellEdit:trueを削除するとonSelectRowで設定したfunctionが実行されるようになった。
cellEdit:trueは編集可能なグリッドにするための設定。
一時的に編集可能なグリッドに変更していたのを戻し忘れていた！