JSFiddle - React, Tailwind, and code Playground

by brux88

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-1.3.0beta.debug.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
            <table width="100%" class="button">

                      <tr>
                <td width="50%">
                    <input  type="button" onclick = "javascript:Add();" value ="Add" class="button"/> 
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="button" value="Save" onclick = "javascript:Save();" class="button" /> 
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

                    <input type="button" value="Edit" onclick = "javascript:Edit();"  class="button"/>
                    <input type="button" value="Reset" onclick = "javascript:Reset();"  class="button"/> 
                </td><!--onclick = "javascript:Elimina();"-->
                <td width="50%" align="right"><input type="button" value="Delete" onclick = "javascript:Delete();" class="button" /></td>
                                    
            </tr>
        </table> 
        <br />

        <table id="grdOrdAg" data-bind="grid: { data: getDataNew,  
    colModel: [{name: 'ncolli', sortable: false, width: 50, editable: true, align: 'left', formatter: 'integer', formatoptions: { defaultValue: ''} },
                { name: 'pcolli', sortable: false, width: 80, editable: true, align: 'left', formatter: 'number', formatoptions: { defaultValue: '', decimalPlaces: 3} },
                { name: 'ptara', sortable: false, width: 50, editable: true, align: 'left', formatter: 'number', formatoptions: {...

JavaScript

ko.bindingHandlers.grid = {
                init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
                    var value = valueAccessor();
                    var dataArr = value.data();
                    var grid = $(element).jqGrid({
                        url: '/echo/json/',
                        //editurl: '/echo/json/',
                      //  data: dataArr,
                        datatype: "json",
                        localReader:
                        { repeatitems: false,
                            id: value.rowId
                        },
                        gridview: true,
                        height: 'auto',
                        hoverrows: true,
                        colModel: value.colModel,
                        pager: value.pager,
                        rowNum: 20


                    });
                }
            };

            var developer = function () {


                var self = this;
                self.Id = ko.observable();
                self.ncolli = ko.observable();
                self.pcolli = ko.observable();
                self.ptara = ko.observable();
                self.price = ko.observable();
                self.pnetto = ko.observable();


                self.pcolli.subscribe(function () {
                    self.pnetto(self.pcolli() ? self.pcolli() - self.ptara() : 0);
                });


                self.ptara.subscribe(function () {
                    self.Pnetto(self.pcolli() ? self.pcolli() - self.ptara() : 0);
                });


                self.pnetto.subscribe(function () {
                    self.Pcolli(self.pnetto() ? eval(self.pnetto()) + eval(self.ptara()) : 0);
                });


                self.total= ko.computed(function () {
                    return self.ncolli() ? self.price() * parseInt("0" + self.pnetto(), 10) : 0;
                });
            };


//            var developer = function (userId, userName, disc)...