jqGrid Data - array (updateGridRows)

jqGrid v4.6

by 1004lucifer

HTML

<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-kr.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/plugins/grid.addons.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">
<div style="height:250px">
  <table id="list"><tr><td></td></tr></table> 
  <div id="pager"></div><br />
  <button id="changeData">
  데이터 변경 (updateGridRows)
  </button>
</div>

JavaScript

var localJsonData = 
[
  {invid:'1', invdate:'2007-10-01', note:'note', amount:'200.00', tax:'10.00', total:'210.00'},
  {invid:'2', invdate:'2007-10-01', note:'note', amount:'200.00', tax:'10.00', total:'210.00'},
  {invid:'3', invdate:'2007-10-01', note:'note', amount:'200.00', tax:'10.00', total:'210.00'},
  {invid:'4', invdate:'2007-10-01', note:'note', amount:'200.00', tax:'10.00', total:'210.00'},
  {invid:'5', invdate:'2007-10-01', note:'note', amount:'200.00', tax:'10.00', total:'210.00'},
  {invid:'6', invdate:'2007-10-01', note:'note', amount:'200.00', tax:'10.00', total:'210.00'},
  {invid:'7', invdate:'2007-10-01', note:'note', amount:'200.00', tax:'10.00', total:'210.00'}
]
var localJsonData1 = 
[
  {invid:'1', invdate:'2008-10-02', note:'note1', amount:'400.00', tax:'30.00', total:'610.00'},
  {invid:'2', invdate:'2008-10-02', note:'note1', amount:'400.00', tax:'30.00', total:'610.00'},
  {invid:'3', invdate:'2008-10-02', note:'note1', amount:'400.00', tax:'30.00', total:'610.00'},
  {invid:'4', invdate:'2008-10-02', note:'note1', amount:'400.00', tax:'30.00', total:'610.00'},
  {invid:'5', invdate:'2008-10-02', note:'note1', amount:'400.00', tax:'30.00', total:'610.00'},
  {invid:'6', invdate:'2008-10-02', note:'note1', amount:'400.00', tax:'30.00', total:'610.00'},
  {invid:'7', invdate:'2008-10-02', note:'note1', amount:'400.00', tax:'30.00', total:'610.00'}
]

$("#list").jqGrid({
  datatype: 'local',
  data: localJsonData,
  colNames:['Inv No','Date', 'Amount','Tax','Total','Notes'],
  colModel :[ 
    {name:'invid',index:'invid', width:55, sorttype:'int', key:true}, 
    {name:'invdate',index:'invdate', width:90, sorttype:'date', datefmt:'Y-m-d'}, 
    {name:'amount',index:'amount', width:80, align:'right',sorttype:'float'}, 
    {name:'tax',index:'tax', width:80, align:'right',sorttype:'float'}, 
    {name:'total',index:'total', width:80,align:'right',sorttype:'float'}, 
    {name:'note',index:'note', width:150, sortable:false} 
  ],
 ...