Backgrid Multicollum sort

by erichbschulz

HTML

<script src="http://wyuenho.github.com/backgrid/assets/js/jquery.js"></script>
<script src="http://wyuenho.github.com/backgrid/assets/js/underscore.js"></script>
<script src="http://wyuenho.github.com/backgrid/assets/js/backbone.js"></script>
<script src="http://wyuenho.github.com/backgrid/lib/backgrid.js"></script>
<link rel="stylesheet" href="http://wyuenho.github.com/backgrid/lib/backgrid.css">
<link rel="stylesheet" href="http://wyuenho.github.com/backgrid/assets/css/bootstrap.css">
<h1>intro</h1>
<p>demonstration of basic backgrid with:</p>
<ul>
    <li>complex column sort attribute by overriding model.get()</li>
    <li>two method of kicking off collection (illustrating how added rows do NOT replace existing rows)</li>
</ul>

<h1>Entity Grid</h1>

<div id="agcEntityGrid"></div>

JavaScript

var app = function (options) {
    var Entity = Backbone.Model.extend({
        // overide parent method
        get: function (attr) {
            if (typeof this[attr] == 'function') {
                return this[attr]();
            }
            return Backbone.Model.prototype.get.call(this, attr);
        },
        sortOrder: function () {
            return this.get('name') + ' ' + this.get('description');
        }

    });
    var Entitys = Backbone.Collection.extend({
        model: Entity
    });
    var entitys = new Entitys(options.entitys);
    var columns = [{
        name: "select",
        label: "",
        cell: "boolean",
        sortable: false
    }, {
        name: "name",
        label: "Name",
        cell: "string"
    }, {
        name: "details",
        label: "Details",
        cell: "string"
    }, {
        name: "description",
        label: "Description",
        cell: "string"
    }, {
        name: "sortOrder",
        label: "sort",
        cell: "string"
    }];

    var grid = new Backgrid.Grid({
        columns: columns,
        collection: entitys
        //footer: Backgrid.Extension.Paginator
    });
    $('#agcEntityGrid').append(grid.render().$el);

    grid.insertRow({
        name: 'A',
        description: 'B'
    });

    // demonstration of other method of kicking off model
    // illustrates how added rows do NOT replace existing rows
    _.each(options.otherEntitys, function (row) {
        grid.insertRow(row);
    });

};

var options = {
    entitys: [{
        id: 1,
        name: 'A11',
        details: 'fish',
        description: 'B1'
    }, {
        id: 2,
        name: 'A2',
        details: 'cod',
        description: 'B3'
    }, {
        id: 3,
        name: 'A3',
        details: 'trout',
        description: '3'
    }],
    otherEntitys: [{
        id: 1,
        name: 'New11',
        details: 'fish',
        description: 'B1'
    }, {
        id: 2,
        name: 'A2',
        details: 'cod',
    ...