working jqGrid Example

by TheSneak

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="grid"></table>

JavaScript

$(function () {
    'use strict';
    var mydata = [
            {id: 48803, thingy: "DSK1", blank: "", number: "02200220", status: "OPEN"},
            {id: 48769, thingy: "APPR", blank: "", number: "77733337", status: "ENTERED"},
            {id: 32324, thingy: "rrrr", blank: "", number: "83838383", status: "ENTER"},
            {id: 58803, thingy: "DSK1", blank: "", number: "02200220", status: "OPEN"},
            {id: 58769, thingy: "APPR", blank: "", number: "77733337", status: "ENTERED"},
            {id: 52324, thingy: "rrrr", blank: "", number: "83838383", status: "ENTER"},
            {id: 68803, thingy: "DSK1", blank: "", number: "02200220", status: "OPEN"},
            {id: 68769, thingy: "APPR", blank: "", number: "77733337", status: "ENTERED"},
            {id: 62324, thingy: "rrrr", blank: "", number: "83838383", status: "ENTER"},
            {id: 78803, thingy: "DSK1", blank: "", number: "02200220", status: "OPEN"},
            {id: 78769, thingy: "APPR", blank: "", number: "77733337", status: "ENTERED"},
            {id: 72324, thingy: "rrrr", blank: "", number: "83838383", status: "ENTER"}
        ];
    
    $("#grid").jqGrid({
        datatype: "local",
        data: mydata,
        colNames: ['Inv No', 'Thingy', 'Blank', 'Number', 'Status'],
        colModel: [
            { name: 'id', width: 60, sorttype: "int" },
            { name: 'thingy', width: 90 },
            { name: 'blank', width: 90 },
            { name: 'number', width: 80, sorttype: "float" },
            { name: 'status', width: 80 }
        ],
        caption: "Stack Overflow Example",
        height: "auto",
        multiselect: true,
        beforeSelectRow: function(rowid, e) {
            var $this = $(this), rows = this.rows,
                // get id of the previous selected row
                startId = $this.jqGrid('getGridParam', 'selrow'),
                startRow, endRow, iStart, iEnd, i, rowidIndex;

            if (!e.ctrlKey && !e.shiftKey) {
               ...