jqGrid Data - Resizable Grid

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>
<link rel="stylesheet" href="https://raw.githack.com/michael/multiselect/master/css/ui.multiselect.css">
<script src="https://raw.githack.com/michael/multiselect/master/js/ui.multiselect.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">
<div style="height:400px;">
  <h4>리사이즈 가능한 그리드</h4>
  <table id="list"><tr><td></td></tr></table> 
  <div id="pager"></div>
</div>

JavaScript

var serverJsonData =
{
  'totalpages': '10',
  'currpage': '1',
  'totalrecords': '15',
  'invdata': [
    { 'invid': '1', 'invdate': 'cell11', 'amount': 'cell12', 'tax': 'cell13', 'total': '1234', 'note': 'somenote' },
    { 'invid': '2', 'invdate': 'cell21', 'amount': 'cell22', 'tax': 'cell23', 'total': '2345', 'note': 'some note' },
    { 'invid': '3', 'invdate': 'cell21', 'amount': 'cell22', 'tax': 'cell23', 'total': '2345', 'note': 'some note' },
    { 'invid': '4', 'invdate': 'cell21', 'amount': 'cell22', 'tax': 'cell23', 'total': '2345', 'note': 'some note' },
    { 'invid': '5', 'invdate': 'cell21', 'amount': 'cell22', 'tax': 'cell23', 'total': '2345', 'note': 'some note' },
    { 'invid': '6', 'invdate': 'cell21', 'amount': 'cell22', 'tax': 'cell23', 'total': '2345', 'note': 'some note' },
    { 'invid': '7', 'invdate': 'cell21', 'amount': 'cell22', 'tax': 'cell23', 'total': '2345', 'note': 'some note' },
    { 'invid': '8', 'invdate': 'cell21', 'amount': 'cell22', 'tax': 'cell23', 'total': '2345', 'note': 'some note' },
    { 'invid': '9', 'invdate': 'cell21', 'amount': 'cell22', 'tax': 'cell23', 'total': '2345', 'note': 'some note' },
  ]
};

$("#list").jqGrid({
  url: '/echo/json/', // use JSFiddle echo service
  datatype: 'json',
  mtype: 'POST',
  postData: { json: JSON.stringify(serverJsonData) },
  colModel: [
    { name: 'invid', index: 'invid', width: 55 },
    { name: 'invdate', index: 'invdate', width: 90 },
    { name: 'amount', index: 'amount', width: 80, align: 'right' },
    { name: 'tax', index: 'tax', width: 80, align: 'right' },
    { name: 'total', index: 'total', width: 80, align: 'right' },
    { name: 'note', index: 'note', width: 150, sortable: false }
  ],
  jsonReader: {
    root: "invdata",
    page: "currpage",
    total: "totalpages",
    records: "totalrecords",
    repeatitems: false,
    id: "0"
  },
  caption: 'JSON Data',
  autowidth: true,
  rowNum: 10,
  viewrecords: true,
  pager:...