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:
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.
3.137.172.115