Backgrid.js是一个基于Backbone.js用于构建语义和容易样式化的HTML表格组件。提供简单、直观的编程接口，Backgrid.js目标是生成一组核心主干UI元素，为您提供您所期望的所有基本显示、排序和编辑功能，并创建一个优雅的API，使扩展Backgrid.js更容易。
特点
响应式，表格的相关样式在修改数据后立即呈现。简单实用，只需使用简单的CSS样式，就像普通的HTML表格一样。高度模块化和可定制。组件只是简单的主干视图类，如果您已经知道主干，那么定制就很容易了。轻量级，额外的功能已经被剥离成扩展，你可以很方便的使用这个扩展丰富您的项目良好的测试用例。
兼容性
InternetExplor8[]InternetExplor9+Chrome4+Safari4+Fifox4+Opera9+
支持上述浏览器的桌面和移动版本。
依赖关系
Backgrid.js依赖于个库来运行：
jquery=1.7.0undersco.js~1.5.0backbone.js=1.1.0每个控件的各种依赖项。
安装
自0..0以来，BackGrid引入了对通过AMD和CommonJS加载的支持。
AMD
如果您使用AMD，建议您使用bower
$bowerinstallbackgrid
而Backgrid.js没有直接支持对于AMD，您可以使用RequiJSshim选项。
CommonJS
如果你喜欢CommonJS，组件是一个很好的Web组件管理器，它同时构建了JS和CSS资源：
$npminstallbackgrid
老式的方式
您也可以下载Backgridco及其多样性扩展并引用HTML中的相关文件。
基本实例
收集与模型
在网格中显示任何表格数据之前，必须先获取数据。
在最基本的级别上，BackGrid假装每一行都是一个模型对象，整个表由一个简单的主干集合支持。
假设我们有一个区域信息对象列表：
varTerritory=Backbone.Model.extend({});varTerritories=Backbone.Collection.extend({model:Territory,url:"examples/territories.json"});varterritories=newTerritories();
格网
BackGrid包的主要入口点是Backgrid.Grid类。您可以通过首先定义一些列来创建默认的BackGrid，然后将该列列表和数据收集放到Grid构造函数中，如下所示：
varcolumns=[{name:"id",//Thekeyofthemodelattributelabel:"ID",//Thenametodisplayintheheadereditable:false,//Bydefaulteverycellinacolumniseditable,but*ID*shouldntbe//Definesacelltype,andIDisdisplayedasanintegerwithoutthe,separatings.cell:Backgrid.IntegerCell.extend({orderSeparator:})},{name:"name",label:"Name",//ThecelltypecanbeafenceofaBackgrid.Cellsubclass,anyBackgrid.Cellsubclassinstanceslike*id*above,orastringcell:"string"//Thisisconvertedto"StringCell"andacorspondingclassintheBackgridpackagenamespaceislookedup},{name:"pop",label:"Population",cell:"integer"//Anintegercellisanumbercellthatdisplayshumanizedintegers},{name:"percentage",label:"%ofWorldPopulation",cell:"number"//Acelltypeforfloatingpointvalue,defaultstohaveapcisiondecimalnumbers},{name:"date",label:"Date",cell:"date"},{name:"url",label:"URL",cell:"uri"//RendersthevalueinanHTMLanchorelement}];//InitializeanewGridinstancevargrid=newBackgrid.Grid({columns:columns,collection:territories});//RenderthegridandattachtheroottoyourHTMLdocument$("#example-1-sult").append(grid.nder().el);//Fetchsomecountriesfromtheurlterritories.fetch({set:true});
列定义列表Backgrid.Grid期望的只是一个JSON对象的列表，您可以将其硬编码到HTML模板中，或者在DOM准备就绪时从服务器检索。BackGrid并不关心列定义来自何处，只要您将列表提供给Grid构造函数。
正如预期的那样，现在显示了一个基本的可编辑数据网格。默认情况下，所有列的标题都是标记和可排序的。ID单元格不可编辑，并且所有其他单元格类型都内置了合理的验证。如果表太大，就会得到一个滚动条。
完整示例
如果您有像上面这样大的结果集，您可能希望能够分页和过滤结果。这在Backgrid.js中很容易实现。
Js附带了许多过滤器和一个分页器扩展，您可以将其加载到自己的代码中。
若要使用分页器，必须首先将集合声明为Backbone.PageableCollection，它是Backbone.js集合的一个简单子类，具有添加的分页行为。
varPageableTerritories=Backbone.PageableCollection.extend({model:Territory,url:"examples/pageable-territories.json",state:{pageSize:15},mode:"client"//pageentilyontheclientside});varpageableTerritories=newPageableTerritories();//SetupagridtousethepageablecollectionvarpageableGrid=newBackgrid.Grid({columns:[{//enabletheselect-allextensionname:"",cell:"select-row",headerCell:"select-all"}].concat(columns),collection:pageableTerritories});//Renderthegridvar$example=$("#example--sult");$example.append(pageableGrid.nder().el)//Initializethepaginatorvarpaginator=newBackgrid.Extension.Paginator({collection:pageableTerritories});//Renderthepaginator$example.after(paginator.nder().el);//Initializeaclient-sidefiltertofilterontheclient//modepageablecollectionscache.varfilter=newBackgrid.Extension.ClientSideFilter({collection:pageableTerritories,fields:[name]});//Renderthefilter$example.befo(filter.nder().el);//Addsomespacetothefilterandmoveittotheright$(filter.el).css({float:"right",margin:"0px"});//FetchsomedatapageableTerritories.fetch({set:true});
相关链接
