jqGrid Frozen Columns

jqGrid v4.6

by 1004lucifer

HTML

<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-kr.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">
<table id="gfrc1"></table>
<div id="pgfrc1"></div>

JavaScript

var serverJsonData = {'page':'1','total':2,'records':'13','rows':[{'id':'12','invdate':'2007-10-06','name':'Client 2','amount':'700.00','tax':'140.00','total':'840.00','note':null},{'id':'10','invdate':'2007-10-06','name':'Client 2','amount':'100.00','tax':'20.00','total':'120.00','note':null},{'id':'11','invdate':'2007-10-06','name':'Client 1','amount':'600.00','tax':'120.00','total':'720.00','note':null},{'id':'9','invdate':'2007-10-06','name':'Client 1','amount':'200.00','tax':'40.00','total':'240.00','note':null},{'id':'13','invdate':'2007-10-06','name':'Client 3','amount':'1000.00','tax':'0.00','total':'1000.00','note':null},{'id':'8','invdate':'2007-10-06','name':'Client 3','amount':'200.00','tax':'0.00','total':'200.00','note':null},{'id':'7','invdate':'2007-10-05','name':'Client 2','amount':'120.00','tax':'12.00','total':'134.00','note':null},{'id':'6','invdate':'2007-10-05','name':'Client 1','amount':'50.00','tax':'10.00','total':'60.00','note':''},{'id':'5','invdate':'2007-10-05','name':'Client 3','amount':'100.00','tax':'0.00','total':'100.00','note':'no tax at all'},{'id':'4','invdate':'2007-10-04','name':'Client 3','amount':'150.00','tax':'0.00','total':'150.00','note':'no tax'}]}

jQuery("#gfrc1").jqGrid({
  url: '/echo/json/', // use JSFiddle echo service
  datatype: 'json',
  mtype: 'POST',
  postData: { json: JSON.stringify(serverJsonData) },
  colNames: ['InvNo', 'Client', 'Amount', 'Tax', 'Total', 'Closed', 'Shipped via', 'Notes'],
  colModel: [
    {name: 'id', index: 'id', width: 60, align: 'center', sorttype: 'date', frozen : true},
    {name: 'name', index: 'name', width: 100, frozen : true },
    {name: 'amount', index: 'amount', width: 90, formatter: 'number', sorttype: 'number', align: 'right'},
    {name: 'tax', index: 'tax', width: 90, formatter: 'number', sorttype: 'number', align: 'right'},
    {name: 'total', index: 'total', width: 90, formatter: 'number', sorttype: 'number', align: 'right'},
    {name: 'closed', index: 'closed',...