jqGrid Example

by Oleg Kiriljuk

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.9.2/css/ui.jqgrid.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.9.2/js/i18n/grid.locale-en.js"></script>
<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>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<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]
    }]
};
var containsOrNot = 'contains';
var lastsel2;
var $grid = $("#list");
jQuery(document).ready(function () {
    var selection = '';
    var selectionColumn = '';
    jQuery("#list").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',
            width: '170',
            editable: false,
            sopt: ['cn', 'eq', 'ne', 'lt', 'le', 'gt', 'ge', 'bw', 'ew', 'nc']
        }, {
            name: 'W3LabelSelected',
            index: 'u.W3LabelSelected',
            align: 'center',
            width: '170',
            editable: true,
            edittype: 'checkbox',
            formatter: "checkbox",
            search: false,
            formatoptions: {
                disabled: false
            },
            editoptions: {
                value: "1:0"
            }
        }, {
            name: 'I_ItemNumID',
            index: 'u.I_ItemNumID',
            align: 'right',
            editable: false,
            width: '170',
            sopt: ['cn', 'eq', 'ne', 'lt', 'le', 'gt', 'ge', 'bw', 'ew', 'nc']
        }, {
            name: 'Quantity',
            index: 'u.Quantity',
            align: 'right',
            width: '170',
            editable: true,
            sopt: ['cn', 'eq', 'ne', 'lt', 'le', 'gt', 'ge', 'bw',...