jqGridで指定したセルの値を取得する方法
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行目でダイアログに取得したデータを表示する。