Rendering tables with Backgrid.js

There are several different table View libraries available specifically for rendering tables in Backbone, and there are also many popular non-Backbone specific libraries (such as jqGrid or DataTables) that you can easily adapt for use in Backbone. However, BackGrid (http://backgridjs.com/) stands out from the rest because it combines a powerful feature set, simple design, and support for Backbone Paginator out of the box.

Here's an example of a table generated using BackGrid:

Rendering tables with Backgrid.js

To use BackGrid, you simply extend it, just as you would with any other View and then, instantiate it with one extra columns option:

var BookResultsGrid =  Backgrid.Grid.extend();
var grid = new BookResultsGrid({
    columns: [
        {name: 'bookTitle', label: 'title', cell: 'string'},
        {name: 'numPages', label: '# of Pages', cell: 'integer'},
        {name: 'authorName', label: 'Name of the Author',
         cell: 'string'}
    ],
    collection: bookResults
});
grid.render();

As you can see the extra columns option that you provide tells BackGrid which attribute of Model to use for the column's data (name), what this column's header text should be (label), and how BackGrid should format cells in this column (cell). Once you provide BackGrid with these columns and a Collection class, BackGrid will generate a <table> element as its el by using each Model in the provided Collection to generate a <tr> element.

If you only want a table that displays information that's all you need to do, but BackGrid can also be optionally used to edit information. To use this feature, you just need to pass one other editable: true option in each column that you want to make editable. When BackGrid renders its table, users will be able to click on any cells in the editable columns to switch the selected cell into the edit mode (for instance, replacing plain text with an HTML <input> tag), and any changes that the user makes will be automatically updated in the appropriate Model.

BackGrid has many other features as well, such as the ability to define your own custom cell types by extending Backgrid.Cell. You can find the full list of these features on Backgrid's website, which has excellent tutorial-style documentation and API reference documentation.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.142.252.199