jqGrid Data - Column Chooser

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">
<table id="list"><tr><td></td></tr></table> 
<div id="pager"></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' },
  ]
};

$("#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',
  height: 'auto',
  autowidth: true,
  rowNum: 5,
  viewrecords: true,
  pager: '#pager'
});

$("#list").jqGrid('navGrid', '#pager', {
  add: false,
  edit: false,
  del: false,
  search: false,
  refresh: false
});
$("#list").jqGrid('navButtonAdd', '#pager', {
  caption: "Columns",
  title: "Reorder Columns",
  onClickButton: function () {
    $("#list").jqGrid('columnChooser');
  }
});