jqGrid Event - click1

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:450px;">
  <h4>그리드의 데이터테이블 클릭 시 이벤트발생 확인가능</h4>
  <table id="list"><tr><td></td></tr></table>
  <div id="pager"></div><br/>
  <b>Click Event History</b><br/>
  <div id="history"
    style="width:100%; height:200px; overflow:scroll;">  
  </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'}
  ],
  caption : 'Users Grid',
  height: 'auto',
  autowidth: true,
  rowNum: 5,
  pager: '#pager',
  beforeSelectRow: function(rowid, e) {
  	$('#history')
    	.append('beforeSelectRow() - rowid: ', rowid, 
        '\t\te: ', e + '<br/>')
    return true // true 반환하지 않으면 다음 이벤트가 수행되지 않음.
  },
  onCellSelect: function(rowid, iCol, cellcontent, e) {
  	$('#history').append('onCellSelect() - rowid: ', rowid,
  	      '\t\tiCol: ', iCol,
  	      '\t\tcellcontent: ', cellcontent,
  	      '\t\te: ', e + '<br/>')
  },
  onRightClickRow: function(rowid, iRow, iCol, e) {
  	$('#history').append('onRightClickRow() - rowid: ', rowid,
  	      '\t\tiRow: ', iRow,
  	      '\t\tiCol: ', iCol,
  	      '\t\te: ', e + '<br/>')
  },
  onSelectRow: function(rowid, status, e) {
  	$('#history').append('onSelectRow() - rowid: ', rowid,
  	      '\t\tstatus: ', status,
  	      '\t\te: ', e + '<br/>')
  },
});