jqGrid Example

by 1004lucifer

HTML

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//rawgit.com/free-jqgrid/jqGrid/master/css/ui.jqgrid.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.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 align="center">
    <table id="list"></table>
    <div id="pager"></div>
</div>

JavaScript

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

$("#list").jqGrid({
  datatype: 'local',
  data: dataArray,
  colModel: [
    {name: 'name', label : 'Name', editable: false},
    {name: 'phone', label : 'Phone Number'}
  ],
  pager: '#pager',
        editable: false,
  //onCellSelect: function (row, col, content, event) {
  onCellSelect: function(rowid, iCol, cellcontent, e) {
  	alert('aaa')
  	$('#history').append('onCellSelect() - rowid: ', rowid,
  	      '\t\tiCol: ', iCol,
  	      '\t\tcellcontent: ', cellcontent,
  	      '\t\te: ', e,
  	      '<br/>')
  },
  beforeSelectRow: function(rowid, e) {
  	$('#history')
    	.append('beforeSelectRow() - rowid: ', rowid, 
        '\t\te: ', e,
        '<br/>')
  },
});