working jqGrid Example

HTML

<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"}
        ];
    
    $("#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) {
                $this.jqGrid('resetSelection');
            } else if (startId && e.shiftKey) {
                $this.jqGrid('resetSelection');

                // get DOM elements of the previous selected and
                // the currect selected rows
                startRow = rows.namedItem(startId);
                endRow = rows.namedItem(rowid);
                if (startRow && endRow) {
                    // get min and max from the indexes of the previous selected
                    // and the currect selected rows 
                    iStart = Math.min(startRow.rowIndex, endRow.rowIndex);
                    rowidIndex = endRow.rowIndex;
                    iEnd = Math.max(startRow.rowIndex, rowidIndex);
                    for (i = iStart; i <= iEnd; i++) {
                        // the row with...