Test Grid Control

by vbfischer

HTML

<link rel="stylesheet" href="https://s3.amazonaws.com/berzerker/ui.jqgrid.css">
<script src="https://s3.amazonaws.com/berzerker/grid.locale-en.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/overcast/jquery-ui.css">
<script src="https://github.com/douglascrockford/JSON-js/blob/master/json2.js"></script>
<script src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.8.1/js/jquery.jqGrid.min.js"></script>
<script src="https://raw.github.com/appendto/amplify/master/core/amplify.core.js"></script>
<script src="https://raw.github.com/appendto/amplify/master/request/amplify.request.js"></script>
<script src="https://raw.github.com/appendto/amplify/master/store/amplify.store.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone.js"></script>
<script src="http://documentcloud.github.com/backbone/examples/backbone-localstorage.js"></script>
<table id="theTable"></table>
<div id="pager"></div>

CSS

html, body {
    margin: 0;            /* Remove body margin/padding */
    padding: 0;
    overflow: hidden;  
    font-size: 75%;
    
}

JavaScript

//START WIDGET
(function($) {
    $.widget('ui.bzTable', {
        _init: function() {
            $("#theTable").jqGrid({
                datatype: 'json',
                height: 100,
                colNames: ['id', 'name'],

                autowidth: true,
                colModel: [
                    {
                    name: 'id',
                    index: 'id',
                    width: 60},
                {
                    name: 'name',
                    index: 'name',
                    width: 100}

                ],
                caption: "Test Table",
                pager: '#pager'
            });

            amplify.subscribe('table.data.updated', this, function(theData) {
                console.log('step 3.5');
                $(this.element)[0].addJSONData(theData);
            });
        }
    });
})(jQuery);
//END WIDGET
$("#theTable").bzTable();

var data2 = {
    total: "2",
    page: "1",
    records: "2",
    rows: [
        {
        id: "1",
        cell: ['6', 'cell1']},
    {
        id: "2",
        cell: ['7', 'cell2']}
    ]
};
var RequestItem = Backbone.Model.extend({
    defaults: {
        id: 0,
        name: ""
    }
});

var RequestCollection = Backbone.Collection.extend({
    model: RequestItem,
    
    localStorage: new Store("items")
});

var TheRequest = Backbone.Model.extend({
    defaults: {
        totalPages: 1,
        currentPage: 1,
        totalItems: 0,
        itemList: new RequestCollection()
    }
});

var myCollection = new Backbone.Collection();
myCollection.add({id: "item1"});
myCollection.add({id: "item2"});

console.log(JSON.stringify(myCollection));

amplify.publish('table.data.updated', data2);