[StackOverflow] Backbone.js and jqGrid

A simple example using Backbone.JS and jqGrid. This example add each model present on the collection to the jqGrid.

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script src="http://www.trirand.com/blog/jqgrid/js/jquery.layout.js"></script>
<script src="http://www.trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script src="http://www.trirand.com/blog/jqgrid/js/ui.multiselect.js"></script>
<script src="http://www.trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
<script src="http://www.trirand.com/blog/jqgrid/js/jquery.tablednd.js"></script>
<script src="http://www.trirand.com/blog/jqgrid/js/jquery.contextmenu.js"></script>
<link rel="stylesheet" href="http://www.trirand.com/blog/jqgrid/themes/redmond/jquery-ui-1.8.1.custom.css">
<link rel="stylesheet" href="http://www.trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<link rel="stylesheet" href="http://www.trirand.com/blog/jqgrid/themes/ui.multiselect.css">
<table id="dogsList"></table>

JavaScript

// Create the table
var dogsTable = jQuery("#dogsList").jqGrid({ 
    datatype: 'local',
    width:'100%',
    colNames:['name', 'breed'], 
    colModel:[  {name:'name', align:'left'},
                {name:'breed', align:'left'}],
    loadComplete : function(data) {
        //alert('grid loading completed ' + data);
    },
    loadError : function(xhr, status, error) {
        alert('grid loading error' + error);
    }
});

// Create the collection
var Collection = Backbone.Collection.extend();

// Init the collection
var dogs = new Collection([
    {name:"Jane",breed:"Great Dane"},
    {name:"Rocky",breed:"golden Retriver"},
    {name:"Jim",breed:"Lab"}
]);

// For each dog, add a row in the table
dogs.each(function (dog, i) {
    dogsTable.jqGrid('addRowData', (i + 1), dog.toJSON());
});