jqGrid Data - array (Dynamic Column)

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>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">
<div style="height:300px;">
  <table id="list"><tr><td></td></tr></table> 
  <div id="pager"></div><br />
  <button id="changeData1">컬럼변경1</button>
  <button id="changeData2">컬럼변경2</button>
</div>

JavaScript

var LocalData1 = 
[
  {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 colName1 = ['Inv No','Date', 'Amount','Tax','Total','Notes']
var colModel1 = [
  {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} 
]
var LocalData2 = 
[
  {invid:'1', birthday:'2008-10-02', money:'256', company:'company1', etc:'blablabla'},
  {invid:'2', birthday:'2008-10-02', money:'256', company:'company1', etc:'blablabla'},
  {invid:'3', birthday:'2008-10-02', money:'256', company:'company1', etc:'blablabla'},
  {invid:'4', birthday:'2008-10-02', money:'256', company:'company1', etc:'blablabla'},
  {invid:'5', birthday:'2008-10-02', money:'256', company:'company1', etc:'blablabla'},
  {invid:'6', birthday:'2008-10-02', money:'256', company:'company1', etc:'blablabla'},
  {invid:'7', birthday:'2008-10-02', money:'256', company:'company1', etc:'blablabla'}
]
var colName2 = ['Inv No','birthday', 'money','company','etc']
var colModel2 = [
  {name:'invid',index:'invid', width:55, sorttype:'int', key:true}, 
 ...