JSFiddle - React, Tailwind, and code Playground

by zohalexix

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.0/css/ui.jqgrid.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.0/jquery.jqgrid.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.0/css/ui.jqgrid.min.css.map"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.0/jquery.jqgrid.min.js.map"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.0/jquery.jqgrid.src.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.0/css/ui.jqgrid.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<div>
To test the issue: 1 - Edit a row, 2 - change page, 3 - come back to original page, 4 - Local status is overriden
</div>

<table id="grid"></table>
<div id="pager"></div>

<div><button id="b1">Submit</button></div>

<div id="out"></div>

CSS

#out{
  height: 400px;
  overflow:auto;
}

JavaScript

var data = [];

for(var i=0; i<4; i++){
	data.push({id:i, select1: i%3});
}

var grid = $('#grid');

grid.jqGrid({
	caption: 'Testing',
  editurl: 'clientArray',
  datatype: 'local',
  data: data,
  rowNum: 2,
  rowList: [2, 4],
  pager: '#pager',
	height: '100%',
  colModel: [
  	{name:'id', key:true, hidden: false},
    {name:'select1', label: 'Server status', editable:true, edittype:'select', formatter:'select', editoptions:{
    		value:'0:AAA;1:BBB;2:CCC'
    }},
    {name:'select2', label: 'Local status', editable: true, edittype: 'select', formatter:'select', editoptions:{
    		value:'0:AAA;1:BBB;2:CCC'
    }},
    {name:'act', label: '',width:55,align:'center',sortable:false,formatter:'actions',formatoptions:{keys: true}}
  ],
  beforeProcessing: function(data){
    out('beforeProcessing - why you no fire?');
  },
  loadComplete: function(data){
  	for(var i=0; i<data.rows.length; i++){
      var row = data.rows[i];
    	grid.jqGrid('setRowData', row.id, {
      	select2: 0
      });
    }
  }
});

$('#b1').click(function(){
    $('#out').empty()
		var gridData = grid.jqGrid('getGridParam','data');
    for(var i=0; i<gridData.length; i++){
       out(JSON.stringify(gridData[i]));
    }
});

function out(message){
	$('#out').append('<p>' + message +'</p>');
}