jqGrid Group Header - with colspan style

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="ghcs"></table>
<div id="pghcs"></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("#ghcs").jqGrid({
  url: '/echo/json/', // use JSFiddle echo service
  datatype: 'json',
  mtype: 'POST',
  postData: { json: JSON.stringify(serverJsonData) },
  colNames: ['Date', 'Client', 'Amount', 'Tax', 'Total', 'Closed', 'Shipped via', 'Notes'],
  colModel: [
    {name: 'invdate', index: 'invdate', width: 80, align: 'center', sorttype: 'date', formatter: 'date', formatoptions: {newformat: 'd-M-Y'}, datefmt: 'd-M-Y'},
    {name: 'name', index: 'name', width: 70 },
    {name: 'amount', index: 'amount', width: 75, formatter: 'number', sorttype: 'number', align: 'right'},
    {name: 'tax', index: 'tax', width: 75, formatter: 'number', sorttype: 'number', align: 'right'},
    {name: 'total', index: 'total', width: 75, formatter: 'number',...