jqGrid Event-this

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:420px; border:2px black solid;">
  <table id="list"><tr><td></td></tr></table> 
  <div id="pager"></div> 
  <br />
  <h2>grid1</h2>
  <span id="grid1"></span>
  <h2>grid2</h2>
  <span id="grid2"></span>
</div>

JavaScript

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

$(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',
	sortname: 'phone',
	autowidth: false,
	pager: '#pager',
	rowNum: 5,
	onSelectRow :  function ( id ) {
	  $('#grid1').html(jQuery('#list')[0].innerHTML);
	  $('#grid2').html($(this)[0].innerHTML)
	}
  });
});