JSFiddle - React, Tailwind, and code Playground

by gurkavcu

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 id="developersGrid" data-bind="grid: { data: developers,
                                                selectedItem: selectedDeveloper,
                                                  colModel: [
    { name: 'Name', index: 'Name', width: 200, sortable: true },
    { name: 'Desc', index: 'Desc', width: 300, sortable: true }],
                                                 rowId: 'ID',
                                                 pager: '#pager'
                                                    }">
    </table>
    <div id="pager"></div>

JavaScript

// Simple general-purpose "grid" binding

/*globals ko */

ko.bindingHandlers.grid = {
    init: function (element, valueAccessor) {
        var value = valueAccessor();
        var dataArr = ko.utils.unwrapObservable(value.data).slice(0);

        var grid = $(element).jqGrid({
            data: dataArr,
            datatype: "local",
            localReader:
                        { repeatitems: false,
                            id: value.rowId
                        },
            gridview: true,
            height: 'auto',
            hoverrows: false,
            colModel: value.colModel,
            pager: value.pager,
            rowNum: 3,

        });

        $(element).jqGrid("setGridParam", { data: ko.utils.unwrapObservable(value.data).slice(0) });
    },
    update: function (element, valueAccessor) {
        var value = valueAccessor();
        var gridData = $(element).jqGrid('getGridParam', 'data');


        var editScript = ko.utils.compareArrays(gridData, value.data());
        for (var i = 0; i < editScript.length; i++) {
            switch (editScript[i].status) {
                case "added":
                    $(element).jqGrid("addRowData", editScript[i].value[value.rowId], editScript[i].value);
                    break;
                case "deleted":
                    $(element).jqGrid("delRowData", editScript[i].value[value.rowId]);
                    break;
            }
        }
    }
};

var dataArr = [{"ID":1,"Name":"user1","Desc":"desc1"},{"ID":2,"Name":"user2","Desc":"desc2"},{"ID":4,"Name":"user3","Desc":"desc3"},{"ID":6,"Name":"user4","Desc":"desc4"},{"ID":7,"Name":"user5","Desc":"desc5"}];

  var viewModel = {
        developers: ko.observableArray(dataArr),
        selectedDeveloper:  ko.observable()
    };

ko.applyBindings(viewModel);