JSFiddle - React, Tailwind, and code Playground

by mkdizajn

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/jqgrid/4.5.2/css/ui.jqgrid.css">
<script src="//cdn.jsdelivr.net/jqgrid/4.5.2/jquery.jqGrid.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/3.4.6/select2.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/3.4.6/select2.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<table id="777"></table>
<div id="pager"></div>
<div id="333" style="display: none">cell.1+++cell.2+++</div>

JavaScript

var lastSel;

var data = [{"id":"2439","cell":["2439","A         ","POLJOPRIVREDA, SUMARSTVO I RIBARSTVO","1","CROATIA : 2","POLJOPRIVREDA, SUMARSTVO I RIBARSTVO : 2439","0"]},{"id":"2440","cell":["2440","B         ","RUDARSTVO I VADENJE","1","CROATIA : 2","RUDARSTVO I VADENJE : 2440","0"]},{"id":"2441","cell":["2441","C         ","PRERADIVACKA INDUSTRIJA","1","CROATIA : 2","PRERADIVACKA INDUSTRIJA : 2441","0"]},{"id":"2442","cell":["2442","D         ","OPSKRBA ELEKTRICNOM ENERGIJOM, PLINOM, PAROM I KLIMATIZACIJA","0","CROATIA : 2","OPSKRBA ELEKTRICNOM ENERGIJOM, PLINOM, PAROM I KLIMATIZACIJA : 2442","0"]},{"id":"2443","cell":["2443","E         ","OPSKRBA VODOM; UKLANJANJE OTPADNIH VODA, GOSPODARENJE OTPADOM","1","CROATIA : 2","OPSKRBA VODOM; UKLANJANJE OTPADNIH VODA, GOSPODARENJE OTPADOM : 2443","0"]}];

jQuery("#777").jqGrid({
    datatype: "local",
    data: data,
    colNames:["Djelatnost_ID","Djelatnost_Sifra","Djelatnost_Tekst","Djelatnost_Koristi","Djelatnost_DrzavaID","Djelatnost_NadID","Djelatnost_Nivo"],
    colModel:[{"name":"cell.0","index":"id","hidden":false,"width":"128","edittype":"text","editable":true,"editoptions":{"size":"22"},"editrules":{"edithidden":false,"required":false,"number":true},"hidedlg":true,"viewable":false},
              {"name":"cell.1","index":"Djelatnost_Sifra","hidden":false,"width":"65","edittype":"text","editable":true,"editoptions":{"size":"22"},"editrules":{"edithidden":false,"required":false},"formoptions":{"rowpos":2,"colpos":1}},
              {"name":"cell.2","index":"Djelatnost_Tekst","hidden":false,"width":"128","edittype":"text","editable":true,"editoptions":{"rows":1,"size":"22"},"editrules":{"edithidden":false,"required":false},"formoptions":{"rowpos":3,"colpos":1}},
             ...