/index.html
HTML | 1884 lines | 1766 code | 103 blank | 15 comment | 0 complexity | 6a8929c0a7a3a7a7f99376fd16f961c2 MD5 | raw file
Possible License(s): MIT
- <!doctype html>
- <!--
- backgrid
- http://github.com/wyuenho/backgrid
- Copyright (c) 2013 Jimmy Yuen Ho Wong and contributors
- Licensed under the MIT @license.
- -->
- <html lang="en">
- <head>
- <meta charset="utf-8" />
- <meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />
- <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
- <meta name="keywords" content="backgrid,backgrid.js,backbone,backbone.js,datagrid,grid,paginator,javascript" />
- <meta name="description" content="A powerful widget set for building data grids with Backbone.js" />
- <title>Backgrid.js - A powerful widget set for building data grids with Backbone.js</title>
- <link rel="canonical" href="http://backgridjs.com" />
- <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.2/css/bootstrap.min.css" />
- <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.2/css/bootstrap-responsive.min.css" />
- <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/3.3.2/select2.min.css" />
- <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/codemirror.min.css" />
- <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/ambiance.min.css" />
- <link rel="stylesheet" href="lib/backgrid.min.css" />
- <link rel="stylesheet" href="lib/extensions/paginator/backgrid-paginator.min.css" />
- <link rel="stylesheet" href="lib/extensions/text-cell/backgrid-text-cell.min.css" />
- <link rel="stylesheet" href="lib/extensions/moment-cell/backgrid-moment-cell.min.css" />
- <link rel="stylesheet" href="lib/extensions/select2-cell/backgrid-select2-cell.min.css" />
- <link rel="stylesheet" href="lib/extensions/select-all/backgrid-select-all.min.css" />
- <link rel="stylesheet" href="lib/extensions/filter/backgrid-filter.min.css" />
- <link rel="stylesheet" href="assets/css/doc.css" />
- <!--[if lt IE 9]>
- <script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
- <![endif]-->
- </head>
- <body>
- <div id="main">
- <header>
- <div class="navbar navbar-fixed-top">
- <div class="navbar-inner">
- <div class="container">
- <a href="."
- class="brand" title="A powerful widget set for building data grids with Backbone.js">Backgrid.js</a>
- <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- </a>
- <div class="nav-collapse collapse">
- <ul class="nav nav-pills">
- <li class="dropdown">
- <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">
- Introduction
- <b class="caret"></b>
- </a>
- <ul class="dropdown-menu">
- <li><a href="#features">Features</a></li>
- <li><a href="#getting-started">Getting Started</a></li>
- <li><a href="#examples">Examples</a></li>
- </ul>
- </li>
- <li class="dropdown">
- <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">
- API Reference
- <b class="caret"></b>
- </a>
- <ul class="dropdown-menu">
- <li><a href="#api-grid">Grid</a></li>
- <li><a href="#api-column">Column</a></li>
- <li><a href="#api-cell">Cell</a></li>
- <li><a href="#api-formatter">Formatter</a></li>
- <li><a href="#api-header">Header</a></li>
- <li><a href="#api-row">Row</a></li>
- <li><a href="#api-body">Body</a></li>
- <li><a href="#api-footer">Footer</a></li>
- <li class="divider"></li>
- <li><a href="#extensions"><strong class="muted">Extensions</strong></a></li>
- <li class="divider"></li>
- <li><a href="#api-select-all">SelectAll</a></li>
- <li><a href="#api-paginator">Paginator</a></li>
- <li><a href="#api-filter">Filter</a></li>
- <li><a href="#api-text-cell">TextCell</a></li>
- <li><a href="#api-moment-cell">MomentCell</a></li>
- <li><a href="#api-select2-cell">Select2Cell</a></li>
- </ul>
- </li>
- <li class="dropdown">
- <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">
- More Info
- <b class="caret"></b>
- </a>
- <ul class="dropdown-menu">
- <li><a href="#styling">Styling</a></li>
- <li class="divider"></li>
- <li><a href="#faq">FAQ</a></li>
- <li><a href="https://github.com/wyuenho/backgrid/blob/master/CHANGELOG.md" target="_blank">Change Log</a></li>
- <li><a href="#license">License</a></li>
- </ul>
- </li>
- <li id="social-media">
- <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://backgridjs.com" data-counturl="wyuenho.github.com/backgrid" data-via="wong_jim" data-hashtags="backgridjs,backbone_js">Tweet</a>
- <div class="g-plusone" data-size="medium"></div>
- <iframe src="http://ghbtns.com/github-btn.html?user=wyuenho&repo=backgrid&type=watch&count=true"
- allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
- <a href="https://coderwall.com/wyuenho"><img alt="Endorse wyuenho on Coderwall" src="http://api.coderwall.com/wyuenho/endorsecount.png" /></a>
- <iframe allowtransparency="true" frameborder="0" scrolling="no"
- style="border: 0; margin: 0 0 0 15px; padding: 0;"
- src="https://www.gittip.com/wyuenho/widget.html" width="48pt" height="22pt"></iframe>
- </li>
- </ul>
- </div>
- </div>
- <a class="visible-desktop" href="https://github.com/wyuenho/backgrid">
- <img style="position: absolute; top: 0; right: 0; border: 0;" src="assets/img/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub">
- </a>
- </div>
- </div>
- </header>
- <div class="container">
- <section class="hero-unit">
- <h1>Backgrid.js</h1>
- <p class="lead">
- Backgrid.js is a set of components for
- building <strong>semantic</strong> and <strong>easily
- stylable</strong> <strong>data grid</strong> widgets.</p>
- <p class="lead">It offers a simple, intuitive
- programming interface that makes easy things easy, but <em>hard things possible</em>
- when dealing with tabular data.</p>
- <p>
- <div class="btn-group">
- <a class="btn btn-large btn-success" href="#examples">See Examples</a>
- <a class="btn btn-large btn-primary hidden-phone hidden-tablet"
- href="https://github.com/wyuenho/backgrid/tags">Download v0.2.6</a>
- <a class="btn btn-large btn-info"
- href="https://github.com/wyuenho/backgrid/blob/0.2.6/CHANGELOG.md">What's new?</a>
- </div>
- </p>
- </section>
- <div id="features">
- <div class="page-header">
- <h1>Features</h1>
- <p>The goal of Backgrid.js is to produce a set of core Backbone UI
- elements that offer you all the basic displaying, sorting and
- editing functionalities you'd expect, and to create an
- elegant API that makes extending Backgrid.js with extra
- functionalities easy.</p>
- </div>
- <div class="row-fluid">
- <div class="span6">
- <h2>Advantages</h2>
- <ul>
- <li>No Hungarian notations.</li>
- <li>Solid foundation. Based
- on <a href="http://backbonejs.org">Backbone.js</a>.</li>
- <li>Semantic and <a href="#styling">easily stylable</a>. Just
- style with plain CSS like you would a normal HTML table.</li>
- <li>Low learning curve. Works with plain old Backbone models and
- collections. Easy things are easy, hards things possible.</li>
- <li>Highly modular and customizable. Componenets are just simple
- Backbone View classes, customization is easy if you already
- know Backbone.</li>
- <li>Lightweight. Extra features are separated
- into <a href="#extensions">extensions</a>, which keeps the
- bloat away.</li>
- <li>Good documentation.</li>
- <li>Well tested. Comes with <a href="test/" title="Jasmine Tests">100s of test cases</a>.</li>
- </ul>
- </div>
- <div class="span6">
- <h2>Supported browsers: <b style="font-size: 14px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: normal;">[1]</b></h2>
- <ul>
- <li>Internet Explorer 8+</li>
- <li>Chrome 4+</li>
- <li>Safari 4+</li>
- <li>Firefox 4+</li>
- <li>Opera 9+</li>
- </ul>
- <aside class="note">
- <h3>Notes:</h3>
- <div>1. Both the desktop and mobile versions of the above browsers are supported.</div>
- </aside>
- </div>
- </div>
- </div>
- <section id="getting-started">
- <div class="page-header">
- <h1>Getting Started</h1>
- </div>
- <div class="row-fluid">
- <div class="span6">
- <p>
- Backgrid.js depends on 3 libraries to function:
- </p>
- <ul>
- <li><a href="http://jquery.com">jquery >= 1.7.0</a></li>
- <li><a href="http://underscorejs.org">underscore.js ~ 1.4.0</a></li>
- <li><a href="http://backbonejs.org">backbone.js >= 0.9.10</a></li>
- </ul>
- <aside class="note">
- <h5>Note:</h5> If you don't care about having the latest
- versions of the dependencies, you can use the bundled libraries
- in the download package.
- </aside>
- </div>
- <div class="span6">
- <p>
- Something like the following will get
- the <strong>Backgrid.js</strong> core loaded:
- </p>
- <textarea class="code-snippet" data-mode="htmlmixed">
- <link rel="stylesheet" href="lib/backgrid.css" />
- <script src="assets/js/jquery.js"></script>
- <script src="assets/js/underscore.js"></script>
- <script src="assets/js/backbone.js"></script>
- <script src="lib/backgrid.js"></script></textarea>
- <p>Adjust the paths as needed.</p>
- </div>
- </div>
- </section>
- <section id="examples">
- <div class="page-header">
- <h1>Examples</h1>
- </div>
- <div class="row-fluid">
- <div class="span12">
- <div class="row-fluid">
- <div class="span6">
- <h2>Collection and Model</h2>
- <p>Before you can display any tabular data in a grid, you must
- first obtain the data.</p>
- <p>At the most basic level, Backgrid pretends that every row
- is a model object and the whole table is backed by a simple
- Backbone collection.</p>
- <p>Suppose we have a list of territory info objects:</p>
- </div>
- <div class="span6">
- <textarea class="code-snippet" data-mode="javascript" data-eval="yes">
- var Territory = Backbone.Model.extend({});
- var Territories = Backbone.Collection.extend({
- model: Territory,
- url: "examples/territories.json"
- });
- var territories = new Territories();</textarea>
- </div>
- </div>
- <div class="row-fluid">
- <div class="span12">
- <h2 id="example-1">Grid</h2>
- <p>
- The main entry point of the Backgrid package is the
- Backgrid.Grid class. You can create a default Backgrid by
- first defining some columns, and then put that list of
- columns and the collection of data into the Grid constructor
- like this:
- </p>
- <textarea class="code-snippet" data-mode="javascript" data-eval="yes">
- var columns = [{
- name: "id", // The key of the model attribute
- label: "ID", // The name to display in the header
- editable: false, // By default every cell in a column is editable, but *ID* shouldn't be
- // Defines a cell type, and ID is displayed as an integer without the ',' separating 1000s.
- cell: Backgrid.IntegerCell.extend({
- orderSeparator: ''
- })
- }, {
- name: "name",
- label: "Name",
- // The cell type can be a reference of a Backgrid.Cell subclass, any Backgrid.Cell subclass instances like *id* above, or a string
- cell: "string" // This is converted to "StringCell" and a corresponding class in the Backgrid package namespace is looked up
- }, {
- name: "pop",
- label: "Population",
- cell: "integer" // An integer cell is a number cell that displays humanized integers
- }, {
- name: "percentage",
- label: "% of World Population",
- cell: "number" // A cell type for floating point value, defaults to have a precision 2 decimal numbers
- }, {
- name: "date",
- label: "Date",
- cell: "date",
- }, {
- name: "url",
- label: "URL",
- cell: "uri" // Renders the value in an HTML anchor element
- }];
- // Initialize a new Grid instance
- var grid = new Backgrid.Grid({
- columns: columns,
- collection: territories
- });
- // Render the grid and attach the root to your HTML document
- $("#example-1-result").append(grid.render().$el);
- // Fetch some countries from the url
- territories.fetch({reset: true});</textarea>
- </div>
- </div>
- <div class="row-fluid">
- <div class="span12">
- <h3>Result</h3>
- <div id="example-1-result" class="backgrid-container"></div>
- <aside class="note">See <a href="http://en.wikipedia.org/wiki/List_of_countries_by_population">Wikipedia</a></aside>
- <br />
- <p>The list of column definitions Backgrid.Grid expects is
- simply a list of JSON objects, which you can hardcode into
- your HTML templates or retrieve from a server when the DOM
- is ready. Backgrid.js doesn't care where the column
- definitions come from, as long as you supply the list to the
- Grid constructor.</p>
- <p>As expected, you now have a basic editable data grid
- displayed. All the columns headers are labeled and sortable by
- default. ID cells are not editable, and all other cell types
- have reasonable validation built in. If the table gets too
- large, you get a scroll bar.</p>
- <p>Backgrid.js comes with <a href="#api-cell" title="Cells">10
- basic cell types</a> in the core
- and <a href="#api-text-cell" title="TextCell">many others
- as extensions</a>. Cell types such as
- <a href="#api-select2-cell"
- title="Select2Cell">Select2Cell</a>
- and <a href="#api-moment-cell"
- title="MomentCell">MomentCell</a> give you a much richer
- editing interface for option lists and datetime values on
- desktop browsers. In addition, there's a wide range
- of possibilities with how the data is converted for
- display and persistence by using <a href="#api-formatter"
- title="Formatter">formatters</a> or
- customizing <a href="#api-cell">cell classes</a>.</p>
- </div>
- </div>
- <div class="row-fluid">
- <div class="span12">
- <h2 id="example-2">A More Complete Example</h2>
- <p>If you have a large result set like the above, you'd
- probably want to be able to paginate and filter your
- results. This is easily achieved in Backgrid.js.</p>
- <p>Backgrid.js comes with a number of filters and a paginator
- extension which you can load by including the following into
- your <code>head</code> tag:</p>
- <textarea class="code-snippet" data-mode="htmlmixed">
- <link rel="stylesheet" href="lib/extensions/filter/backgrid-filter.css" />
- <link rel="stylesheet" href="lib/extensions/paginator/backgrid-paginator.css" />
- <script src="assets/js/backbone-pageable.js"></script>
- <script src="lib/extensions/filter/backgrid-filter.js"></script>
- <script src="lib/extensions/paginator/backgrid-paginator.js"></script></textarea>
- <p>To use the paginator, you must first declare your
- collections to be
- a <a href="https://github.com/wyuenho/backbone-pageable/"
- title="Backbone.PageableCollection">Backbone.PageableCollection</a>,
- which is a simple subclass of the Backbone.js Collection with added
- pagination behavior.</p>
- <textarea class="code-snippet" data-mode="javascript" data-eval="yes">
- var PageableTerritories = Backbone.PageableCollection.extend({
- model: Territory,
- url: "examples/pageable-territories.json",
- state: {
- pageSize: 15
- },
- mode: "client" // page entirely on the client side
- });
- var pageableTerritories = new PageableTerritories();
- // Set up a grid to use the pageable collection
- var pageableGrid = new Backgrid.Grid({
- columns: columns,
- collection: pageableTerritories
- });
- // Render the grid
- var $example2 = $("#example-2-result");
- $example2.append(pageableGrid.render().$el)
- // Initialize the paginator
- var paginator = new Backgrid.Extension.Paginator({
- collection: pageableTerritories
- });
- // Render the paginator
- $example2.append(paginator.render().$el);
- // Initialize a client-side filter to filter on the client
- // mode pageable collection's cache.
- var filter = new Backgrid.Extension.ClientSideFilter({
- collection: pageableTerritories.fullCollection,
- fields: ['name']
- });
- // Render the filter
- $example2.prepend(filter.render().$el);
- // Add some space to the filter and move it to the right
- filter.$el.css({float: "right", margin: "20px"});
- // Fetch some data
- pageableTerritories.fetch({reset: true});</textarea>
- </div>
- </div>
- <div class="row-fluid">
- <div class="span12">
- <h3>Result</h3>
- <div id="example-2-result" class="backgrid-container"></div>
- </div>
- </div>
- </div>
- </div>
- </section>
- <section>
- <div class="page-header">
- <h1>API Reference</h1>
- </div>
- <div class="row-fluid">
- <div class="span2">
- <h2 id="api-grid">Grid</h2>
- <ul class="nav">
- <li><a href="api/index.html#!/api/Backgrid.Grid">Backgrid.Grid</a></li>
- </ul>
- <h3>Events</h3>
- <ul class="nav">
- <li><a href="api/index.html#!/api/Backgrid.Grid-method-render">backgrid:rendered</a></li>
- </ul>
- </div>
- <div class="span10">
- <h3>How to Use the Grid</h3>
- <p>As described in the <a href="#examples">examples</a> above, a
- basic grid needs only a collection and a list of column
- definitions.</p>
- <h3>Manipulating Columns and Rows</h3>
- <p>It is very easy to insert or remove a row in a grid, you just
- have to pass a model reference
- to <a href="api/index.html#!/api/Backgrid.Grid-method-insertRow">Grid#insertRow</a>
- or <a href="api/index.html#!/api/Backgrid.Grid-method-removeRow">Grid#removeRow</a>.</p>
- <textarea class="code-snippet" data-mode="javascript">
- // Inserting rows
- grid.insertRow([{
- // model 1
- }, {
- // model 2 ... etc
- }]);
- // Remove rows
- var musketeers = grid.collection.where({ job: "Musketeer" });
- grid.removeRow(musketeers);</textarea>
- <p>Inserting and remove columns is similarly easy. You just need
- to pass some definitions
- to <a href="api/index.html#!/api/Backgrid.Grid-method-insertColumn">Grid#insertColumn</a>
- or
- <a href="api/index.html#!/api/Backgrid.Grid-method-removeColumn">Grid#removeColumn</a>.</p>
- <textarea class="code-snippet" data-mode="javascript">
- // Insert a few new columns. Make sure your model has these attributes though.
- grid.insertColumn([{
- name: "selected",
- label: "",
- cell: "boolean",
- sortable: false,
- headerCell: MySelectAllCell
- }, {
- name: "address",
- label: "Address",
- cell: "string"
- }]);
- // Remove a column
- var genderCol = grid.columns.where({ name: "gender" });
- grid.removeColumn(genderCol);</textarea>
- <h3>Customization</h3>
- <p>The various ways of customizing a grid are described in the
- following sections.</p>
- </div>
- </div>
- <div class="row-fluid">
- <div class="span2">
- <h2 id="api-column">Columns</h2>
- <ul class="nav">
- <li><a href="api/index.html#!/api/Backgrid.Column" title="Backgrid.Column">Backgrid.Column</a></li>
- <li><a href="api/index.html#!/api/Backgrid.Columns" title="Backgrid.Columns">Backgrid.Columns</a></li>
- </ul>
- </div>
- <div class="span10">
- <h3>Column Defaults</h3>
- <p>Column defaults and required parameters are defined in
- the <a href="api/index.html#!/api/Backgrid.Column-method-initialize">Backgrid.Column#initialize</a>
- method.</p>
- <h3>Column Definition</h3>
- <p>A Column is a placeholder for a column definition.</p>
- <p>You usually don't need to create an instance of this class
- yourself, as a collection of column instances will be created for
- you from a list of column object literals you provide to the
- Backgrid.js view class constructors.</p>
- <p>Internally, columns are stored as a collection in the form of
- Backgrid.Columns. In addition, all parent views will convert the
- column definition into
- a <a href="api/index.html#!/api/Backgrid.Columns">Backgrid.Columns</a>
- collection and pass a reference to any subviews that require
- it.</p>
- <h3>Listening to Column Attribute Changes</h3>
- <p>Occasionally, you may want to listen to column attribute change
- events. In that case, you can choose to initialize a
- Backgrid.Columns collection and listen to events from the
- individual models.</p>
- <textarea class="code-snippet" data-mode="javascript" data-eval="no">
- var myColumns = new Backgrid.Columns({
- name: "id", label: "ID", cell: "string"
- }, {
- // ...
- });
- myColumns.on("change:renderable", function (col, colAttr) {
- if (!colAttr) {
- // hide the column
- }
- });</textarea>
- </div>
- </div>
- <div class="row-fluid">
- <div class="span2">
- <h2 id="api-cell">Cell</h2>
- <ul class="nav">
- <li><a href="api/index.html#!/api/Backgrid.Cell">Backgrid.Cell</a></li>
- <li><a href="api/index.html#!/api/Backgrid.DatetimeCell">Backgrid.DatetimeCell</a></li>
- <li><a href="api/index.html#!/api/Backgrid.DateCell">Backgrid.DateCell</a></li>
- <li><a href="api/index.html#!/api/Backgrid.TimeCell">Backgrid.TimeCell</a></li>
- <li><a href="api/index.html#!/api/Backgrid.NumberCell">Backgrid.NumberCell</a></li>
- <li><a href="api/index.html#!/api/Backgrid.IntegerCell">Backgrid.IntegerCell</a></li>
- <li><a href="api/index.html#!/api/Backgrid.StringCell">Backgrid.StringCell</a></li>
- <li><a href="api/index.html#!/api/Backgrid.UriCell">Backgrid.UriCell</a></li>
- <li><a href="api/index.html#!/api/Backgrid.EmailCell">Backgrid.EmailCell</a></li>
- <li><a href="api/index.html#!/api/Backgrid.BooleanCell">Backgrid.BooleanCell</a></li>
- <li><a href="api/index.html#!/api/Backgrid.SelectCell">Backgrid.SelectCell</a></li>
- <li><a href="api/index.html#!/api/Backgrid.CellEditor">Backgrid.CellEditor</a></li>
- <li><a href="api/index.html#!/api/Backgrid.InputCellEditor">Backgrid.InputCellEditor</a></li>
- <li><a href="api/index.html#!/api/Backgrid.SelectCellEditor">Backgrid.SelectCellEditor</a></li>
- </ul>
- <h3>Events</h3>
- <ul class="nav">
- <li><a href="api/index.html#!/api/Backgrid.Cell-method-enterEditMode">backgrid:edit</a></li>
- <li><a href="api/index.html#!/api/Backgrid.Cell-method-enterEditMode">backgrid:editing</a></li>
- <li><a href="api/index.html#!/api/Backgrid.InputCellEditor-method-saveOrCancel">backgrid:edited</a></li>
- <li><a href="api/index.html#!/api/Backgrid.InputCellEditor-method-saveOrCancel">backgrid:error</a></li>
- </ul>
- </div>
- <div class="span10">
- <h3>Demo</h3>
- <p class="label label-success">Try them</p>
- <div id="cell-demo-grid-1" class="backgrid-container" style="height: auto"></div>
- <div id="cell-demo-grid-2" class="backgrid-container" style="height: auto"></div>
- <aside class="note">
- <h5>Note:</h5>
- <p>Backgrid.js and its author are not associated with Santa and
- santaclaus.com in any way.</p>
- </aside>
- <h3>Configuring Cells</h3>
- <p>While many built-in cells provide reasonable defaults, you may
- choose to configure them to suit your own needs.</p>
- <p>Cell types that you are most likely to configure are the
- NumberCell, DatetimeCell and SelectCell classes. Once
- configured, you may use them as the cell attribute values in
- column definitions.</p>
- <textarea class="code-snippet" data-mode="javascript" data-eval="no">
- var grid = new Backgrid.Grid({
- columns: [{
- name: "id",
- label: "ID",
- editable: false,
- // Dynamically defines a new cell type with new defaults.
- // ID is displayed as an integer without ','s.
- cell: Backgrid.IntegerCell.extend({
- orderSeparator: ''
- })
- }, {
- name: "lastaccessed",
- label: "Last Login Time",
- editable: false,
- cell: Backgrid.DatetimeCell.extend({
- includeMilli: true
- })
- }, {
- name: "gender",
- label: "Gender",
- cell: Backgrid.SelectCell.extend({
- // It's possible to render an option group or use a
- // function to provide option values too.
- optionValues: [["Male", "m"], ["Female", "f"]]
- })
- }],
- collection: col
- });
- </textarea>
- <p class="label label-info">Pro Tip</p>
- <p>SelectCell treats all option values as strings by default, if
- you need to persist a different type of values into your model,
- you should extend SelectCell to provide your
- own <a href="#api-formatter"
- title="Formatter">formatter</a>.</p>
- <p>See the <a href="api/index.html" title="API Doc">JSDoc</a> for
- the various Cell classes for details on what you can configure
- using this method.</p>
- <h3>Custom Cell</h3>
- <p>If the built-in and extension cell classes are not enough for
- you, you may choose to create your own cell class and supply it
- to a column definition.</p>
- <p>If your custom cell will still use a
- <code><input type="text" /></code> like the predefined
- ones for editing, you may choose to
- subclass <a href="api/index.html#!/api/Backgrid.Cell">Cell</a>
- or one of the predefined classes and simply define a className
- and a <a href="#api-formatter"
- title="Formatter">formatter</a>. In fact, most of the core cell
- classes are done this way.</p>
- <textarea class="code-snippet" data-mode="javascript" data-eval="no">
- // This is how StringCell is defined.
- Backgrid.StringCell = Cell.extend({
- // Cell default class names are the lower-cased and dasherized
- // form of the the cell class names by convention.
- className: "string-cell"
- formatter: Backgrid.StringFormatter
- });</textarea>
- <p>If your cell class will render differently in display mode, you
- may simply
- override <a href="api/index.html#!/api/Backgrid.Cell-method-render">Cell#render()</a>
- in your subclass.</p>
- <h3>Custom CellEditor</h3>
- <p class="label label-warning">Advanced Usage</p>
- <p>Some cell types, like the
- <a href="#api-text-cell" title="TextCell">TextCell</a>
- extension, may only make sense if the editor is rendered in a
- modal dialog or a form element in a different part of the
- page. In that case the
- default <a href="api/index.html#!/api/Backgrid.InputCellEditor"
- title="InputCellEditor">InputCellEditor</a>, which renders a
- <code><input type="text" /></code>, will not be suitable
- and a new <a href="api/index.html#!/api/Backgrid.CellEditor"
- title="CellEditor">CellEditor</a> must be defined.</p>
- <p>A custom cell editor should subclass <a
- href="api/index.html#!/api/Backgrid.CellEditor">CellEditor</a>
- as it defines a number of required parameters in its initializer
- and clean up operations that are necessary for most cell
- editors. When a cell class enters edit mode, a new editor
- instance is constructed by given it the required parameters, and
- then a Backbone event <code>backgrid:edit</code> is fired from
- the cell instance itself. A custom cell class can act on this
- event to do anything before the cell editor is rendered.</p>
- <p>Once the cell has entered edit mode, a Backbone event
- <code>backgrid:editing</code> is fired. A custom cell class can
- then act on it to do anything after the cell editor has been
- rendered, e.g. placing the focus inside the editor.</p>
- <p>During editing, if an error is encountered (see the <a
- href="#api-formatter">formatter protocol</a> below), a cell
- editor should fire a Backbone event <code>backgrid:error</code>
- so that listeners—usually a cell instance—can
- respond appropriately. When editing is done, a cell editor
- should fire a Backbone <code>backgrid:done</code> event. A cell
- should be listening to this event so it can remove its editor
- and re-render itsef in display mode.</p>
- <p class="label label-important">Truely Advanced Hacking</p>
- <p>At the most basic level, Cells and CellEditors are simply
- <a href="http://backbonejs.org/#View"
- title="Backbone.View">Backbone.View</a> classes that are
- guaranteed to be given a number of parameters when constructed
- by <a href="api/index.html#!/api/Backgrid.Row"
- title="Row">Row</a>. You can use any Backbone.View as your Cell
- and CellEditor.</p>
- </div>
- </div>
- <div class="row-fluid">
- <div class="span2">
- <h2 id="api-formatter">Formatter</h2>
- <ul class="nav">
- <li><a href="api/index.html#!/api/Backgrid.CellFormatter">Backgrid.CellFormatter</a></li>
- <li><a href="api/index.html#!/api/Backgrid.DatetimeFormatter">Backgrid.DatetimeFormatter</a></li>
- <li><a href="api/index.html#!/api/Backgrid.NumberFormatter">Backgrid.NumberFormatter</a></li>
- </ul>
- </div>
- <div class="span10">
- <h3>Custom Formatters</h3>
- <p>In Backgrid.js, cell formatters serves the purpose of converting values
- between JSON value types and strings, and validation. Writing
- formatters for value conversion and validation is easy as you only
- have to conform to a very simple protocol.</p>
- <p>Any formatters must have the following two methods defined:</p>
- <textarea class="code-snippet" data-mode="javascript" data-eval="no">
- var formatter = {
- // function (*): string
- fromRaw: function (rawData) { },
- // function (string): *|undefined
- toRaw: function (formattedData) { }
- };</textarea>
- <p><code>fromRaw()</code> is called by Backgrid.Cell and its
- subclasses whenever a raw model value needs to be formatted into
- a humanized form for display.</p>
- <p><code>toRaw()</code> is called by Backgrid.CellEditor and its
- subclasses whenever a user input string needs to be converted back
- to a raw JSON value for model persistence.</p>
- <h3>Validation</h3>
- <p>In addition to user input conversion, toRaw() also validates
- the user input during conversion. If the user input is invalid
- or cannot be converted to a JSON value,
- toRaw() <strong>MUST</strong> return <code>undefined</code>
- instead of throwing an Error.</p>
- <p>In addition to using formatters to do simple yes or no
- validations, if your model class has
- a <a href="http://backbonejs.org/#Model-validate"
- title="Backbone.Model#validate">validate()</a> method defined,
- it will also be used for validation after trying with the
- formatter.</p>
- <h3>Using Custom Formatters</h3>
- <p>A custom formatter can be used instead of the cell's default by
- extending the cell:</p>
- <textarea class="code-snippet" data-mode="javascript" data-eval="no">
- var grid = new Backgrid.Grid({
- columns: [{
- name: "url",
- cell: "uri",
- formatter: _.extend({}, Backgrid.CellFormatter.prototype, {
- fromRaw: function (rawValue) {
- return rawValue.replace("http://", '');
- }
- })
- }],
- collection: col
- });</textarea>
- </div>
- </div>
- <div class="row-fluid">
- <div class="span2">
- <h2 id="api-header">Header</h2>
- <ul class="nav">
- <li><a href="api/index.html#!/api/Backgrid.Header">Backgrid.Header</a></li>
- <li><a href="api/index.html#!/api/Backgrid.HeaderRow">Backgrid.HeaderRow</a></li>
- <li><a href="api/index.html#!/api/Backgrid.HeaderCell">Backgrid.HeaderCell</a></li>
- </ul>
- <h3>Events</h3>
- <ul class="nav">
- <li><a href="api/index.html#!/api/Backgrid.HeaderCell-method-sort">backgrid:sort</a></li>
- </ul>
- </div>
- <div class="span10">
- <h3>Understanding the Default Header</h3>
- <p>Backgrid.js comes with a default header section, a header row
- and a header cell implementation that renders a sorter if the
- column is sortable. The text inside the header cells comes from
- the column definitions. If a <em>label</em> is not defined in a
- column definition, its name is used as the label instead.</p>
- <p>The default header cell implementation supports sorting in
- ascending or descending order, using the column's natural
- ordering. The sorter will also allow cycling back to the
- table's default sorting order, which is sorting by the
- model <a href="http://backbonejs.org/#Model-id"
- title="Backbone.Model#id">server IDs</a>
- and <a href="http://backbonejs.org/#Model-cid"
- title="Backbone.Model#cid">client IDs</a>.</p>
- <h3>Customizing the Header</h3>
- <p class="label label-warning">Advanced Usage</p>
- <p>You are allow to use a different header cell class on
- columns. There is no restriction on what a header cell must do. In fact,
- any <a href="http://backbonejs.org/#View"
- title="Backbone.View">Backbone.View</a> class can be
- used. However, if you wish to modify how the sorter behaves, you
- must implement the sorting protocol. See
- the <a href="api/index.html#!/api/Backgrid.HeaderCell"
- title="Backgrid.HeaderCell API">JSDoc</a> for details.</p>
- <textarea class="code-snippet" data-mode="javascript" data-eval="no">
- var SelectAllHeaderCell = Backgrid.HeaderCell.extend({
- // Implement your "select all" logic here
- });
- var grid = new Backgrid.Grid({
- columns: [{
- name: "selected",
- label: "",
- sortable: false,
- cell: "boolean",
- headerCell: SelectAllHeaderCell
- }],
- collection: col
- });</textarea>
- </div>
- </div>
- <div class="row-fluid">
- <div class="span2">
- <h2 id="api-row">Row</h2>
- <ul class="nav">
- <li><a href="api/index.html#!/api/Backgrid.Row">Backgrid.Row</a></li>
- </ul>
- </div>
- <div class="span10">
- <h3>Customizing Row</h3>
- <p class="label label-warning">Advanced Usage</p>
- <p>A row is simply an intermediary view class that constructs the
- appropriate Cell class instances for rendering the model
- columns.</p>
- <p>If you would like to override how a row is rendered, you may
- define your own Row subclass and give it to the Grid constructor
- as an option:</p>
- <textarea class="code-snippet" data-mode="javascript" data-eval="no">
- var ZebraStrippingRow = Backgrid.Row.extend({
- // ...
- });
- var grid = new Backgrid.Grid({
- row: ZebraStrippingRow, // <-- Tell the new Body class to use ZebraStrippingRow to render rows.
- columns: [{
- //...
- }],
- collection: col
- });</textarea>
- </div>
- </div>
- <div class="row-fluid">
- <div class="span2">
- <h2 id="api-body">Body</h2>
- <ul class="nav">
- <li><a href="api/index.html#!/api/Backgrid.Body">Backgrid.Body</a></li>
- </ul>
- <h3>Events</h3>
- <ul class="nav">
- <li><a href="api/index.html#!/api/Backgrid.Body-method-refresh">backgrid:refresh</a></li>
- </ul>
- </div>
- <div class="span10">
- <h3>Customizing Body</h3>
- <p class="label label-important">Truely Advanced Hacking</p>
- <p>Body is the intermediary view that coordinates between the
- various parts of the grid. Specifically, the default
- implementation is responsible for re-rendering the rows when any
- model is inserted into, removed from, or reordered in the
- underlying collection. See
- the <a href="api/index.html#!/api/Backgrid.Body">JSDoc</a> for
- details.</p>
- <textarea class="code-snippet" data-mode="javascript" data-eval="no">
- var MyBody = Backgrid.Body.extend({
- // I really don't know why you would do this, but you can if you want
- });
- var grid = new Backgrid.Grid({
- body: MyBody,
- columns: [{
- // ...
- }],
- collection: col
- });</textarea>
- </div>
- </div>
- <div class="row-fluid">
- <div class="span2">
- <h2 id="api-footer">Footer</h2>
- <ul class="nav">
- <li><a href="api/index.html#!/api/Backgrid.Footer">Backgrid.Footer</a></li>
- </ul>
- </div>
- <div class="span10">
- <h3>Putting Things at The End of a Table</h3>
- <p>The default Footer class is an abstract class that only defines
- a number of required constructor parameters. If you wish to
- append additional information to the end of a table you must
- subclass Footer and supply the class to the Grid
- constructor.</p>
- <textarea class="code-snippet" data-mode="javascript" data-eval="no">
- var CaptionFooter = Backgrid.Footer.extend({
- render: function () {
- this.$el.html("<tr><td colspan='6'>Hello World!</td></tr>");
- return this;
- }
- });
- var grid = new Backgrid.Grid({
- columns: [{
- //...
- }],
- collection: col,
- footer: CaptionFooter // <--
- });</textarea>
- <p>Very often, you'll want to append a paginator to the end
- of your table if there are too many rows. For this, there's already
- a <a href="#api-paginator">paginator extension</a> provided for you.</p>
- </div>
- </div>
- </section>
- <section id="extensions">
- <div class="page-header">
- <h1>Extensions</h1>
- <p>It is not necessary to create an extension project if you simply
- want to customize or extend some Backgrid.js classes for your own
- private use; however, if you have one or more Backgrid.js
- components that add new features to the core, you may consider
- packaging them up to share with the world.</p>
- <p>A Backgrid.js extension is a directory structure that packages
- the necessary JS, CSS, tests, and document files.</p>
- <p>To create an extension, clone the tree into your file system and
- type:</p>
- <textarea class="code-snippet" data-mode="shell">
- $ cd backgrid
- $ make extension</textarea>
- <p>A new extension directory structure should have been created for
- you under <code>src/extensions</code>. The current implementation
- of <code>make extension</code> only creates a blank directory
- filled with a number of blank files for you. You should take a
- look at other extensions to copy what you need. e.g. Makefile,
- .gitignore.</p>
- <h2>Extension Development Guide</h2>
- <p>The following is a guideline for extension development:</p>
- <ul>
- <li>There should be 1 .js file and 1 .css file. If your code base
- gets too large, consider breaking it into multiple extensions.</li>
- <li>There should be 1 .min.js file and 1 .min.css file produced
- for distribution.</li>
- <li>Your Makefile should emulate other extensions as closely
- as possible. Specifically, you should have a <code>dist</code>
- rule that will take a <code>DIST_DIR</code> variable from
- top-level make invocations and copy the output files to the
- destination directory.</li>
- <li>You should use recess to lint your CSS file(s).</li>
- <li>You should follow the JS coding style defined <a
- href="https://github.com/wyuenho/backgrid/blob/gh-pages/CONTRIBUTING.md#coding-style">here</a>.</li>
- <li>Your .gitignore file inside the extension directory should
- ignore all output files.</li>
- <li>You should wrap your JS file in an immediately invoked
- anonymous function that lists out your dependencies in the
- parameter list.</li>
- <li>Your extension should live under
- the <code>Backgrid.Extension</code> module.</li>
- <li>You should clearly specify your dependencies in the README
- file if your extension relies on any libraries other than
- Backgrid.js and its dependencies.</li>
- <li>When in doubt, look at the other extensions for clues in
- organizing your code.</li>
- </ul>
- </div>
- <div class="row-fluid">
- <div class="span3">
- <h2 id="api-select-all">SelectAll</h2>
- <ul class="nav">
- <li><a href="api/index.html#!/api/Backgrid.Extension.SelectRowCell">Backgrid.Extension.SelectRowCell</a></li>
- <li><a href="api/index.html#!/api/Backgrid.Extension.SelectAllHeaderCell">Backgrid.Extension.SelectAllHeaderCell</a></li>
- </ul>
- <h3>Events</h3>
- <ul class="nav">
- <li><a href="api/index.html#!/api/Backgrid.Extension.SelectAllHeaderCell-method-initialize">backgrid:select</a></li>
- <li><a href="api/index.html#!/api/Backgrid.Extension.SelectAllHeaderCell-method-initialize">backgrid:selected</a></li>
- </ul>
- <h4>Best Used On</h4>
- <ul>
- <li>Desktop</li>
- <li>Mobile</li>
- </ul>
- </div>
- <div class="span9">
- <h3>When to Use</h3>
- <p>When you want to select multiple models at a time for batch operations.</p>
- <textarea class="code-snippet" data-mode="htmlmixed">
- <link rel="stylesheet" href="lib/extensions/select-all/backgrid-select-all.css" />
- <script src="lib/extensions/select-all/backgrid-select-all.js"></script></textarea>
- <h3>Usage</h3>
- <p>To enable the SelectAll extension, you simply have to add a new
- column to your column definition like so:</p>
- <textarea class="code-snippet" data-mode="javascript" data-eval="yes">
- var grid = new Backgrid.Grid({
- columns: [{
- // name is a required parameter, but you don't really want one on a select all column
- name: "",
- // Backgrid.Extension.SelectRowCell lets you select individual rows
- cell: "select-row",
- // Backgrid.Extension.SelectAllHeaderCell lets you select all the row on a page
- headerCell: "select-all",
- }].concat(columns),
- collection: new Backbone.Collection([
- {"name": "Afghanistan", "url": "http://en.wikipedia.org/wiki/Afghanistan", "pop": 25500100, "date": "2013-01-01", "percentage": 0.36, "id": 1},
- {"name": "Albania", "url": "http://en.wikipedia.org/wiki/Albania", "pop": 2831741, "date": "2011-10-01", "percentage": 0.04, "id": 2}
- ])
- });
- $("#select-all-example-result").append(grid.render().el);</textarea>
- </div>
- </div>
- <div class="row-fluid">
- <div class="span9 offset3">
- <h3>Result</h3>
- <div id="select-all-example-result" class="backgrid-container" style="height: auto"></div>
- </div>
- </div>
- <div class="row-fluid">
- <div class="span9 offset3">
- <h3>Manipulating Selections Programatically</h3>
- <p>At any point during the lifetime of your program, if you'd like
- to get an array of the currently selected models after you've
- rendered your grid, you can easily do so:</p>
- <textarea class="code-snippet" data-mode="javascript" data-eval="no">
- // This method is only available on Backgrid.Grid after you've
- // include the SelectAll extension.
- var selectedModels = grid.getSelectedModels();
- // To deselect selected models
- _.each(selectedModels, function (model) {
- model.trigger("backgrid:select", model, false);
- });
- // Selecting even numbered rows
- grid.collection.each(function (model, i) {
- if (i % 2 == 0) model.trigger("backgrid:select", model, true);
- });
- </textarea>
- </div>
- </div>
- <div class="row-fluid">
- <div class="span9 offset3">
- <p class="label label-info">Pro Tip</p>
- <p>Each SelectRowCell will trigger a <code>backgrid:select</code>
- event directly from the selected models when its checkbox value
- changes, so if you want to react to those events, you can attach
- your event handlers on the collection.</p>
- <p>See the <a
- href="api/index.html#!/api/Backgrid.Extension.SelectRowCell">API
- documentation</a> for details.</p>
- </div>
- </div>
- <div class="row-fluid">
- <div class="span3">
- <h2 id="api-paginator">Paginator</h2>
- <ul class="nav">
- <li><a href="api/index.html#!/api/Backgrid.Extension.Paginator">Backgrid.Extension.Paginator</a></li>
- </ul>
- <h4>Best Used On</h4>
- <ul>
- <li>Desktop</li>
- <li>Mobile</li>
- </ul>
- </div>
- <div class="span9">
- <h3>When to Use</h3>
- <p>When you have more data than your grid can fit, you can use
- Paginator to break the display of your data into pages.</p>
- <h3>Prerequisites</h3>
- <p>Backgrid.Extension.Paginator needs a Backbone.Collection
- subclass that supports pagination. Luckily, there is already one
- available specially written for this purpose
- - <a href="https://github.com/wyuenho/backbone-pageable"
- title="backbone-pageable">Backbone.PageableCollection</a>.</p>
- <p>Backbone.PageableCollection is a strict superset of the vanilla
- Backbone.Collection with additional pagination and sorting
- functionality. If you like, you can use
- Backbone.PageableCollection throughout your application and it
- will work exactly the same as Backbone.Collection.</p>
- <textarea class="code-snippet" data-mode="htmlmixed">
- <link rel="stylesheet" href="lib/extensions/paginator/backgrid-paginator.css" />
- <script src="assets/js/backbone-pageable.js"></script>
- <script src="lib/extensions/paginator/backgrid-paginator.js"></script></textarea>
- <h3>Backbone.PageableCollection</h3>
- <p>Out of the box, Backbone.PageableCollection works with RESTful
- APIs that accept Ruby's will_paginate pagination query
- parameters but you are able to configure the query string
- mapping anyway you like. The following example works with
- <a href="http://developer.github.com/v3/" title="GitHub API
- v3">Github's API</a>:</p>
- <textarea class="code-snippet" data-mode="javascript" data-eval="yes">
- var Issue = Backbone.Model.extend({});
- // Works exactly like Backbone.Collection.
- var Issues = Backbone.PageableCollection.extend({
- model: Issue,
- // Enable infinite paging
- mode: "infinite",
- url: "https://api.github.com/repos/documentcloud/backbone/issues?state=closed",
- // Initial pagination states
- state: {
- pageSize: 15,
- sortKey: "updated",
- order: 1
- },
- // You can remap the query parameters from `state` keys from
- // the default to those your server supports
- queryParams: {
- totalPages: null,
- totalRecords: null,
- sortKey: "sort",
- order: "direction",
- directions: {
- "-1": "asc",
- "1": "desc"
- }
- }
- });
- var issues = new Issues();</textarea>
- <h3>Configuring Backgrid.Extension.Paginator</h3>
- <p>Backgrid.Extension.Paginator supports a few configuration
- options to adjust to the size of the result set.</p>
- <textarea class="code-snippet" data-mode="javascript" data-eval="yes">
- var issueGrid = new Backgrid.Grid({
- columns: [{
- name: "number",
- cell: Backgrid.IntegerCell.extend({ orderSeparator: '' }),
- editable: false,
- sortable: false
- }, {
- name: "title",
- cell: "string",
- sortable: false
- }, {
- name: "body",
- cell: "text", // See the TextCell extension in the next section
- sortable: false
- }, {
- name: "updated_at",
- cell: "datetime",
- editable: false,
- sortable: false
- }, {
- name: "closed_at",
- cell: "datetime",
- editable: false,
- sortable: false
- }],
- collection: issues
- });
- var $paginatorExample = $("#paginator-example-result");
- $paginatorExample.append(issueGrid.render().el);
- var GithubPaginator = Backgrid.Extension.Paginator.extend({
- // If you anticipate a large number of pages, you can adjust
- // the number of page handles to show. The sliding window
- // will automatically show the next set of page handles when
- // you click next at the end of a window.
- windowSize: 20, // Default is 10
- // If you anticipate a small number of pages, you can choose
- // to disable the rendering of fast forward handles to save
- // space.
- hasFastForward: true, // true is the default
- fastForwardHandleLabels: {
- prev: "<",
- next: ">"
- }
- });
- var paginator = new GithubPaginator({
- collection: issues
- });
- $paginatorExample.append(paginator.render().el);
- issues.getFirstPage();</textarea>
- </div>
- <div class="span12">
- <h3>Result</h3>
- <div id="paginator-example-result" class="backgrid-container" style="height: auto"></div>
- </div>
- </div>
- <div class="row-fluid">
- <div class="span3">
- <h2 id="api-filter">Filter</h2>
- <ul class="nav">
- <li><a href="api/index.html#!/api/Backgrid.Extension.ServerSideFilter">Backgrid.Extension.ServerSideFilter</a></li>
- <li><a href="api/index.html#!/api/Backgrid.Extension.ClientSideFilter">Backgrid.Extension.ClientSideFilter</a></li>
- <li><a href="api/index.html#!/api/Backgrid.Extension.LunrFilter">Backgrid.Extension.LunrFilter</a></li>
- </ul>
- <h4>Best Used On</h4>
- <ul>
- <li>Desktop</li>
- <li>Mobile</li>
- </ul>
- </div>
- <div class="span9">
- <h3>When to Use</h3>
- <p>When you have lots of rows with lots of text, and you just want
- to quickly get to the row that only contain certain keywords.</p>
- <h3>Prerequisites</h3>
- <p>All three Filter classes have an optional dependency
- on <a href="http://twitter.github.com/bootstrap/"
- title="Twitter Bootstrap">Twitter Bootstrap's CSS</a>.
- This dependency is optional because the filter extension only
- uses its CSS for rendering. You are free to override the default
- template and CSS if you don't like it.</p>
- <p>For LunrFilter, it has a hard dependency on <a
- href="http://lunrjs.com/" title="lunr.js">lunr.js</a> for
- full-text searching.</p>
- <textarea class="code-snippet" data-mode="htmlmixed">
- <link rel="stylesheet" href="assets/css/bootstrap.css" />
- <link rel="stylesheet" href="lib/extensions/filter/backgrid-filter.css" />
- <script src="assets/js/lunr.js"></script>
- <script src="lib/extensions/filter/backgrid-filter.js"></script></textarea>
- <h3>Usage</h3>
- <textarea class="code-snippet" data-mode="javascript" data-eval="yes">
- // ServerSideFilter delegates the searching to the server by submitting a query.
- var serverSideFilter = new Backgrid.Extension.ServerSideFilter({
- collection: issues,
- name: "labels", // the name of the URL query parameter
- placeholder: "Search on the server" // HTML5 placeholder for the search box
- });
- $("#filter-example-result").append(serverSideFilter.render().el);
- // ClientSideFilter performs a case-insensitive regular
- // expression search on the client side by OR-ing the keywords in
- // the search box together.
- var clientSideFilter = new Backgrid.Extension.ClientSideFilter({
- collection: pageableTerritories.fullCollection,
- placeholder: "Search in the browser",
- // The model fields to search for matches
- fields: ['name'],
- // How long to wait after typing has stopped before searching can start
- wait: 150
- });
- $("#filter-example-result").append(clientSideFilter.render().el);
- // LunrFilter is a specialized ClientSideFilter that uses
- // lunr.js to perform full-text searching on the client side.
- var lunrFilter = new Backgrid.Extension.LunrFilter({
- collection: pageableTerritories.fullCollection,
- placeholder: "Full-text searching",
- // lunr.js field name and boost value
- fields: {
- name: 10
- },
- // lunr.js document key for indexing
- ref: 'id',
- wait: 150
- });
- $("#filter-example-result").append(lunrFilter.render().el);</textarea>
- <div id="filter-example-result"></div>
- <p class="label label-info">Pro Tip</p>
- <p>The client-side filters won't work unless the collection
- contains all the data for filtering at the time the filters are
- initialized. If you are fetching data after the filters were
- initialized and using Backbone 1.0.0+, you should pass
- <code>{remove: true}</code> or <code>{reset: true}</code> to
- <code>Collection#fetch()</code> due to the change to
- <code>Collection#set()</code>
- after <a href="http://backbonejs.org/#Collection-fetch"
- title="Backbone.Collection#fetch">fetching</a> in Backbone
- 1.0.0+. For this reason, the examples above may or may not work
- due to the asynchronous nature of fetching. To see a working
- example, scroll up to
- <a href="#example-2-result" title="Example 2">example 2</a>.</p>
- </div>
- </div>
- <div class="row-fluid">
- <div class="span3">
- <h2 id="api-text-cell">TextCell</h2>
- <ul class="nav">
- <li><a href="api/index.html#!/api/Backgrid.Extension.TextCell">Backgrid.Extension.TextCell</a></li>
- <li><a href="api/index.html#!/api/Backgrid.Extension.TextareaEditor">Backgrid.Extension.TextareaEditor</a></li>
- </ul>
- <h4>Best Used On</h4>
- <ul>
- <li>Desktop</li>
- <li>Mobile</li>
- </ul>
- </div>
- <div class="span9">
- <h3>When to Use</h3>
- <p>TextCell is a string cell type that renders a form with a text
- area in a modal dialog instead of
- an <code><input type="text" /></code> editor. It
- is best suited for entering a large body of text.</p>
- <h3>Prerequisites</h3>
- <p>TextCell requires <a
- href="http://twitter.github.com/bootstrap/javascript.html#modals"
- title="bootstrap-modal.js">bootstrap-modal.js</a> to render
- it's modal dialog. TextCell is tested against Bootstrap
- version 2.2.2. Bootstrap version 2.3.x is not recommended due to
- a number of critical bugs.</p>
- <textarea class="code-snippet" data-mode="htmlmixed">
- <link rel="stylesheet" href="assets/css/bootstrap.css" />
- <!-- include this if you want to use TextCell on mobile browsers -->
- <link rel="stylesheet" href="assets/css/bootstrap-responsive.css" />
- <link rel="stylesheet" href="lib/extensions/text-cell/backgrid-text-cell.css" />
- <script src="assets/js/bootstrap.js"></script>
- <script src="lib/extensions/text-cell/backgrid-text-cell.js"></script></textarea>
- <textarea class="code-snippet" data-mode="javascript" data-eval="yes">
- var Book = Backbone.Model.extend({});
- var Books = Backbone.Collection.extend({
- model: Book
- });
- var books = new Books([{ description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed nibh tortor, nec mollis diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi venenatis sollicitudin vulputate. Aenean dapibus ultrices odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id molestie erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut nec erat quis massa gravida facilisis. Ut at nisi ac tortor consectetur ullamcorper id nec purus. Fusce condimentum, lacus vitae convallis condimentum, velit orci auctor dui, et mattis dui est sed purus. Praesent pharetra, metus sit amet lacinia adipiscing, purus dolor sodales orci, non malesuada orci orci sit amet dolor. Sed id nisl et neque sollicitudin condimentum eget in nisl." }]);
- var grid = new Backgrid.Grid({
- columns: [{
- name: "description",
- label: "Description",
- // You can use Backgrid.Extension.TextCell.extend() too.
- // See the JSDoc for a list of configurable options.
- cell: "text"
- }],
- collection: books
- });
- $("#text-cell-example-result").append(grid.render().el);
- </textarea>
- <h3>Result</h3>
- <div id="text-cell-example-result" class="backgrid-container" style="height: auto;"></div>
- </div>
- </div>
- <div class="row-fluid">
- <div class="span3">
- <h2 id="api-moment-cell">MomentCell</h2>
- <h4>Best Used On</h4>
- <ul>
- <li>Desktop</li>
- <li>Mobile</li>
- </ul>
- </div>
- <div class="span9">
- <h3>When to Use</h3>
- <p>While the core DatetimeCell is light-weight and does the job of
- formatting IS0-8601 datetime strings fairly well, it may not be
- well suited when the datatime strings are not in ISO
- format.</p>
- <h3>Prerequisites</h3>
- <p>MomentCell uses <a href="http://moment.js/"
- title="Moment.js">Moment.js</a> to render a very powerful
- datetime cell. MomentCell is tested against Moment.js version
- 1.7.2.</p>
- <textarea class="code-snippet" data-mode="htmlmixed">
- <link rel="stylesheet" href="lib/extensions/moment-cell/backgrid-moment-cell.css" />
- <script src="assets/js/moment/moment.js"></script>
- <script src="lib/extensions/moment-cell/backgrid-moment-cell.js"></script>
- <!-- Moment.js language files for i18n. -->
- <!-- Moment.js language files must be included after
- backgrid-moment-cell.js because it changes moment.js' default
- language -->
- <script src="assets/js/moment/lang/zh-tw.min.js"></script></textarea>
- <h3>Usage</h3>
- <p>The default MomentCell acts just like DatetimeCell, so if you
- have a column with datetime values, the default MomentCell is
- almost a drop-in replacement, with the only difference being
- that an offset is always present in the output.</p>
- <p>In addition to the ability to read and write ISO-8601 datetime
- strings. By specifying the model and display formats, MomentCell
- can convert and validated any datetime values moment.js
- understands.
- <p>Like the core cell types, you can configure MomentCell
- simply by extending it.</p>
- <textarea class="code-snippet" data-mode="javascript" data-eval="yes">
- var Datum = Backbone.Model.extend({});
- var Data = Backbone.Collection.extend({
- model: Datum
- });
- var data = new Data([{
- date: "270/3/1",
- time: "12:34:56.789",
- datetime: "1911-10-10T07:00:00"
- }]);
- var grid = new Backgrid.Grid({
- columns: [{
- name: "datetime",
- // You can use a default MomentCell by just writing a name
- cell: "moment"
- }, {
- name: "date",
- cell: Backgrid.Extension.MomentCell.extend({
- modelFormat: "YYYY/M/D",
- // You can specify the locales of the model and display formats too
- displayLang: "zh-tw",
- displayFormat: "YYYY-MMM-DD"
- })
- }, {
- name: "time",
- cell: Backgrid.Extension.MomentCell.extend({
- modelInUTC: true,
- modelFormat: "HH:mm:ss.SSS",
- displayFormat: "H:m:s",
- // By default all the values are presumed to be in UTC,
- // you can convert it to the browser's local time if you
- // want
- displayInUTC: false
- })
- }],
- collection: data
- });
- $("#moment-cell-example-result").append(grid.render().el);</textarea>
- <h3>Result</h3>
- <div id="moment-cell-example-result" class="backgrid-container" style="height: auto;"></div>
- </div>
- </div>
- <div class="row-fluid">
- <div class="span3">
- <h2 id="api-select2-cell">Select2Cell</h2>
- <ul class="nav">
- <li><a href="api/index.html#!/api/Backgrid.Extension.Select2Cell">Backgrid.Extension.Select2Cell</a></li>
- <li><a href="api/index.html#!/api/Backgrid.Extension.Select2CellEditor">Backgrid.Extension.Select2CellEditor</a></li>
- </ul>
- <h4>Best Used On</h4>
- <ul>
- <li>Desktop</li>
- <li>Mobile</li>
- </ul>
- </div>
- <div class="span9">
- <h3>When to Use</h3>
- <p>When you have a relatively large number of available options
- for a column, or want to use a select box with autocomplete
- capability.</p>
- <h3>Prerequisites</h3>
- <p>Select2Cell uses the <a
- href="http://ivaynberg.github.com/select2/"
- title="select2">Select2</a> jQuery plugin to render its select
- box. Select2Cell is tested with Select2 version 3.2.</p>
- <textarea class="code-snippet" data-mode="htmlmixed">
- <link rel="stylesheet" href="assets/css/select2.css" />
- <link rel="stylesheet" href="lib/extensions/select2-cell/backgrid-select2-cell.css" />
- <script src="assets/js/select2.js"></script>
- <script src="lib/extensions/select2-cell/backgrid-select2-cell.js"></script></textarea>
- <h3>Usage</h3>
- <p>Select2Cell is a very simple extension of the default
- SelectCell. You can configure individual instances by supplying
- a <code>select2Options</code> object hash during extension, in
- addition to the options SelectCell supports.</p>
- <textarea class="code-snippet" data-mode="javascript" data-eval="yes">
- var data = new Backbone.Collection([{number: 5, another: 1}]);
- // Just like SelectCell, Select2Cell supports option lists and groups
- var numbers = [{name: 10, values: [
- [1, 1], [2, 2], [3, 3], [4, 4], [5, 5],
- [6, 6], [7, 7], [8, 8], [9, 9], [10, 10]
- ]}];
- var MySelect2Cell = Backgrid.Extension.Select2Cell.extend({
- select2Options: {
- // any options specific to `select2` goes here
- },
- optionValues: numbers
- });
- var grid = new Backgrid.Grid({
- columns: [{
- name: "number",
- cell: MySelect2Cell
- }, {
- name: "another",
- cell: MySelect2Cell
- }],
- collection: data
- });
- $("#select2-cell-example-result").append(grid.render().el);</textarea>
- <h3>Result</h3>
- <div id="select2-cell-example-result" class="backgrid-container" style="height: auto;"></div>
- </div>
- </div>
- </section>
- <section id="styling">
- <div class="page-header">
- <h1>Styling</h1>
- </div>
- <div class="row-fluid">
- <div class="span12">
- <p>Out of the box, Backgrid.js generates simple semantic HTML
- table elements that you can style with pure CSS. This section is
- only going to briefly describe some of the more important
- classes, and things that you should be aware of when
- styling.</p>
- <div class="row-fluid">
- <div class="span6">
- <h2>.backgrid-container</h2>
- <p>This is the class that you should put into any container
- element that will hold the generated table. By default, it
- has a fixed maximum height and 100% width with no borders
- and paddings. It also serves as a <em>positioned</em>
- element so if you need to absolutely position any elements
- inside your custom table element classes, you can position
- them against this container.</p>
- </div>
- <div class="span6">
- <h2> </h2>
- <textarea class="code-snippet" data-mode="css">
- .backgrid-container {
- position: relative;
- display: block;
- width: 100%;
- height: 494px;
- padding: 0;
- overflow: auto;
- border: 0;
- }</textarea>
- </div>
- </div>
- <div class="row-fluid">
- <div class="span6">
- <h2>.backgrid</h2>
- <p>This is the class that will be applied to every Backgrid.js
- generated table. All other Backgrid.js default styles on
- table elements will only apply to descendents
- of tables of this class.</p>
- <textarea class="code-snippet" data-mode="css">
- /* Say you want to give some shiny gradient background colors
- to your table header */
- .backgrid th {
- background-image: linear-gradient(#2F2727, #1a82f7);
- }</textarea>
- </div>
- <div class="span6">
- <h2> </h2>
- <p>Although usually unnecessary, if you want to completely
- remove all Backgrid.js styles, you can supply
- a <code>className</code> attribute to
- the <code>Backgrid.Grid</code> constructor:</p>
- <textarea class="code-snippet" data-mode="javascript">
- var grid = new Backgrid.Grid({
- className: "my-awesome-css-animated-grid",
- ...
- });</textarea>
- </div>
- </div>
- <div class="row-fluid">
- <div class="span12">
- <h2>.backgrid .*-cell</h2>
- <p>Every cell class Backgrid.js defines has a CSS class
- applied to them of the same, but dasherized name. The
- default styles apply a <code>text-align: left</code> to text
- cells and <code>text-align: right</code> to numeric and
- datetime cells. All cell editor that uses
- the <code><input></code> element is absolutely
- positioned against the table cell.</p>
- <p>See the relevant <a href="#api-cell">cell classes</a> for
- details.</p>
- </div>
- </div>
- </div>
- </div>
- </section>
- <section id="faq">
- <div class="page-header">
- <h1>Frequently Asked Questions</h1>
- </div>
- <div class="row-fluid">
- <div class="span12">
- <h2>How do I add or remove a row?</h2>
- <p>You can either use <a
- href="http://backbonejs.org/#Collection-add"
- title="Backbone.Collection#add">Backbone.Collection#add</a> or <a
- href="#api-grid" title="Grid#insertRow">Grid#insertRow</a> for
- insertion. Similarly, use <a
- href="http://backbonejs.org/#Collection-remove"
- title="Backbone.Collection#remove">Backbone.Collection#remove</a>
- or <a href="#api-grid" title="Grid#removeRow">Grid#removeRow</a>
- to remove rows.</p>
- <h2>How do I validate user input?</h2>
- <p>See <a href="#api-formatter" title="Formatter">Formatter</a>.</p>
- <h2>How do I save my row changes to the server immediately?</h2>
- <textarea class="code-snippet" data-mode="javascript">
- var MyModel = Backbone.Model.extend({
- initialize: function () {
- Backbone.Model.prototype.initialize.apply(this, arguments);
- this.on("change", function (model, options) {
- if (options && options.save === false) return;
- model.save();
- });
- }
- });</textarea>
- <h2>Why doesn't Backgrid.js support AMD (or NPM)?</h2>
- <p>The same question can be asked for volo, bower, ender,
- browserify and many other competing solutions. The number one
- reason Backgrid.js does not support AMD is because of the
- barrier it presents to writing extensions that require
- third-party libraries that don't support AMD. In addition
- to this, Underscore.js and Backbone.js also do not support AMD
- at this time.</p>
- <p>The problem with supporting any package manager is that
- Backgrid.js is a highly modular project, and that deciding to
- use any package manager presupposes all its submodules and
- dependency is compatible with such a package manager and its
- importing mechanism. The Javascript ecosystem has gotten so
- diverse now that there is still not yet a clear packaging winner
- that everybody uses and works well under most situations, it is
- also not clear that ES Harmony's module system will be
- backward compatible with AMD.</p>
- <p>Having said that, Backgrid.js doesn't do anything to
- prevent you from adding support to your favorite package
- manager. You are encouraged to fork and maintain your own
- Backgrid.js packages.</p>
- <p>You are also more than welcomed to convince me
- on <a href="https://github.com/wyuenho/backgrid/issues">Github</a>
- as you may probably know more than I do about packaging
- Javascripts.</p>
- <h2>Where do I go to ask questions?</h2>
- <p>Just ask away
- on <a href="https://github.com/wyuenho/backgrid/issues">Github</a>.</p>
- <h2>Does Backgrid.js support adaptive scrolling?</h2>
- <p>Some data grid widgets out there support a technique
- called adaptive scrolling, meaning the DOM elements will be
- swapped out of a viewport and new ones appended as the
- models are loaded from the server, thus keeping the memory
- more or less constant while providing an illusion to
- end-users that there's no limit to the number of rows the
- data grid can handle.</p>
- <p>Backgrid.js has something better and achieves the same
- effect with much cleaner code -
- <a href="#api-paginator">paginator extension</a>, which
- uses <a href="https://github.com/wyuenho/backbone-pageable/"
- title="backbone-pageable">backbone-pageable</a>. The paginator
- supports both paging on the server-side, or preloading all the
- models and paging purely through the browser. Paginated
- Backgrid.Grid instances only render one page of DOM nodes at a
- time to save memory and keep your web page responsive.</p>
- <h2>Does Backgrid.js support function aggregates?</h2>
- <p>No, because it is not the goal of this project to produce a
- full-fledged web-based spreadsheet. However, doing aggregation
- is trivial using Underscore.js methods</p>
- <textarea class="code-snippet" data-mode="javascript">
- // sum all the values of a column
- var sum = collection.reduce(function (accum, num) {
- return accum + num;
- });</textarea>
- <h2>Does Backgrid.js support multi-user editing?</h2>
- <p>Inside a Backgrid grid, every cell listens to the change event
- for its model value. The cells will rerender themselves during
- display mode upon changes in the model values. However, this
- functionality is only meant for synchronizing data automatically
- across multiple grids on the same page. If you are attempting to
- synchronize data changes across multiple processes, you will
- need some kind of a locking mechanism for the individual cells,
- Backgrid.js provides no help for that and you have to do this
- yourself. Implementing such web-based spreadsheet-like broker
- system is outside of the scope of this project, pull requests
- are welcome however.</p>
- <h2>Does Backgrid.js support feature (X)?</h2>
- <p>If the feature you have in mind isn't found here in this
- Backgrid.js version, it could either be in the works or under
- consideration.</p>
- <p>See the list
- of <a href="https://github.com/wyuenho/backgrid/issues?labels=enhancement%2Ctask&page=1&state=open"
- title="Github Issues">tasks and enhancements</a>.</p>
- <h2>How to build Backgrid.js?</h2>
- <p><a href="https://github.com/wyuenho/backgrid/blob/gh-pages/CONTRIBUTING.md#building" title="Contributing">See Building.</a></p>
- <h2 id="contribute">How do I contribute?</h2>
- <p><a href="https://github.com/wyuenho/backgrid/blob/gh-pages/CONTRIBUTING.md" title="Contributing">See Contributing.</a></p>
- </div>
- </div>
- </section>
- <section id="license">
- <div class="page-header">
- <h1>License</h1>
- </div>
- <p>Copyright © 2013 Jimmy Yuen Ho Wong and
- Contributors.</p>
- <p>Licensed under the <a href="LICENSE-MIT">MIT license</a>.</p>
- </section>
- </div>
- </div>
- <script type="text/javascript">
- var _gaq = _gaq || [];
- _gaq.push(['_setAccount', 'UA-36403214-1']);
- _gaq.push(['_setDomainName', 'backgridjs.com']);
- _gaq.push(['_setAllowLinker', true]);
- _gaq.push(['_trackPageview']);
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
- </script>
- <script src="assets/js/scale.fix.js"></script>
- <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
- <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
- <script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
- <script src="//cdnjs.cloudflare.com/ajax/libs/backbone-pageable/1.2.2/backbone-pageable.min.js"></script>
- <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.2/bootstrap.min.js"></script>
- <script src="//cdnjs.cloudflare.com/ajax/libs/select2/3.3.2/select2.min.js"></script>
- <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.0.0/moment.min.js"></script>
- <script src="//cdnjs.cloudflare.com/ajax/libs/lunr.js/0.3.0/lunr.min.js"></script>
- <script src="lib/backgrid.min.js"></script>
- <script src="lib/extensions/paginator/backgrid-paginator.min.js"></script>
- <script src="lib/extensions/text-cell/backgrid-text-cell.min.js"></script>
- <script src="lib/extensions/moment-cell/backgrid-moment-cell.min.js"></script>
- <script src="lib/extensions/select2-cell/backgrid-select2-cell.js"></script>
- <script src="lib/extensions/select-all/backgrid-select-all.min.js"></script>
- <script src="lib/extensions/filter/backgrid-filter.min.js"></script>
- <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/codemirror.min.js"></script>
- <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/formatting.min.js"></script>
- <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/xml.min.js"></script>
- <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/css.min.js"></script>
- <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/javascript.min.js"></script>
- <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/htmlmixed.min.js"></script>
- <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/shell.min.js"></script>
- <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.0.0/lang/zh-tw.min.js"></script>
- <script>
- (function () {
- moment.lang("en");
- $(document).ready(function () {
- var codestr = '';
- $("textarea.code-snippet").each(function (index, elm) {
- var $elm = $(elm);
- var codemirror = CodeMirror.fromTextArea(elm, {
- mode: $elm.data("mode"),
- readOnly: true,
- lineNumbers: true,
- theme: "ambiance",
- tabindex: -1
- });
- var start = { line: 0, ch: 0 };
- var end = codemirror.posFromIndex(codemirror.getValue().length - 1);
- codemirror.autoIndentRange(start, end);
- if ($elm.data("eval") === "yes") {
- if ($elm.data("mode") === "javascript") {
- codestr = codestr + "\n" + codemirror.getValue();
- }
- }
- $elm.data("codemirror", codemirror);
- });
- var scriptTag = document.createElement("script");
- scriptTag.innerHTML = codestr;
- document.body.appendChild(scriptTag);
- });
- $(document).ready(function () {
- $("a[href^='#']").click(function (e) {
- e.preventDefault();
- var target = this.hash;
- if (target) {
- var $target = $(target);
- $("html, body").stop().animate({
- "scrollTop": $target.offset().top - 55
- }, 500, "swing", function() {
- window.location.hash = target;
- });
- }
- });
- });
- $(document).ready(function () {
- function nextChristmas() {
- var now = new Date();
- if (now.getMonth() < 11 || (now.getMonth() == 11 && now.getDate() < 24)) {
- return now.getFullYear() + "-12-24T00:00Z";
- }
- if (now.getMonth() == 11 && now.getDate() >= 26) {
- return (now.getFullYear() + 1) + "-12-24T00:00Z";
- }
- }
- var santa1 = new Backbone.Model({
- name: "Santa Clause",
- age: new Date().getFullYear() - 270,
- birthday: "0270-03-01",
- gender: "m",
- alive: true
- });
- var santa2 = new Backbone.Model({
- url: "http://santaclaus.com",
- email: "santa@santaclaus.com",
- nextDeliveryTime: nextChristmas(),
- hisLocalTime: moment().format("YYYY-MM-DDTHH:mm:ss.SSS\\Z"),
- moneyInWallet: 10.7
- });
- var columns = [{
- name: "name",
- cell: "string",
- label: "Name (StringCell)"
- }, {
- name: "age",
- cell: "integer",
- label: "Age (IntegerCell)"
- }, {
- name: "birthday",
- cell: "date",
- label: "Birthday (DateCell)"
- }, {
- name: "gender",
- cell: Backgrid.SelectCell.extend({
- optionValues: [["Male", "m"], ["Female", "f"]]
- }),
- label: "Gender (SelectCell)"
- }, {
- name: "alive",
- cell: "boolean",
- label: "Alive (BooleanCell)"
- }, {
- name: "url",
- cell: "uri",
- label: "URL (UriCell)"
- }, {
- name: "email",
- cell: "email",
- label: "Email (EmailCell)"
- }, {
- name: "nextDeliveryTime",
- cell: "datetime",
- label: "Next Delivery Time (DateTimeCell)"
- }, {
- name: "hisLocalTime", // His local time is your local time, Santa lives at the North Pole.
- cell: "time",
- label: "His Local Time (TimeCell)"
- }, {
- name: "moneyInWallet",
- cell: "number",
- label: "Change in Wallet (NumberCell)"
- }];
- var cellDemoGrid1 = new Backgrid.Grid({
- columns: columns.slice(0, 5),
- collection: new Backbone.Collection([santa1])
- });
- $("#cell-demo-grid-1").append(cellDemoGrid1.render().el);
- var cellDemoGrid2 = new Backgrid.Grid({
- columns: columns.slice(5),
- collection: new Backbone.Collection([santa2])
- });
- $("#cell-demo-grid-2").append(cellDemoGrid2.render().el);
- });
- }());
- </script>
- <script>
- // Google +1
- (function() {
- var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
- po.src = 'https://apis.google.com/js/plusone.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
- })();
- // Tweet Button
- !function(d,s,id) {
- var js,fjs=d.getElementsByTagName(s)[0];
- if(!d.getElementById(id)){
- js=d.createElement(s);
- js.id=id;
- js.src="//platform.twitter.com/widgets.js";
- fjs.parentNode.insertBefore(js,fjs);
- }
- }(document,"script","twitter-wjs");
- </script>
- </body>
- </html>