jqgrid

test

by Lorenzo

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css">
<link rel="stylesheet" href="https://raw.githack.com/ttskch/select2-bootstrap4-theme/master/dist/select2-bootstrap4.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css">
<link rel="stylesheet" href="https://raw.githack.com/tonytomov/jqGrid/master/css/ui.jqgrid-bootstrap4.css">
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://raw.githack.com/tonytomov/jqGrid/master/js/i18n/grid.locale-it.js"></script>
<script src="https://raw.githack.com/tonytomov/jqGrid/master/js/i18n/grid.locale-en.js"></script>
<script src="https://raw.githack.com/tonytomov/jqGrid/master/js/jquery.jqGrid.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.full.min.js"></script>
<div id='cMain'>
  <table id="gMain"></table>
  <div id="pMain"></div>
</div>

CSS

#cMain{
  margin:10px;
}

.ui-jqgrid-disablePointerEvents {
  pointer-events: none;
}

/* Rimpicciolisco i caratteri */ 
.ui-jqgrid {
	font-size:0.8rem
}

/* Aggiungo il padding alla destra della cella */ 
.ui-jqgrid .ui-jqgrid-btable tbody tr.jqgrow td {
	padding-right: 0.75rem;
}

/* per avere le righe con un altezza più piccola */
/* Attenzione, quando attivo il word wrap e il char wrap devo disattivare questo. */ 
.ui-jqgrid tr.jqgrow td { 
    height: auto;
    padding-top: 2px;
    padding-bottom: 2px;
    vertical-align: middle;
}

/* 
  caratteri della testata più grandi.
  USARE REM e NON EM  
*/
.ui-jqgrid-titlebar{
	font-size: 1rem;
}


/* char wrap */
/*
th.ui-th-column div {	
  word-wrap: break-word;      
  white-space: -moz-pre-wrap; 
  white-space: -pre-wrap;     
  white-space: -o-pre-wrap;   
  white-space: pre-wrap;      
  overflow: hidden;
  height: auto !important;
  vertical-align: middle;
}
*/
/* word wrap */
/*
.ui-jqgrid tr.jqgrow td {
    white-space: normal !important;
    height: auto;
    vertical-align: middle;
    padding-top: 2px;
    padding-bottom: 2px;
}
*/

/* gestione char wrap e word wrap anche in caso di colonne frozen */
/*
.ui-jqgrid .ui-jqgrid-htable th.ui-th-column {
    padding-top: 2px;
    padding-bottom: 2px;
}
.ui-jqgrid .frozen-bdiv, .ui-jqgrid .frozen-div {
    overflow: hidden;
}
*/

JavaScript

//$.jgrid.defaults.width = 600;
$.jgrid.defaults.responsive = true;
$.jgrid.defaults.styleUI = 'Bootstrap4';
//$.jgrid.defaults.iconSet = "Octicons";
$.jgrid.defaults.iconSet = "fontAwesome";
//$.jgrid.defaults.iconSet = "Iconic";
  
var myData = [
  {
   id: 19020001245,
   name: "aaz",
   field5: "ciao"
  }, 
  {
   id: 19020001246,
   name: "bbz",
   field5: "ciao2"
  },
  {
   id: 19020001247,
   name: "ccz",
   field5: "ciao3"
  },
  {
   id: 19020001248,
   name: "ddz",
   field5: "ciao4"
  }  
];

var mySubData1 = [
  {
   id: 19020001248,   
   name: "sub1"
  },
  {
   id: 19020001249,   
   name: "sub2"
  },
  {
   id: 19020001250,   
   name: "sub3"
  }
];

/*
var serverResponce = "<select>" +
                     "  <optgroup label='MyGroup'>"+
                     "    <option value='aaz'>A</option>" +
                     "    <option value='bbz'>B</option>" +
                     "    <option value='ccz'>C</option>"+
                     "  </optgroup> "+
                     "</select>";
*/

var serverResponce = {
    id: 1,
    text: '2'
};

'{ '+
'  "results": [ '+
'    { '+
'      "id": 1, '+
'      "text": "Option 1", '+
'      "other": "test1" '+
'    }, '+
'    { '+
'      "id": 2, '+
'      "text": "Option 2", '+
'      "other": "test2" '+
'    }, '+
'    { '+
'      "id": 3, '+
'      "text": "Option 3", '+
'      "other": "test3" '+
'    } '+
'  ] '+
'} ';

GridFunctions = {

showSubGrid: function showChildGrid(parentRowID, parentRowKey) {
	  var childGridID = parentRowID + "_table";
	  var childGridPagerID = parentRowID + "_pager";

	  $('#' + parentRowID).append('<table id=' + childGridID + '></table><div id=' + childGridPagerID + ' class=scroll></div>');

	  $("#" + childGridID).jqGrid({        
	    data: mySubData1,
	    forcePgButtons: true,
	    datatype: "local",
	    mtype: "GET",    
	    page: 1,
	    colModel: [
	      { label: 'id', name: 'id', key: true, width: 100, autosize: true},
	      { label: 'name', name: 'name',...