Test Free jqGrid demo

by Chris001

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.4/css/ui.jqgrid.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.4/jquery.jqgrid.min.js"></script>
<table id="grid1"></table>

JavaScript

$(function() {
  "use strict";
  $("#grid1").jqGrid({
    colModel: [{
        name: "name",
        label: "Client",
        width: 53
      },
      {
        name: "invdate",
        label: "Date",
        width: 75,
        align: "center",
        sorttype: "date",
        formatter: "date",
        formatoptions: {
          newformat: "d-M-Y"
        }
      },
      {
        name: "amount",
        label: "Amount",
        width: 65,
        template: "number"
      },
      {
        name: "tax",
        label: "Tax",
        width: 41,
        template: "number"
      },
      {
        name: "total",
        label: "Total",
        width: 51,
        template: "number"
      },
      {
        name: "closed",
        label: "Closed",
        width: 59,
        template: "booleanCheckboxFa",
        firstsortorder: "desc"
      },
      {
        name: "ship_via",
        label: "Shipped via",
        width: 87,
        align: "center",
        formatter: "select",
        formatoptions: {
          value: "FE:FedEx;TN:TNT;DH:DHL",
          defaultValue: "DH"
        }
      }
    ],
    data: [{
        id: "10",
        invdate: "2015-10-01",
        name: "test",
        amount: ""
      },
      {
        id: "20",
        invdate: "2015-09-01",
        name: "test2",
        amount: "300.00",
        tax: "20.00",
        closed: false,
        ship_via: "FE",
        total: "320.00"
      },
      {
        id: "30",
        invdate: "2015-09-01",
        name: "test3",
        amount: "400.00",
        tax: "30.00",
        closed: false,
        ship_via: "FE",
        total: "430.00"
      },
      {
        id: "40",
        invdate: "2015-10-04",
        name: "test4",
        amount: "200.00",
        tax: "10.00",
        closed: true,
        ship_via: "TN",
        total: "210.00"
      },
      {
        id: "50",
        invdate: "2015-10-31",
        name: "test5",
        amount: "300.00",
        tax: "20.00",
        closed:...