JSFiddle - React, Tailwind, and code Playground

by johnc_22

HTML

<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>
<link rel="stylesheet" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<style type="text/css">
#myTable th, #myTable td
    {
        border-style:solid;
    border-width:1px;
    border-color:#000000;
    
    
    }
</style>

<table id='myTable'></table>

JavaScript

console.clear();
var grid = jQuery("#myTable");
var lastSel = -1;

grid.jqGrid({
    url: '/echo/jsonp',  
    postData : {
        data: "[" + 
                 "{id: 0, cell: [1, 'User1', 'Jordi']}" +
                ",{id: 1, cell: [2, 'User2', 'Laia']}" +
                ",{id: 2, cell: [3, 'User3', 'LluĂ­s']}" +
               "]"
    },   
    colModel : [
        { name: "order", width: 70, align: "right", formatter: "integer", key: true },
        { name: "code",  width: 100, editable: true },
        { name: "desc",  width: 80, editable: true }
    ],
    height: "auto",
    datatype: "json",
    jsonReader: { "root": function(obj){ return eval(obj.data); }},
    
    loadComplete: function(data) {
        jQuery('#myTable').remapColumns([1,2,0], true);
    },
    
    onSelectRow: function(id) {
        if(id && id!==lastSel) { 
            jQuery('#myTable').restoreRow(lastSel); 
            lastSel=id; 
        }
        jQuery('#myTable').editRow(id, {
            url: '/echo/jsonp',  
            keys: true,
            aftersavefunc: function(id) {
                console.log('Saved rowid=' + id);
            }
        }); 
    }
});