bbGrid by direct-fuel-injection

is extendable grid based on backbone.js, jQuery and Bootstrap.

Fork me on Github Download latest realese

What it is

Quite simply, bbGrid is a JavaScript grid/spreadsheet component. The general idea is the same as in Backbone, you don't need to keep an eye on collection, bbGrid will do that! You can report bugs and discuss features on the GitHub issues page or send tweets to @feat_dfi.
Not in stable version, right now.

Some highlights:

How to Start

First of all you must to do is download dependecies. Here there's home pages:

Include bbGrid.js and bbGrid.css into your project. It should look like this:

Example code:

<link rel="stylesheet" type="text/css" href="../bootstrap.css">
<link rel="stylesheet" type="text/css" href="../bbGrid.css">
	
<script type="text/javascript" src="../jquery.min.js"></script>
<script type="text/javascript" src="../underscore-min.js"></script>
<script type="text/javascript" src="../backbone-min.js"></script>
<script type="text/javascript" src="../bbGrid.js"></script>
After all work is done. Go to the Basics section.

Documentation

Lets start with basics. First to make grid work create Backbone.Collection and then create new bbGrid object (implements Backbone.View).

Warning! Collection must contain models with unique id attribute. This is needed for correct sorting, click event handlers and other things.

Example code:

var MyGrid = new bbGrid.View({        
        container: $('#bbGrid-container'),        
        collection: MyCollection,
        colModel: [{ title: 'ID', name: 'id', sorttype: 'number' },
                   { title: 'Full Name', name: 'name' },
                   { title: 'Company', name: 'company' },
                   { title: 'Email', name: 'email' } ]
    });

Options

Property Type Description Default
autofetch boolean If set to true fetch method will be called on collection after grid initialization completed. false
buttons array of objects Sets buttons bottom-left in navigation bar. this context in onClick function will be an alias to collection. When initialization of grid completed each button can access from myGrid.buttons (array of jQuery objects).
Example:
buttons: [{
    'id': 'myBtnID',
    'title': 'Add new row',
    onClick: function(event){ /* any code here */ }
}]
 none
caption string Defines the caption for the grid. Caption tag appears in the table tag, which is above the thead tag. empty string
collection Backbone.Collection It's all yours. Grid only stores alias and keep an eye on events(add, remove, change, reset) none
colModel array An array that describes the model of the columns.
name: The attribute name of model in collection.
title: Caption of column in header.
sorttype: Can be number or string(others later).
actions: function must return html, that pastes into each cell of row in that column (Click events disabled onto that cell).		 none
container jQuery object This must be jQuery object, that will contain grid. none
enableSearch boolean If this flag is set to true search bar will be displayed. false
multiselect boolean If this flag is set to true a multi selection of rows is enabled. A new column at left side containing checkboxes is added. false
rows number Sets how many records we want to view in the grid. If rows is undefined all of records will be in one page and no rowPager displayed. none
rowList number An array to construct a select box element in the pager in which we can change the number of the visible rows. none
selectedRows array Gives the currently selected rows is set to true. This is a one-dimensional array and the values in the array correspond to the selected id's in the grid. empty array
subgrid boolean If set to true this enables using a sub-grid. If the subgrid option is enabled, an additional column at left side is added to the basic grid. This column contains a 'plus' image which indicates that the user can click on it to expand the row. false
subgridAccordion boolean This option allows you to open/close subgrid like jQuery UI Accordion plugin(not animated). false

Events

That example specifies the action to take when a grid complete. The events that you can use to perform some additional action are below in table:

Example code:

new bbGrid.View({
...
   onReady: function(){       
      // whatever you need
   },
...
});
Event Parameters Description
onBeforeRender none This fires before thead and rows will be rendered.
onReady none This fires after all the data is loaded into the grid and all other processes are complete.
onRowClick model Raised immediately after row was clicked.
onRowDblClick model Raised immediately after row was double clicked.
onRowExpanded container,model.id This event is raised when the subgrid is enabled and is executed when the user clicks on the plus icon of the grid. Can be used to put custom data in the subgrid. Parameter container represents table td wrapped in jQuery object.
onRowCollapsed container,model.id Has the opposite effect of the above-described event, triggers when the user clicks on the minus icon of the grid. Subgrid row removes from DOM-tree.

Examples

Clear grid

Example code:

App.ClearExampleGrid = new bbGrid.View({
    container: $('#bbGrid-clear'),
    collection: App.clearGridCollection,
    colModel: [{ title: 'ID', name: 'id' },
               { title: 'Full Name', name: 'name'},
               { title: 'Company', name: 'company'},
               { title: 'Email', name: 'email' }]
});

Buttons

Example code:

App.ButtonsExampleGrid = new bbGrid.View({
    ...
    buttons: [{
            title: 'Show selected',
            onClick: function(){
                var models = this.view.getSelectedModels();
                if( !_.isEmpty(models)) {
                    alert(_.first(models).get('name'));
                } else {
                    alert('Nothing');
                }
            }
    }]
});

Example code:

App.SearchExampleGrid = new bbGrid.View({        
    ...
    enableSearch: true,
    ...
});

Filters

Example code:

App.FiltersExampleGrid = new bbGrid.View({
    ...
    colModel: [{ title: 'ID', name: 'id', index: true, sorttype: 'number' },
               { title: 'Full Name', index: true, name: 'name', filter: true, filterType: 'input'},
               { title: 'Company', index: true, name: 'company', filter: true },
               { title: 'Email', index: true, name: 'email' }],
    ...
});

Sub-grid

Example code:

App.SubgridExapmleGrid = new bbGrid.View({
    ...
    subgrid: true,
    subgridAccordion: true,    
    onRowExpanded: function($el, rowid) {
        var subgrid = new bbGrid.View({
            container: $el,
            collection: subgridCollection,
            ...
        });
    }
});