July 7, 2013

Backgrid.jsを少し見てみた

Backgrid.jsはBackbone.jsのライブラリです。
http://backgridjs.com/

簡単に言えば、表形式のGUIに特化したビュー群ライブラリ。といった感じでしょうか。Excelみたいな感じのGUIをWEBで表現する際に役立ちそうです(Excel自体は大嫌いですけど)。

Backgrid.jsには、Backbone.Viewから派生した色々なビューが用意されています。以下、その一部です。

Backgrid.Grid … 表全体のビューです。
Backgrid.Row … 各行(tbodyのtr)のビューです。
Backgrid.Footer … フッタ行(tfootのtr)のビューです。

Backgrid.HeaderCell … ヘッダ行の各セル(theadのtrのth)のビューです。
Backgrid.Cell … 各セル(tbodyのtrのtd)のビューです。
Backgrid.CellEditor … 各セル(tbodyのtrのtd)の入力欄時のビューです。

Backgrid.CellとBackgrid.CellEditorは、以下のように、デフォルトで色々と拡張されています(v0.2.6のドキュメントより引用)。
* Backgrid.Cell
* Backgrid.DatetimeCell
* Backgrid.DateCell
* Backgrid.TimeCell
* Backgrid.NumberCell
* Backgrid.IntegerCell
* Backgrid.StringCell
* Backgrid.UriCell
* Backgrid.EmailCell
* Backgrid.BooleanCell
* Backgrid.SelectCell
* Backgrid.CellEditor
* Backgrid.InputCellEditor
* Backgrid.SelectCellEditor

Moment.jsを用いたCellや、Select2を用いたCellも用意されていました。

Moment.js
http://momentjs.com/

Select2
http://ivaynberg.github.io/select2/

これらの他にも色々な機能がありそうですが、必要に応じて探って行きたいと思います。

No comments:

Post a Comment