JSFiddle - React, Tailwind, and code Playground

by Oleg Kiriljuk

HTML

<link rel="stylesheet" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.5.4/css/ui.jqgrid.css">
<script src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.5.4/js/i18n/grid.locale-en.js"></script>
<script src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.5.4/js/jquery.jqGrid.src.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/redmond/jquery-ui.css">
<table id="list4"></table>
<button id="postAllGridData" type="button">save current grid data to server</button>

JavaScript

var mydata = [
        { id: "1", Name: "karel", Monday: "test",  Friday: "note",  Tuesday: "200.00", Wednesday: "10.00", Thursday: "210.00" },
        { id: "2", Name: "peter", Monday: "test2", Friday: "note2", Tuesday: "300.00", Wednesday: "20.00", Thursday: "320.00" },
        { id: "3", Name: "pietje", Monday: "test3", Friday: "note3", Tuesday: "400.00", Wednesday: "30.00", Thursday: "430.00" },
        { id: "4", Name: "krekel", Monday: "test",  Friday: "note",  Tuesday: "200.00", Wednesday: "10.00", Thursday: "210.00" },
        { id: "5", Name: "Hans", Monday: "test2", Friday: "note2", Tuesday: "300.00", Wednesday: "20.00", Thursday: "320.00" },
        { id: "6", Name: "Ahmet", Monday: "test3", Friday: "note3", Tuesday: "400.00", Wednesday: "30.00", Thursday: "430.00" },
        { id: "7", Name: "ielse", Monday: "test",  Friday: "note",  Tuesday: "200.00", Wednesday: "10.00", Thursday: "210.00" },
        { id: "8", Name: "Janneke", Monday: "test2", Friday: "note2", Tuesday: "300.00", Wednesday: "20.00", Thursday: "320.00" },
        { id: "9", Name: "Maaike", Monday: "test3", Friday: "note3", Tuesday: "400.00", Wednesday: "30.00", Thursday: "430.00" }
    ],
    lastSel,
    $grid = $("#list4");

$grid.jqGrid({
    caption: "Week 40 (16-12 t/m 22-22)",
    datatype: "local",
    data: mydata,
    height: "auto",
    colNames: [/*'Id', */'Date', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
    colModel: [
        //{ name: 'id', editable : false, width: 60, sorttype: "int" },
        { name: 'Name', editable: false, width: 90, sorttype: "date" },
        { name: 'Monday', sorttype: "float" },
        { name: 'Tuesday', align: "right", sorttype: "float" },
        { name: 'Wednesday', align: "right", sorttype: "float" },
        { name: 'Thursday', align: "right", sorttype: "float" },
        { name: 'Friday', sorttype: "float" }
    ],
    cmTemplate: { editable: true, width: 80 },
    editurl: 'clientArray',
    onSelectRow: function (rowid)...