jqGrid - Event

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:600px;">
  <table id="list1"><tr><td></td></tr></table> 
  <div id="pager1"></div>
  <h4>
  ajax request order (Success)
  </h4>
  <span id="ajaxOrder1"></span>
  <br />
  <table id="list2"><tr><td></td></tr></table> 
  <div id="pager2"></div>
  <h4>
  ajax request order (Error)
  </h4>
  <span id="ajaxOrder2"></span>
</div>

JavaScript

var serverJsonData = 
{ 
  'totalpages' : '10', 
  'currpage' : '1',
  'totalrecords' : '15',
  'invdata' : [
    {'invid' : '1','invdate':'cell11', 'amount' :'cell12', 'tax' :'cell13', 'total' :'1234', 'note' :'somenote'},
    {'invid' : '2','invdate':'cell21', 'amount' :'cell22', 'tax' :'cell23', 'total' :'2345', 'note' :'some note'},
    {'invid' : '3','invdate':'cell21', 'amount' :'cell22', 'tax' :'cell23', 'total' :'2345', 'note' :'some note'},
    {'invid' : '4','invdate':'cell21', 'amount' :'cell22', 'tax' :'cell23', 'total' :'2345', 'note' :'some note'},
  ]
};

$("#list1").jqGrid({
  url: '/echo/json/', // use JSFiddle echo service
  datatype: 'json',
  mtype: 'POST',
  postData: { json: JSON.stringify(serverJsonData) },
  colModel :[ 
    {name:'invid', index:'invid', width:55}, 
    {name:'invdate', index:'invdate', width:90}, 
    {name:'amount', index:'amount', width:80, align:'right'}, 
    {name:'tax', index:'tax', width:80, align:'right'}, 
    {name:'total', index:'total', width:80, align:'right'}, 
    {name:'note', index:'note', width:150, sortable:false} 
  ],
  jsonReader : {
    root:"invdata",
    page: "currpage",
    total: "totalpages",
    records: "totalrecords",
    repeatitems: false,
    id: "0"
  },
  cellEdit: true,
  caption : 'Ajax Request',
  height: 'auto',
  autowidth: true,
  rowNum: 5,
  pager: '#pager1',
  beforeRequest: function() {
    $('#ajaxOrder1').append('beforeRequest<br/>');
  },
  loadBeforeSend: function() {
    $('#ajaxOrder1').append('loadBeforeSend<br/>');
  },
  serializeGridData: function(postData) {
    $('#ajaxOrder1').append('serializeGridData<br/>');
    return postData
  },
  loadError : function() {
    $('#ajaxOrder1').append('loadError<br/>');
  },
  beforeProcessing: function() {
    $('#ajaxOrder1').append('beforeProcessing<br/>');
  },
  gridComplete: function() {
    $('#ajaxOrder1').append('gridComplete<br/>');
  },
  loadComplete: function() {
    $('#ajaxOrder1').append('loadComplete<br/>');
...