文件列表:

Cakefile (221, 2012-08-31)
Gemfile (123, 2012-08-31)
Gemfile.lock (923, 2012-08-31)
Guardfile (305, 2012-08-31)
css (0, 2012-08-31)
css\abgrid.css (2311, 2012-08-31)
css\font-awesome.css (14589, 2012-08-31)
css\fonts (0, 2012-08-31)
css\fonts\fontawesome-webfont.eot (38708, 2012-08-31)
css\fonts\fontawesome-webfont.svg (130151, 2012-08-31)
css\fonts\fontawesome-webfont.ttf (68476, 2012-08-31)
css\fonts\fontawesome-webfont.woff (41752, 2012-08-31)
example (0, 2012-08-31)
example\example.html (1807, 2012-08-31)
lib (0, 2012-08-31)
lib\backbone-0.9.2.min.js (16464, 2012-08-31)
lib\jquery-1.7.2.min.js (94840, 2012-08-31)
lib\jquery-ui-effects.1.7.3.custom.min.js (27575, 2012-08-31)
lib\query-engine.js (34536, 2012-08-31)
lib\underscore-1.3.3.min.js (12821, 2012-08-31)
src (0, 2012-08-31)
src\abgrid.coffee (10327, 2012-08-31)
src\abgrid.editors.coffee (4623, 2012-08-31)
src\abgrid.formatters.coffee (255, 2012-08-31)

# ABGrid.js ## Awesome Backbone Grid ### Introduction This is our first open source project, to make our work on an internal project for the company also available to the outter world. During our development of this internal tool, we're in a need to find a javascript grid component to use but we couldn't find a simple one meet below requirements: * Integrate with Backbone.js * Support custom format of each cell in the grid * Support in-place editing * Support custom in-place editors * Support drag-drop change columns (both order and width) * Support drag-drop re-arrange the row display order * Support size-to-content for each row * Support paging (client side) We're trying out best to fullfil above requirements. ### Usage #### Model To properly use this grid with backbone, you'll need to prepare two *Backbone.Collection*s : * columns * rows both of them should be instance of *Backbone.Collection*. For example: var columns = new Backbone.Collection([ {name: 'First Name', field: 'firstName', type: 'string'}, {name: 'Last Name', field: 'lastName', type: 'string'} ]); var rows = new Backbone.Collection([ {firstName: 'Tyrael', lastName: 'Tong'}, {firstName: 'Eric', lastName: 'Yang'} ]); Let's take a more in-depth look at how to define a column. A column definition, consists of a **name**, **field**, and **type**. Those attributes are required to use ABGrid. **name** is the title displayed on the column headers, and **field** is the attribute name for the corresponding data on the row. Take above example, the first column has _firstName_ as **field**, so the cell value for that row is getting like: var cellValue = row.get('firstName'); There're some additional attributes you can set on a column definition, below is a list(with examples): * **width**: 50px (the width for this column. if not set, then the column width will be 'auto') * **align**: 'center' | 'left' | 'right' (how to align the header, and the cells forn this column) * **hidden**: true | false (hide this column or not) * **required**: true | false (whether this is a requied column) ### Contributors Tyrael Tong Eric Yang

近期下载者：

相关文件：

评论：[我要评论] [举报此文件]

收藏者：