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 $("#grid_table").jqGrid('setCell', rowid, "price", "5000");
37 }
38 });
39
40 });
41 </script>
42 </head>
43 <body>
44 <table id="grid_table"></table>
45 <p>※行選択すると選択行の金額が5000になります。</p>
46 </body>
47 </html>
解説
36行目のjqGrid('setCell')でセルの値を書き換える。
rowid：行数の指定(サンプルでは選択された行を指定)
price：列の指定(サンプルではprice列を指定)
5000：書き換える値を指定