jqGrid Example

by rough cheap

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
<table id="list"></table>
<div id="pager"></div>
<input type="button" value="toggle"/>
<input type="button" value="clear"/>

JavaScript

var myData = [{
  id: 1,
  name: "aaz"
}, {
  id: 2,
  name: "bbz"
}, {
  id: 3,
  name: "ccz"
}, ];

$("#list").jqGrid({
  datatype: "local",
  colNames: ["Id", "Group", "Name"],
  colModel: [{
    name: "id",
    index: "id",
    sorttype: "int"
  }, {
  	name: "group",
    index : "group"
    
  }, {
    name: "name",
    index: "name"
  }],
  caption: "Viz Test",
  pager: '#pager',
  search: true,
  multiselect: true,
  data: myData,
  onSelectRow: function() {
    var s_row = $("#list").jqGrid('getGridParam', 'selarrrow');
    var a_row = $('#list').jqGrid('getDataIDs');
    console.log(s_row);
    console.log(a_row);
    console.log(s_row.sort(function(a, b) {
    	console.log('a=' + a + ', b=' + b);
      return a - b
    }).join());
    console.log(a_row.sort(function(a, b) {
      return a - b
    }).join());
    if (s_row.sort(function(a, b) {
        return a - b
      }).join() ==
      a_row.sort(function(a, b) {
        return a - b
      }).join()) {
      $('#cb_list').prop('checked', true);
    }
  }
});