JSFiddle - React, Tailwind, and code Playground

by Oleg Kiriljuk

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/blitzer/jquery-ui.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-fr.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.src.js"></script>
<div id="body">
    <div class="ad_loading">
        <h1><em>Loading...</em></h1>
    </div>
    <div id="content" class="hidden">
        <table id="list">
            <tr>
                <td></td>
            </tr>
        </table>
        <div id="pager"></div>
        <div id="debug"></div>
    </div>
</div>

CSS

#body {
    font: 12px / 16px"arial", sans-serif;
}
.hidden {
    display: none;
}

JavaScript

var mydata = [{
        "id": "jqg1",
        "str_idadone": "A001",
        "str_prenom": "Sami"
    }, {
        "id": "jqg2",
        "str_idadone": "A002",
        "str_prenom": "Faddil"
    }, {
        "id": "jqg3",
        "str_idadone": "A003",
        "str_prenom": "François"
    }, {
        "id": "jqg4",
        "str_idadone": "A004",
        "str_prenom": "David"
    }, {
        "id": "jqg5",
        "str_idadone": "A005",
        "str_prenom": "Antoine"
    }, {
        "id": "jqg6",
        "str_idadone": "A006",
        "str_prenom": "Anne-Laure"
    }, {
        "id": "jqg7",
        "str_idadone": "A008",
        "str_prenom": "Olivier"
    }, {
        "id": "jqg8",
        "str_idadone": "A016",
        "str_prenom": "Christine"
    }, {
        "id": "jqg9",
        "str_idadone": "A022",
        "str_prenom": "Mathieu"
    }],
    lastSel,
    onclickSubmitLocal = function (options, postdata) {
        var $this = $(this),
            p = $(this).jqGrid("getGridParam"), // p = this.p,
            idname = p.prmNames.id,
            id = this.id,
            idInPostdata = (id + "_id"),
            rowid = postdata[idInPostdata],
            addMode = (rowid === "_empty"),
            oldValueOfSortColumn,
            newId,
            idOfTreeParentNode;
        
        // postdata has row id property with another name. we fix it:
        if (addMode) {
            // generate new id
            newId = $.jgrid.randId();
            while ($("#" + newId).length !== 0) {
                newId = $.jgrid.randId();
            }
            postdata[idname] = String(newId);
        } else if (postdata[idname] === undefined) {
            // set id property only if the property not exist
            postdata[idname] = rowid;
        }
        delete postdata[idInPostdata];
        
        // prepare postdata for tree grid
        if (p.treeGrid === true) {
            if (addMode) {
                idOfTreeParentNode = (p.treeGridModel ===...