jqGrid Example

by Oleg Kiriljuk

HTML

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//rawgit.com/free-jqgrid/jqGrid/master/css/ui.jqgrid.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="//rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.src.js"></script>
<div align="center">
    <table id="list"></table>
    <div id="pager"></div>
</div>

JavaScript

var serverResponse = {
        "page": 1,
            "total": 1,
            "records": 4,
            "rows": [{
            "id": 941,
                "cell": [357967, false, "Z357967", 1]
        }, {
            "id": 940,
                "cell": [357963, false, "Z357963", 1]
        }, {
            "id": 939,
                "cell": [357967, false, "Z357967", 5]
        }, {
            "id": 938,
                "cell": [357967, false, "Z357967", 6]
        }]
    },
    containsOrNot = 'contains',
    $grid = $("#list"),
    lastsel2 = '';

$.extend($.jgrid.search, {
    multipleSearch: true,
    multipleGroup: true,
    recreateFilter: true,
    closeOnEscape: true,
    closeAfterSearch: true,
    overlay: 0
});

$grid.jqGrid({
    url: "/echo/json/", // use JSFiddle echo service
    datatype: "json",
    postData: {
        json: JSON.stringify(serverResponse) // needed for JSFiddle echo service
    },
    mtype: 'POST',
    colNames: ['id', 'Select Labels to Print', 'Item Number', 'Quantity'],
    colModel: [{
        name: 'I_PK',
        index: 'u.I_PK',
        align: 'right',
        editable: false,
        sopt: ['cn', 'eq', 'ne', 'lt', 'le', 'gt', 'ge', 'bw', 'ew', 'nc']
    }, {
        name: 'W3LabelSelected',
        index: 'u.W3LabelSelected',
        align: 'center',
        width: 170,
        editable: false,
        edittype: 'checkbox',
        formatter: "checkbox",
        search: false,
        formatoptions: {
            disabled: false
        },
        editoptions: {
            value: "1:0"
        }
    }, {
        name: 'I_ItemNumID',
        index: 'u.I_ItemNumID',
        align: 'right',
        editable: true,
        editoptions: {
            dataEvents: [{
                type: 'focusin',
                fn: function (e) {
                    var elem = e.target;
                    setTimeout(function () {
                        elem.select();
                    }, 50);
                }
            }]
        }
  ...