jqGrid Method - addJSONData

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:350px;">
  <table id="list"><tr><td></td></tr></table> 
  <div id="pager"></div>
  <h4>addJSONData 실행하면 데이터가 그리드에 들어가지만 컬럼 헤더를 눌러서 정렬 기능을 사용하면 기존 데이터가 보여지는것을 볼 수 있다.<br />delRowData 메소드 이용 시 addJSONData 데이터가 지워지는게 아니라 기존 데이터가 지워진다.</h4>
  <button id="newDelRowBtn">delRowData</button>
  <button id="addjSonData">addJSONData</button>
</div>

JavaScript

var dataArray = [
  { "name": "Lorene Battle", "phone": "(936) 574-3976" },
  { "name": "Wendi Downs", "phone": "(815) 510-3017" },
  { "name": "Lorene Battle", "phone": "(936) 574-3976" },
  { "name": "Wendi Downs", "phone": "(815) 510-3017" },
  { "name": "Lorene Battle", "phone": "(936) 574-3976" },
  { "name": "Wendi Downs", "phone": "(815) 510-3017" }
];

$(document).ready(function() {
  $("#list").jqGrid({
    datatype: 'local',
    styleUI: 'Foundation',
    data: dataArray,
    colModel: [
      {name: 'name', label : 'Name'},
      {name: 'phone', label : 'Phone Number'}
    ],
    caption : 'Users Grid',
    height: 'auto',
    rowNum: 5,
    autowidth: true,
    pager: '#pager'
  });
  
  var rowid = 1;
  $('#newDelRowBtn').click(function() {
  	$('#list').jqGrid('delRowData', rowid++);
  });
  $('#addjSonData').click(function() {
  	var addData = [
    	{'name': '1004lucifer', 'phone': '(230) 124-2834'},
    	{'name': '1004lucifer', 'phone': '(230) 124-2834'},
    	{'name': '1004lucifer', 'phone': '(230) 124-2834'},
    	{'name': '1004lucifer', 'phone': '(230) 124-2834'},
    	{'name': '1004lucifer', 'phone': '(230) 124-2834'},
    	{'name': '1004lucifer', 'phone': '(230) 124-2834'},
    	{'name': '1004lucifer', 'phone': '(230) 124-2834'},
    	{'name': '1004lucifer', 'phone': '(230) 124-2834'},
    	{'name': '1004lucifer', 'phone': '(230) 124-2834'},
    	{'name': '1004lucifer', 'phone': '(230) 124-2834'},
    	{'name': '1004lucifer', 'phone': '(230) 124-2834'}
    ];
  	$('#list')[0].addJSONData(addData);
  });
});