jqGrid ColModel API

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">
<div style="height:430px;">
<table id="list1"><tr><td></td></tr></table> 
<div id="pager1"></div> 
<br/>
<table id="list2"><tr><td></td></tr></table> 
<div id="pager2"></div> 
</div>

CSS

.custom-color {
  color: red;
}

JavaScript

var dataArray = [
  {
    "name": "Lorene Battle",
    "phone": "(936) 574-3976"
  },
  {
    "name": "Wendi Downs",
    "phone": "(815) 510-3017"
  },
  {
    "name": "Hatfield Hinton",
    "phone": "(983) 515-2327"
  },
  {
    "name": "Hatfield Hinton",
    "phone": "(983) 515-2327"
  },
  {
    "name": "Hatfield Hinton",
    "phone": "(983) 515-2327"
  },
  {
    "name": "Hatfield Hinton",
    "phone": "(983) 515-2327"
  }
];

$("#list1").jqGrid({
  datatype: 'local',
  data: dataArray,
  colModel: [
    {name: 'name', classes: 'custom-color'},
    {name: 'phone',editable:true, editoptions: {size:10, maxlength: 15}}
  ],
  caption : 'Users Grid',
  height: 'auto',
  forceFit : true,
  cellEdit: true,
  cellsubmit: 'remote',
  rowNum: 5,
  pager: '#pager1'
});

$("#list2").jqGrid({
  datatype: 'local',
  data: dataArray,
  colModel: [
    {name: 'name', width: '300'},
    {name: 'phone'}
  ],
  caption : 'Users Grid',
  height: 'auto',
  rowNum: 5,
  pager: '#pager2'
});