JSFiddle - React, Tailwind, and code Playground

by KevinGabbert

HTML

<script src="http://www.trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
<table id="data"></table>

JavaScript

var lastsel2 = 1;

jQuery("#data").jqGrid({
    datatype: "local",
    height: 250,
    colNames:['ID Number', 'Ship via'],
    colModel:[
        { name:'id',index:'id', width:150 },
        { name: 'ship', index: 'ship', editable: true, edittype: 'select', width: 100, editoptions: { value: { 1: 'FedEx', 2: 'TNT' } } }
    ],
    onSelectRow: function(id){
        
        if(id!= lastsel2){
            
            $('#data').jqGrid('restoreRow',lastsel2);
            $('#data').jqGrid('editRow',id, true);
            
            lastsel2 = id;
        }
    }
});


var data = [
    {id:"1", ship:"Fedex"},
    {id:"2", ship:"ARAMEX"},
    {id:"3", ship:"TNT"},
    {id:"4", ship:"UPS"}
];

for(var i=0;i < data.length;i++) {
    jQuery("#data").jqGrid('addRowData',data[i].id, data[i]);
}