JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<table id='myTable'></table>
JavaScript
var grid = jQuery("#myTable");
var lastSel = -1;
grid.jqGrid({
url: '/echo/jsonp',
loadonce: true,
postData : {
"data": "[" +
"[1001, 0.5]" +
",[1002, 10]" +
",[1003, 89.5]" +
"]"
},
colModel : [
{ name: "rowid", key: true },
{ name: "qty", width: 70, align: "right", editable: true }
],
height: "auto",
datatype: "json",
jsonReader: { "root": function(obj){
return eval(obj.data);
}},
onSelectRow: function(id) {
if(id && id!==lastSel) {
jQuery('#myTable').restoreRow(lastSel);
lastSel=id;
}
jQuery('#myTable').editRow(id, {
url: 'clientArray',
keys: true,
aftersavefunc: function(id) {
console.log(this.p.data);
console.log('Saved rowid=' + id);
}
});
}
});